There comes a time when 12px font size and 10px of padding around your content is simply a no-no. In other words, styling your website this way is now a faux pas.
It’s your responsibility to serve up a good experience for your visitors. Now before I go on, I’ll show some examples of what I’m talking about — so that it’s crystal clear.
M’kay?
Here’s an example of bad typography – the kind that kills little puppies late at night:
Here’s an example of good typography – the kind that makes little angels gets their wings:
To illustrate the differences, here are the font stacks for each respective example:
Sorry, little puppies…
.bad-typography p {
font-family: Arial, Tahoma, sans-serif;
font-size: 12px;
margin: 0 0 10px;
padding: 10px;
}Woohoo, angels…
.good-typography p {
font-family: 'Lato', sans-serif;
font-size: 16px;
margin: 0 0 25px;
padding: 30px;
}Can you see the difference between the two? Yeah, that’s what I’m thinking. Me too.
Customizing CSS to make this kind of change on your website is a really an easy thing to do. It shouldn’t take more than a few minutes, if that — so go do it NOW!
If you want to save the world, one squinting eye at a time, stand up and make a difference. Go out and get yourself something from Typekit or hook yourself up with something (and they are free, might I add) from Google Web Fonts.
Not sure which combination of fonts to use? Well I got ya covered.
Now repeat after me… “I will care about typography and spacing on my website.”
Say it again. And again. And again.
Follow that up by saying… “16px font is the new 12. 30px (at least) padding is the new 10.”
After you’ve spruced up your typography and spacing, please take a few minutes to read about another something important — responsive web design.
Trust me, your visitors will love you for it.
Just an interesting thought, but to push this a little further in the right direction in regards to responsive web design… I would suggest using proportional dimension system like EMs rather than PX for font-size.
Completely agree with you John, but for newbies sake, I’m taking baby steps. Though you might find this interesting.
Nice… I would definitely make that margin into ems as well since you’re already defining the font-size in em.
Nonetheless, great article.
Brian – check out REM. It’s EM 2.0.
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/
http://snook.ca/archives/html_and_css/font-size-with-rem
I’m using REM on a modified Minimum theme here: http://gregrickaby.com/
Thanks Greg, Marcy had already suggested that and definitely something we’ll consider using. After all, I’ve only recently begun my personal campaign to understand great design and typography.
I must admit having gone back to Pixels after having used EMs for fonts. In the end they just drove me nuts as they are inherited and thus adapt to changes elsewhere.
Yeah, that’s kinda the point — the adaption that is. While it drives me crazy when I can’t figure out where a certain definition is inheriting it from, it does have it’s advantages.
Which advantages? I must admit missing nothing after going back to Pixels. Right now I tend to use Pixels for fonts, EMs for margins and padding and %s for width. That gives sort of a fixed fluid mixture that works for me. Right now at least
PS: I read about a form of EMS that are not inherited, but I cannot find it now. Not all browsers handle it well so it would be too soon to change anyway.
If you use “rem” instead of “em” they don’t seem to inherit. I’ve only used it on my current project, but so far, so good. But px just seem so much easier.
http://snook.ca/archives/html_and_css/font-size-with-rem
Excellent suggestion Marcy, as that would eliminate some of the “ghost changes” that em inheritance can bring. And trust me, this hits home because just the other day I was banging my head against my laptop trying to figure out the root of one particular font inheritance was coming from.
Oops, I forgot to mention since we’re being progressive… CSS3 has the ability to do vw and vh, to make the font-size proportional to the viewport as well.
+100 – great message and it needs to be sown widely!
Too bad the internet can’t implement something like the ‘capital_P_dangit’ filter that WordPress uses which would automagically increase font size upon viewing.
My font on DG is larger
because I need it that big to see it…
Probably too big for lots of folks…
I often have to use Cntl + to enlarge
folks sites as I navigate the web…
~Patricia – DomainBELL
No such thing as font sizes too large, in my opinion — and apparently Whitney and Zeldman agree.
Completely agree on the em vs px. Makes everything look much more balanced.
Need to disagree just a little on the amount of space and the size of the font overall. Agreed that 12 is just too small, but I often find that 16 is just too big for making a site feel comfortable for many.
I love the fact there are comments here regarding responsive too. Consider making the font even larger on the smaller devices.
Typography and spacing can mean a lot of different things for different people under varying circumstances. More than anything, my rant isn’t about splitting hairs — rather encouraging folks to move forward with the way their websites look.
I think we can all agree that my diagnosis on this web experience is spot on.
But I agree with you – some fonts, Google and Typekit in particular, look a bit odd at 16px in size. Like you said, depends on the situation.
I couldn’t agree more with you. 12px font came from the print world, which on paper is a great size, however, we sit much further away from our computer screens, than we do with a newspaper, books, magazines, ect., which we hold much closer when we read.
I do want to mention, though font size is important, line spacing (line-height in CSS) is equally important and often underlooked. Giving the font a little more space between lines especially with wider copy of texts allows the eyes to easier track and follow along the sentences without loosing position. And of course, bringing up copy width, when sizing your font, always want to keep CPL in mind; too few our eyes are jumping around too much, too long, the eyes begins to strain to scan the entire width of text.
Anyways, great article, it is important to let people know its ok to bump up the pixels, and actually preferred.
Chris, you are spot on with line spacing and what not. Like I’ve said, there isn’t a magical CSS equation that covers all. Of course content width and proportions to overall site width also play a factor.
The ironic thing is that currently most (if not all) browsers render the default body size to be 16px. And that article was written 5 years ago.
Thank you…a million times, thank you. I just saw a design client’s blog the other day where she went in and changed the font to 12px illegible awfulness – with a 700px wide content column! I can handle people messing with their colors, but LEAVE THE FONT SIZE ALONE.
Sorry. I get a little worked up about this issue. Thanks for providing a “safe space” for my follow-up rant.
You might suggest to your client that she consider this handy tool that Chris Pearson built.
12px font size with 700px content width would pretty much cause me to leave the site immediately.
Awesome resource – thanks for passing it along! I talk big, but I’m not sure I have the guts to send her a link to it personally. Confrontation is easier for me in real life than via email.
But maybe on my FB page…
Well done for the callout to Chris Pearson, who’s campaigned for great typography for a while. Having switched from Thesis, I do miss the font size controls in the dashboard, and the proportional changes that happened as a result of dashboard changes. Maybe that’s something that we might see in Genesis in some form?
Brian, you put the spotlight on one of the biggest website issues today! Thank you.
I struggle revisiting sites with bad typography. But it’s interesting how folks don’t even notice it. What’s even worse is coming across newly developed wp themes with bad typography (oof!).
One thing is for sure, StudioPress is definitely setting the new web standard!
I love the designs that I see on Theme Forest, but in my opinion, the typography there follows the same trend — extremely small font sizes. In some cases I’ve Firebugged to confirm that 10px font is sometimes being used.
Not such a rant Brian.
I noticed on your similar piece on Facebook that the comments generally implied that it was an age thing… reading glasses and the like.
I don’t think that it is an age thing.
It’s a wanting to be able to read easilly thing and that applies regardless of age.
Your “bad typography” example is a real turn-off, but you still see it, and worse, all over the net.
Eh… a round submit button.
Yes, this is an internet epidemic.
As for the round submit button, that’s just me having fun with CSS and ripping off the way Rafal did it on his blog. Though he pulls it off better.
Great post Brian, and yes, over the last 12 months have changed my theme out 4 times (neurotic… I know) and each time I did, it being one of your child themes, I never touched the CSS for the text… have loved it the way it is.
But what’s most interesting is the feedback I have received. Two things always come up… “easy to read” and “clean”.
I hope more theme devs come to this conclusion : )
Only 4 times? Lightweight.
Rafal and I have spent a number of conversations wrapped around the direction of our themes at StudioPress. And I’m sure you can see how we feel about “easy to read” and “clean.”
The Apparition theme being a perfect example.
Well, Marcy beat me to the punch, but I love how WP’s new Twenty Twelve theme uses rem values with a pixel fallback. Definitely hope that becomes the norm; especially for any responsive designs. Good post Brian!
Technically Greg beat both you and Marcy to the punch, because his comment was marked as spam.
But in all seriousness, we’re doing our best to set the normal with WordPress theme development, using the Twenty Twelve theme (props Drew Stronjy) as one of our primary examples of how to handle responsive web design and HTML5 markup.
How do you feel about full justification of text on the web? Seems to work in print, but on the screen, it feels taxing on the eyes. Thoughts?
It really depends on the situation at hand. I don’t think I’d like it if there was a content/sidebar style layout — but I think that Whitney Hess could have pulled it off on her site with a single column approach with her content.
Brian, you are preaching to the choir. As someone who deals with acres of online text everyday (both reading and writing), I couldn’t agree with you more. Not everyone has the eyes of a young person. Anything below 14px leaves me with a headache. The feeling of larger type with more white space is like when you slip out of your favorite tight jeans into stretch pants. So, let your readers breathe, I say.
I keep dropping Whitney’s site as an example, but when I land on a page and feel a breath of fresh air as I begin reading the content, I know they have stellar typography and spacing.
For me I used to think anything less than 16px is too small, but even now that’s trending upward.
And believe it or not, it was the great example of typography that I saw on MSNBC articles that really made me pay attention to this topic.
Really interested in checking out REMS–thanks for the info!
As someone who has been a typophile for 17 years, there’s just so much further the web can go with good typography. The promise of web typography is just starting to evolve. For instance, I’m dying for kerning and hyphenation tables for setting really beautiful type. Also, type breaks that can go responsive. Like, this weekend I was working on my first responsive design, and the headlines had to be stacked based on the viewport, not on what was most visually appealing. So I basically had to mess with the margins/padding of each headline element at common breakpoints to get it to display the way I intended. There’s got to be a better solution, it just doesn’t exist yet (that I know of). It looks like kerning can be handled by http://letteringjs.com, which is on my “to try” list, so maybe that wishlist item will be granted. I’m also intrigued by or http://fittextjs.com.
It also really helps to look at some of the type masters to see how they have handled type in the past–Neville Brody is one of my favorites..David Carson was really influential, but I think it’s going to be awhile before web typography lets us go *that* crazy in anything that isn’t experimental…
now that’s cool.
I think you could explore paragraph spacing, your example of “good typography” doesn’t extend to your paragraph spacing.
Eh, a little confused here – can you explain?
Pacing and rhythm are lost with massive paragraph spaces. The continued use in the interactive world of a whole return between paragraphs (paragraph spacing) instead of appropriately set spaces or better still indents shows that a continued lack of basic typographical knowledge has become prevalent.
Font size doesn’t worry me that much. Setting a font to a certain size does nothing because you have no idea what the end viewer has for settings on his monitor. Case in point, this comments page. I run Firefox with No Squint add-on at 150% and this page looks decent. But, if I run that down to 100% it is completely illegible. All my monitor settings on my 24″ monitor are set to Normal, so if I didn’t use 150% I wouldn’t be able to read a thing.
What gets to me more is nutjob designers that will put a medium value color text, say medium brown, on a darker value background of the same color, like dark brown. Do these designers even look at their work when they’re finished?
OK Brian. You got me on this one.
I just changed my font to Google (added to CSS stylesheet) and selected one of your top 5 recommended ones.
It definitely makes it easier to read, and that’s something I was looking for, because it’s quite different when I read it from my Macbook compared to the rest of my PCs and mobile devices.
thanks brian. I will pay attention to about fonts
Brian, there’s always room in this world for a rant on typography as spacing. Too often we forget or ignore details like is, and the reading experience suffers, which is bad. My college professor would go on similar rants. This was during the Dark Ages circa 1996. The one thing I learned was that details matter.
By the way, I’m loving the new theme here too. Where is it in the gallery?
Hey Rodger – thanks for the comment! The new theme I have is a customized version of our Minimum theme.
I am still amazed people are using the font in the ‘puppy killer’ example and I completely stopped reading such blogs. Most of those seem to be using some old themes from the very beginning of WordPress, I just don’t understand how can they read their own blogs and not see it.
I use Genesis framework so installing a theme by default gives me great fonts but even with that I still experiment with different spacing and fonts to always have a site that is easy to read and scan (for those who don’t read whole posts).
Ok, ok… I finally changed mine from 14 to 16
Here, here. Over the last several months, I’ve gone as far as taking my website full width (975px). I’m using the Georgia font at 19px with a line-height of 31px. I’ve received great feedback and the stats show more people are actually reading.
I love your sense of humour Brian. I’ve been chanting topography and spacing all along and I’m not even a designer.
By the way, may I hijack the font you currently use for your blog?
Go for it, it’s Helvetica Neue.
Typography really matters a much. We should have good typography on our blogs to give our readers best reading experience and it attracts them to come back again.
Wow, I made my “typography” larger and increased my margins. Typography is so easy – those college classes were a waste!
Hello, Brian! I’m just finding this post for some odd reason, but I wanted to stop by to say THANK YOU for all of the kind comments on my website’s typography and spacing. When I redesigned it last summer, I felt like I was taking a big risk pulling all the layers away and having the content sit there all by itself — thereby forcing the reader to contend with it. Not everyone has been a fan of my approach, and that’s okay. I’m just glad someone out there gets what I was going for. Thank you!
Hey Whitney, thanks so much for dropping by. (and what an honor!)
I think those who don’t fully understand and embrace a minimalist approach with emphasis on content probably fall into the “old school” category of internet user. Some folks think overdesign is the only way to go.
Which, obvious, you and I don’t.
Brian, just an update on my blog if you haven’t been there recently. You might notice something new
Woohoo, Whitney — nicely done!