7

Our typography could be improved for better legibility

I really like the new design and when it was first implemented I didn't really pay that much attention to some of the finer details like line height and font colors.

I am using a 27" Apple Cinema Display calibrated with a Spyder 3 Elite colorimeter and either Chrome 11 or Firefox 4.

I also recently switched to using a Mac and the subtleties between the fonts are much more noticeable for me now.

My issue is with the line height of the body text and the color contrast between the links and the text. Currently the body text is 14px with an 18px line-height. For Lucida Grande this is to to tight and makes it harder to read longer paragraphs. With Lucida Unicode that Windows users will see it's not as bad. Also there is not enough color contrast between links and text.

When the design was first proposed by Jin he stated:

I've used the same colors for accents, and Mr. Eaves as the typeface in the header logo. The question listing titles are set in Georgia, and the body text are in Lucida Grande. The same typographical styles are used on the official WordPress site.

The typographical style is similar to what is being used on WordPress.org but it's not the same. The link color is the same WordPress blue but the body text is a darker shade of gray. Also the line height spacing is much tighter than on WordPress.org.

WordPress.org font stack

body {
font-size: 62.5%;
font-family: "Lucida Grande",Verdana,"Bitstream Vera Sans",Arial,sans-serif;
line-height: 22px;
color: #555;
}
a {
color: #21759B;
text-decoration: none;
font-weight: normal;
}
#pagebody {
font-size: 12px;
}

WordPress.org Screenshot

enter image description here

WordPress.stackexchange font stack

  body {
    line-height: 1;
    text-align: center;
    color: #333;
    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
    font-size: 13px;
    background: transparent url('img/bg-watermark.png') no-repeat center top;
    }
    a {
    color: #21759B;
}
    #post-text {
    font-size: 14px!important;
    line-height: 18px!important;
    color: #333;
    }

WordPress.stackexchange Screenshot

enter image description here

Same paragraph viewed in a Windows 7 virtual machine

enter image description here

My Design Change Proposal

Change the text color from #333 to #555 and increase the line height to 1.4 or roughly 20px.

This would give us better contrast between the links / text and make the questions & answers easier and more pleasant to read.

Screenshot of my design change proposal

enter image description here

Do a right click and open in new tab to get a much better view of the differences in the screenshots

4
  • 1
    Yep, link colors could definitely use some tweaking. Aside from color contrast they also don't have underline like WP.org style. It is currently hard to distinguish links in text, especially if anchor is short and in the middle of something.
    – Rarst
    Commented Mar 29, 2011 at 14:20
  • t31os maintains an alternative stylesheet in this post if your interested, I have found it to be very helpful. meta.wordpress.stackexchange.com/questions/401/…
    – Wyck
    Commented Mar 29, 2011 at 16:37
  • My user stylesheet: pastebin.com/A2c2G7Kq
    – fuxia Mod
    Commented Mar 29, 2011 at 19:06
  • To be honest though, links and general text are probably the areas i've fiddled with the least in my style, i've been thinking about changing the colours though, i do struggle to see links still(i don't why i havn't adjusted the colour more, i'll get on that now).
    – t31os
    Commented Mar 30, 2011 at 12:00

1 Answer 1

Reset to default
2

Chris_O, thanks for the suggestions. I agree. I have made the changes you proposed, they will be in the next deployment.

6
  • Wow. Thanks Jin. My tired sore eyes also thank you.
    – Chris_O
    Commented Mar 30, 2011 at 1:28
  • @Chris_O NP. I'll have to see if #555 text color works out. I typically make the text a bit darker than I prefer. From experience, A LOT of people have monitors that are not properly calibrated. This is a problem with older LCD screens too. So for them, #555 may be too faint.
    – Jin
    Commented Mar 30, 2011 at 2:57
  • @Jin: Does this mean the comment color should be changed also? It is #444 - isn't that too close to #555, so that people think it is an error? I would either make it #555 too or go away further from it.
    – Jan Fabry
    Commented Mar 30, 2011 at 6:43
  • @Jan I missed the comment color. I just updated it to #555 on dev. It will be in the next deployment.
    – Jin
    Commented Mar 30, 2011 at 6:58
  • @Jin: I just noticed that #wmd-preview does not have the new style yet, can you add them there too?
    – Jan Fabry
    Commented Apr 3, 2011 at 16:18
  • @Jan, I just updated the css for #wmd-preview. the changes will be in the next deployment. This applies to both the main site and the Meta.
    – Jin
    Commented Apr 4, 2011 at 2:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .