[16 pixels] is not big. It’s the text size browsers display by default. It’s the text size browsers were intended to display… It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size.

In this article, I’ll explain why 16 pixels should generally be the minimum size for body copy in modern Web design. If I don’t change your mind, perhaps you could chip in at the end and let me know why.

You see, in most cases, if you’re building websites with the font size set between 10 and 15 pixels, you are costing your clients money. And I aim to prove it.

Readership = Revenue

If you’re building a website for someone — even yourself — chances are its purpose is to make money.

Perhaps it’s to sell a product directly, or to offer a service, or just to generate leads. Whatever the case, it’s a business asset, and ultimately it has to generate a return on investment. It has to fulfill a revenue goal.

So, every element should be designed to achieve that goal. Including the copy. Especially the copy — because the copy is what convinces visitors to do whatever it is you want them to do on the website.

Think about it. If you don’t explain what people should do, or why they should do it, then they certainly won’t. And the only way to tell them is with text. And text means reading.

Important Facts About Reading

There are some particular findings that are pivotal to issues such as readership and readability and comprehension, which is really what body copy is all about. If people won’t read it, or if they can’t read it or understand it, then what’s the point of having it?

At age 40, only half the light3 gets through to the retina as it did at age 20. For 60-year-olds, it’s just 20%.

Nearly 9%4 of Americans are visually impaired, meaning their vision cannot be completely corrected with lenses.

The distance at which we can read letters is a common measure5 of both legibility and reading speed. The greater the distance, the higher the overall legibility and comprehension are considered to be. The biggest factor that determines how far this distance can increase is font size. Seen any billboards lately?

Most people, when sitting comfortably, are about 20 to 23 inches6 from their computer screens. In fact, 28 inches is the recommended distance, because this is where vergence7 is sufficiently low to avoid eye strain. This is much further than the distance at which we read printed text — most people do not hold magazines at arm’s length!

16-pixel text on a screen is about the same size8 as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens:916-pixel text displayed on a 24-inch screen, next to 12-point text printed on paper. (Large preview10)

1116-pixel text displayed on a 15.4-inch screen, next to 12-point text printed on paper. (Large preview12)

In a 2005 survey of Web design problems, bad fonts got nearly twice as many votes13 as the next contender, with two-thirds of voters complaining about small font sizes. If you think the situation has improved since then, think again. I randomly sampled some new blog designs on SiteInspire14 and found that the average font size for body copy was a measly 12 pixels. Some designs even used a minuscule 10 pixels. And none were over a weaksauce 14 pixels. Similarly, if you randomly sampled offerings on the popular Elegant Themes15 and ThemeForest16, you’d find that every single theme sets the main content at just 12 or 13 pixels.

Fact: Most Web Users Hate The “Normal” Font Size

With this research in mind, let me ask: how many of your client’s readers are around 40? Because they have to work twice as hard to read as 20-year-olds. If they’re closer to 60, they have to work four times as hard.

Almost 1 in 10 of your readers also has trouble with their eyes. Of the rest who don’t, most will still have to strain to read text smaller than 16 pixels, even if they don’t notice that they’re doing it. (How often do you find yourself hunching over the screen?) And that’s if they’re leaning close, which they would likely find awkward and unergonomic. Their natural sitting position will be at least an arm’s length from the screen!

In short, for the average Web user, reading most websites is not unlike taking an eye exam.

The harder your text is to read, the less of it will get read — and the less of what is read will be understood. 10 pixels is essentially pointless. 12 pixels is still much too small for most readers. Even 15 pixels will turn off visitors who might have otherwise converted.

Thus, we can conclude that if you want the maximum number of people to read, understand and act on your text, then you need to set it at a minimum size of 16 pixels.

“But Users Can Zoom”

If you code it right, people with vision issues can always use the Option and + keys to enlarge the text.

Thus spake one Web designer in a discussion I had on this very issue.

Not so. The users who will most need to adjust their settings usually don’t know how17. And the users who do… well, they’ll probably just take the easier path by hitting the “Back” button. It goes without saying that we shouldn’t take our clients’ money and then design websites for them that will make their visitors uncomfortable. Our personal tastes are not more important than best practices in usability.

Web design is not about what designers like. It is about what users want and what will best achieve our client’s goals.

If the objective of a client’s website is to achieve some revenue goal, then our role as designers is to come up with something to achieve that goal as effectively as possible. Picking a font size that we know most users will struggle to read, a font size that will reduce readership, a font size that will ultimately cost conversions, is not good choice.

In print, type as small as 8 points is an ideal compromise between readability and cost, because you have to pay for every millimeter you use. On the Web, you pay nothing for using more space — provided that readers find your copy compelling, of course. What you do pay for is readers finding your compelling copy so hard to read that they click away instead of converting.

So, the question is, are you prepared to cost your clients money for the sake of what looks good to you?

16 Pixels Is Not Big

Our tastes and aesthetic preferences as designers are a lot more malleable than we think. What “looks good” to us is largely the result of what we’ve seen other designers doing and what we’ve come to expect.

Unfortunately, most of the websites we’ve seen are packed with tiny copy, because once upon a time screens were tiny, and so designers matched them with tiny text — but no one got out of the habit.

This article is set in TeX Gyre Schola at 19 pixels. I picked this size because 16 to 18 pixels looked too small to me: as I sat back comfortably in my chair, 28 inches from the screen, I found myself squinting to see it. If I’d used Georgia or Verdana, 16 pixels probably would have been fine: they were designed with a larger x-height and so display better on screen.

Now, check out the footer just below and see whether you don’t hunch forward automatically, screw up your eyes and furrow your brow. That’s 12 pixels for ya. And if you still disagree after that, tell me why in the comments.

Paul Trumble

Chris Howard

That doesn’t make sense. How can you be converted by the comfort of the font size when it was actually 19px? So, to achieve what he has, you’d actually have to set all sites you make to 19px. But then that’s a whole new debate.

Karin

I think you point at something interesting. The large font make us read it slower and the smaller to just go trough it and not really read it. To enlarge the font was a tip I got years ago when it comes to proofreading as it is to easy to just “skim” it when the text is small.

10

7

DJ

Just the opposite – the larger font IS more suited to long text. How old are you? (as the article asks) – I actually found the body text of the article easier to scan/read than the smaller text below. AND, his points are valid – I’m so tired of needing to zoom in order to read simple text on web sites (especially some web development sites); AND, the web is becoming so full with alternate sources of information that you CAN read – I’ve just given up on making the attempt. I have found myself completely bailing on 4 or 5 sites a week when I’m confronted with small text. Much more cost effective of my time to scroll down the Google list to a new site.

7

8

Julian Gaviria

Greg

Outside of the initial search page, Google is hardly a paragon of usability. Sure their interfaces look cool and have some pretty cool features, but many of them are hard to use or break web ui conventions.

0

10

Ryan

Why does everyone look to Google for pointers? Truth be told, their user experience people are effing useless. Whatever you do, don’t look to Google for UI/UX pointers – they just don’t have much talent in that department.

Zendy

Kyle

The first thing I did to read this was reduced the font size down to something around 12 point, then when I got to the comments I bumped the size back up sot that the comments are readable. I think 16 is a bit much, but a 14 or 15 might be an acceptable compromise. As pointed out in the article those that like a smaller font can probably more easily figure out how to reduce display size than those that prefer a larger font. I can’t help but wonder though that for those who override website settings to display fonts much larger than normal if when viewing a page like this they don’t get slapped in the face with 30 point fonts or something similar.

Bjørn

Chris Howard

Hey, Kyle. Problem is, this post is actually set in 19px. A lot of people missed that in the article – which proves they were skimming, and prob coz it was hard reading.

So, the font was too big. And that’s why it was hard work to read. At 16px it’s much more readable.

I don’t understand how or why on earth he’d try to argue for 16px then not even use it! Totally undermined the credibility of his arguments. (Especially when he says “See how small 12px looks now. Well of effing course it looks small against **19px**!!)

15

19

Eliseu Monar

It also depends on your screen resolution. Mine is set to Full HD, so the letters don’t look that big, they look pretty comfortable to read. He set the size to 19px because the font family was made with different height, so the author tried to match normal sizes like those from families like Verdana. Read this reply from José Luis, he talks about pixel density and screen size, that’s the point.
It would be nice to see a CSS measure that adjusts to screen resolution =D

1

20

Adrian

I totally agree with you, at 16 px the above text is way better for easy reading. Meanwhile 19 px it is quite shocking and requires a careful text formatting, and in most cases clients don’t care about that. They just throw in the text and expect to look good.

Also as a web designer I often find that clients want a lot of information on the visible part of the homepage(the one you see without scrolling). For those cases you cannot use all text at minimum of 16px, because the design falls apart. you may use some text at at even higher number but the rest cannot be at 16 px min.

Maybe when everyone will have a screen resolution of a minimum 1440 px in width then it will be suitable, but as long as we still have to take into account the 1024 px screens I do not think it is suitable as much.

PS: you really ruined your article with your 19 px font size instead of 16. Maybe it is not to late to change it.

1

21

Will

You obviously didn’t read the article very clearly. Repeated in many places, including the *opening line*, he says 16px should be the *MINIMUM*. Nowhere did he say it was necessarily bad to go higher. He didn’t undermine anything he said.

0

22

Ryan

Kyle

To those that pointed out the confusion between point and pixel, you are correct, I had missed that, but it doesn’t change the point of my comment which is that the first thing I did when trying to read this article was bump the font size down about 6 units, in whatever system you want to measure those units in. To be fair, I like really small text, so I’m probably one of the outliers (I’ve got a nook and I always read books on it using one of the smallest font sizes it provides).

“I think your very much confusing familiarity with usability. Trying thinking and analyising instead of just throwing out reflex opinions.”

I can’t tell if you’re trolling or actually serious. Assuming you are serious, there are a couple points, first of which is that usability and familiarity are interrelated concepts. It’s practically a truism that what we are most familiar with we find the most usable. That’s the whole point of things like look and feel standards. Now, that doesn’t mean that you can’t ever change things and deviate from what people are familiar with without destroying usability, but such deviations should be gradual, consistent, and well reasoned about. This article makes some excellent points, and I do think in general we probably favor smaller size fonts than perhaps the majority of the population is comfortable with. I personally feel the article over-reacts and pushes the fonts a little too big (and as pointed out by others the article itself actually uses a font size larger than what the article suggests you use), but as I said above I like really small fonts so I probably constitute an outlier.

Jordan

I did exactly the same thing… when I got onto the main article from the smashingmagazine homepage I read the first paragraph and dropped the size down.

I found reading body font at that size on a screen was more difficult than reading the usual sized text.

It is true that some people have difficulty reading small text because of eyesight or age but should the default change to cater for that? Some people have very limited vision and require screen readers so why not just have a blank page with a voice over?

It is correct that Web designers should be be designing for themselves but for what the users want and what is best at converting but as a designer who has worked on everything from major global cosmetics eCommerce websites to some of the fastest growing web hosting companies in the world, I would have been laughed out of the office if I had tried to use 16px as a body font.

I think line height and paragraph stylings (width, orientation, alignment) would have more of a impact on improving readability.

I also believe that the issue regarding people in their 40’s and 60’s struggling to read the screen is a bit of a weak point. If you struggle to read 12px font then you obviously require reading glasses or contact lenses and to read without corrective measures would only be damaging your eyes further!

-1

25

bh2

You plainly don’t understand the problem. Aging eyes (including yours, in due time) become less precise. The retina detaches and “floats” (as yours will, too). Also, many people begin to develop cataracts long before they hit old age. This adds more “fuzziness” to their vision. (Detached retina can result in permanent blindness if not immediately treated, usually by laser “welding”, but that’s another thread.)

Those who have early cataract development are often encouraged to wait until it’s progressed further before having lenses replaced.

Neither of these very common conditions can be overcome merely by fitting better glasses, but only by larger font sizes. If you’ve ever noticed some older people can only read using a magifying glass to make the type appear larger, now you know why.

D Bnonn Tennant, Information Highwayman

Rizqi Djamaluddin

The drawback I find with large text is that it increases scrolling. Less eye strain figuring out letters, yes, but as mentioned, it means the eyes move around faster and fingers have to scroll more, and it’s even more straining for the eye to have to follow around text as it scrolls around. I found this to be especially true for mobile devices – you have to hit that sweet spot between readable text, and not too much scrolling to get what you want.

whatsat

Agree 100% with Bnonn , 16 is as small as you should go.
There is NO justifiable reason to disagree.

Font’s are an issue as pointed out in the article ,
HOWEVER the times font used in the article can hardly be described as easy to read. ( practice what you preach ? Bnonn )
Every letter in that font has lots of useless accents that blur the true shape of intention.
eg..( have a really close look at the letter i )

**** I know Times roman is a tradition in print.
( therefore it must be good ? ) no

Think about the ease of text transmission.
For the most efficient transport from page to eyes. The font needs to be the most basic font available. Not cluttered with artistic shapes.

Anyway , great article to make those webdevs who think form over function is priority.
When the reality is…..
COMMUNICATING content , is the ONLY reason for text to exist.

Mario

Devan

Maybe a bit of an oversight but it doesn’t actually weaken the claim being made, right? For the purposes of the argument, it doesn’t matter if the print example is the same size across the two examples—only that in each separate example, they’re shown to scale with the on-screen type.

0

33

LXicon

when i saw those two example screen shots which didn’t match each other (and were both WAY smaller than the text of the article) i felt like the author didn’t know what he was talking about. i stopped reading after that.

Sequoia

>I find it hard to take the article seroiusly (even though I agree with the point being made) due to the styling used throughout;

Are you joking? He presents usability studies and examples, and you dismiss it because you don’t like the fonts he chose? *sigh* You’re not doing much to combat the combat the stereotype of the myopic, superficial designer. This is exactly the attitude an article like this is meant to combat; there’s more to usability than your personal opinion!

foljs

The Red Impact headers and the drop shadow & spacing on the first letter of the new paragraph. It’s horrible.

Yes, let’s confuse aesthetic matters with readability, which is what the post is about.

I was also under the impression that Sans-serif font’s are easier to read on screen than serif fonts, so on an article about legibility, why choose a serif font (no matter the size?).

You were under the WRONG impression based on old-wives tales. Go read some current studies with actual stats from users. Oh, and dpi’s are higher now, and font rendering smoother than when that old wives tale started.

2

41

Scott

sean

Hey Scott, I know what you mean about the headers. The drop shadow is encroaching into the text and that does affect readability. I also understand where the others are coming from. I’m just writing to say I thought you handled all this well and the fact that you wrote back and requested documents to read further shows you love what you do and you have respect for the site in general.

Sean

AJ

William Key

The latest research indicates that people no longer seem to have any issue with reading serif vs. sans-serif fonts onscreen vs. in print. One factor is that monitor screen resolutions are generally high now so that we don’t encounter the same problems with the terribly pixelated serif strokes that occurred in older monitor displays. Another possible factor is that we’ve become so used to reading sans-serif onscreen that we don’t need the serif fonts to improve legibility in print. Obviously there may be generational differences between people who consumed printed text for most of their lives vs. those for whom digital text has been equally or more significant than reading print.

3

47

Eric Barker

I’d like to see the studies on sans vs serif people are referencing, but not referencing. Print or post it on the highest resolution available and apply all the stats from this post and you will struggle to read the serif more than the sans. You don’t need to spend any $ researching this. Squint your eyes people, serif’s are harder to read.

D Bnonn Tennant, Information Highwayman

Hey Scott, I’m not sure what’s up with the styling in Firefox. I actually created the CSS file in Firefox, but since submitting it for publication, summat nasty has happened to it.

Check the article in Chrome for how I originally wanted it to look.

Re sans serif fonts being easier to read, there was a time when this was true on screen, because of low pixel density making the serifs really jagged. However, these days it’s not a problem at all, provided you’re using a good font size to begin with :)

bora yalçın

I’m actually a web developer not designer but as a “i will try and learn design” project i designed my personal site ( http://borayalcin.me ). At first it was 12px as I’m used to see but even though I’m 25 its hard and tiring for me to read my own stuff.So, I’ve increased it to 16px and everything is fine

Viktor

Devan

Specifying font size in .em calculates it for the given element relative to the base font size specified elsewhere. The body copy of this article renders in my browser (with default font sizes) at 19px, which is, of course, well in line with the article’s claims.

5

62

Patrick Hazard

Really interesting, I think I also subconsciously skim articles more if they are in a small font size and read larger font articles more fully. It’s easier on the eyes even for a twenty-something year old with perfect vision.

You also missed the point that it’s much easier to read on a phone or tablet but they that obviously brings up the whole ‘responsive website’ can of worms!

BrianRowdy

tiujam

Do you still remember when 4 years ago it was a passing trend to use 10-11px Verdana as body copy? Yach! I know I personally get very easily tired on reading blogs that use such a small font-size (*ahem* A List Apart *ahem*) – no matter how _awesome_ the content is! My personal preference is to use a RSS reader with my own font preferences, since zooming pages annoy me even more:P

For me the small body copy problem got slightly worse when I got my first laptop. After that I started to implement bigger and bigger body fonts to my designs. Haven’t gotten to 16px yet tho’! It definitely takes something to get used to AND it is definitely not for every situation:)

Mike Dougan

WC

I was reading this in Google Reader, which has about half the font size your site does. It’s quite a striking difference and convinced me to try zooming Reader in a bit. Definitely better. Not sure why I never did it before… I zoom other websites all the time.

0

72

Jacques

16px fonts definitely tend to be a good choice, but it really does depend on exactly what font you’re using, particularly if you’re using something like typekit where the fonts tend to have a small x-height.

If you make those too large and there’s a problem with the service, suddenly your back-up font is looking comically large.

D Bnonn Tennant, Information Highwayman

Neil, I agree that font size should be determined by the nature of the site and the target audience. Perhaps you could give an example of a site or target audience that you think indicates <16px for body copy?

Espen

Some very valid points here, but there’s a lot more to readability than just font size:

1. People need to breathe so give them the right amount of air between lines and words. The formatting in this article needs more on both, if you ask me.

2. People don’t read letters and words, they read shapes. This is why road signs, which is probably the most important texts you’ll read in your entire life, in most countries are capitalized and have been for decades. Once this shape is significantly bigger or smaller than they are used to, their ability to recognize it as a word they know is reduced. This is very individual but personally I’m feeling the font and size of it in this article is borderline of what I’m able to “read without reading”, if you know what I mean. Probably because I’m so used to reading 12-ish px sans-serif fonts on a screen.

2

76

Tesmond

I strongly disagree. You simply cannot generalise in such a manner. You should setup personas and test cases based on your target and current markets, if your set of personas does not (and will intentionally) contain anyone over the age of 28 why should your design consider that user secondary?

Luckily I read this article in an RSS feed reader where I can choose my preferred font. after reading that you had intentionally styled your article in TeX Gyre Schola at 19 pixels I thought I would look at the article in its original format.

The serif font strong colours and large font gives a childish impression and so it is much harder to take the article seriously.

Additionally perhaps your lower contrast colour (#444) and hard to read serif font required you to select greater than 16px. Try #000 and a sans-serif font and I suspect that 14-15px will appear a lot more serious and having done so in both a feed reader and this webpage I can assure you it is definitely more readable.

There are far more complex factors at work than just size and lack of structure in body copy is far more important than larger font sizes in improved readability. You are correct in identifying that font sizes are often too small for specific user segments, however, generalising to the extent that you do is a step too far. Fonts and users are veried and the appropriate design decision is a complex mix of this.

PS your main heading is highly unreadable, if you changed it from its current:

48px font size, 40px line height and centre alignment

to

14px sans-serif, 18px line height and left alignment

it would be much easier to read for the majority of users…having overlapping line heights and center alignment is very poor for readability…

D Bnonn Tennant, Information Highwayman

You should setup personas and test cases based on your target and current markets

Well, I do. Could you give me an example of a persona or test case where 12px is more readable than 16px?

The serif font strong colours and large font gives a childish impression and so it is much harder to take the article seriously.

Of course, I explicitly addressed the distinction between aesthetics and readability in this article. I also find it bizarre that you evaluate my contention not based on the facts and arguments, but on how I choose to present it. Isn’t that rather like judging a public debate based on which speaker’s voice you found sexier?

Try #000 and a sans-serif font and I suspect that 14-15px will appear a lot more serious and having done so in both a feed reader and this webpage I can assure you it is definitely more readable

Alex Poole reviews the evidence for and against sans-serif versus serif, and finds no difference. Are you saying I should simply accept your assurance based on your personal reaction? A sample size of one? What about all the research I’ve cited that contradicts you? Should I ignore it?

Now, perhaps #000 is easier to read than #444. I don’t have any definitive research on that. The general consensus which I’ve seen says that #444 is easier on the eye, since the extra contrast of #000 on a screen (which is an active, additive color mode, remember, so glare is an issue) results in fatigue.

Of course, you can debate my choice of font. I’m sure you could find a better one than TeX Gyre Schola. That’s just the font I happened to feel was right in this case, because I wanted to mimic a more classic look, rather than a modern one.

There are far more complex factors at work than just size and lack of structure in body copy is far more important than larger font sizes in improved readability.

Well certainly. You won’t get any argument from me about that—for example, setting copy in multiple columns is a pet peeve of mine, and an example of awful structure (physically speaking). And in terms of logical structure, well, that’s something I teach very vocally as well (see here, here, and even here.)

it would be much easier to read for the majority of users…having overlapping line heights and center alignment is very poor for readability…

I agree re overlapping line-heights—but please check the article in Chrome to see how it should look. I have no idea what happened to it in Firefox; you’d have to ask the Smashing Mag editors. It worked when I submitted it :)

As regards center alignment, again, I’m afraid you’re wrong. For a top-level heading, center alignment is very appropriate, for two reasons: firstly, it acts as a visual cue that “this is a headline”. That is how we’re accustomed to seeing headlines formatted in newspapers and advertisements. Secondly, provided your headline is in about the right place vertically, it means it will be directly in your user’s eyepath for the initial fixation when they arrive on the page. See http://blog.kissmetrics.com/eye-tracking/

3

78

Tesmond

“Could you give me an example of a persona or test case where 12px is more readable than 16px?”

At no point did I suggest that 12px was a good size. However, I have seen relatively small font sizes used for label headers where the value they were describing was significantly larger and the supporting label was not normally necessary to read, more a clarifier for the first time you view and item.

However, your examples of 12pt text are perhaps important. Paperback books are normally 10-11pt which as you have cited is less than 16px.

“Alex Poole reviews the evidence for and against sans-serif versus serif, and finds no difference. Are you saying I should simply accept your assurance based on your personal reaction?”

Mis-quoting me in a discussion is poor form. I said “hard to read serif font” NOT a really well designed serif font verses any old sans-serif font.

“distinction between aesthetics and readability”

Believing that these are two very distinct elements is clearly wrong. You emotional engagement effects how will you can read an article and the emotional engagement is highly influenced by the general asthetics. They are inextricably linked elements.

If Barrack Obama delivered a speak naked doing an Irish jig with his lungs full of helium do you think your engagement with the content would not be effected?

“For a top-level heading, center alignment is very appropriate…”
A center alignment is less readable when is spans multiple lines than a left aligned heading. Your main heading and sub headings both span multiple lines, reducing their readability. The added overlapping which you have advised is an editoral blunder makes the alignment even harder to understand.

“http://blog.kissmetrics.com/eye-tracking/”
Says nothing about center aligned text. The negative aspect is the extra conscious effort to find the next line start.

0

79

Steven

Before writing my response, I thought I would have a look around on the web for sites with large text size.
The one I found to be the easiest to read was apple.com, I was surprised, cos at first I didn’t agree with your article. It has now made me rethink of how I view webdesign. So thank you.

Avinash Birammbole

Nice article but being a UX Designer and after working in Print and online media, Ive few of my views based on my experience.
Choosing a font size is still lot more depends on various criteria s for example target audience (very important) is it slates/tabs/pads or monitors or mac displays. every screens has different properties and the display calibration levels.
Your point on viewing distance of 28ins if fine but its not the same case while using ipad or hand-held devices, and your comparison with printed book is not a valid comparison as both are different mediums. One is reflective and other non-reflective.
Fonts on different devices are rendered differently hence on reflective devices its suggested to use “em” and not “pts” or “px”, as they are scalable eily without distorting, sans serif font having 12 to 14 is very much readable on any screen.
Using “em” : Usually browse default is 16px, to make it easy, change your default to 10px that way while using “em” you can set 1.4em for 14px font.

3

82

D Bnonn Tennant, Information Highwayman

Niels Matthijs

Very (very) tiring article to read. Short reading lines + big font sizes don’t allow people to sit down and read the text comfortably. You know what doesn’t happen in books … scrolling and readjusting to your eyes to find the reading line again. Which I need to do like every 20 seconds when reading this article.

Doesn’t help that the site is completely in shambles on FF7 (really??)

Ich

Graham

If you have to activate ‘Readability’ on a blog, its design has failed. I find I have to use Readability on most sites because the text is too small, so I definitely sympathise.

However, I have to agree with other comments with regard to Impact in this article. Why? What’s wrong with a slightly larger, darker Georgia for headings? Do drop caps help us read body copy? I found myself reaching for the Readability button.

1

86

andy

Patrick

Stijn

Fun fact: exactly last night I changed the font-size of my body copy from 16px Georgia to 15px Helvetica. In my vue the letters are still about the same size though, as 16px Helvetica appeared a bit too bold.

Jonas

On another note, am I the only one getting some bugs with the new site design? In FF, I get Arial instead of Ostrich Sans Rounded Medium for the h2 headings (works just fine in Chrome and IE9), and even the h1 heading also looks wierd in FF.. and the header navigation is broken for me in IE9 (breaks into two lines, 1366*760px display).

Jason

Cameron Chapman

Personally, I think line height and contrast are equally important to type size when it comes to readability. My personal favorite is to start with a text height of 14px and a line height of 24px. Depending on the particular font, I might go up or down from there. But having a line height that’s roughly 1.7x the font size does way more for readability than font size alone.

Chris Raymond

Cameron: You are right on in focusing on line-height. It is too bad that Eric Meyer’s reset, which so many use slavishly, sets line-height to 1, which is so wrong, wrong, wrong for legibility and the basics of good typesetting.

-1

96

Hector Hurtado

Jaina

Whole heartedly agree with the line height being just as important as font size. I find that even with a relatively small font size, if you give the lines space to breathe, it’s so much easier to do the reading.

0

98

James

I think line height is more important. Condensed text is extremely hard to read. Many sites fail to see this. It doesn’t matter what size your font is if your line-height is too tight it will instantly become harder to read. I think even this articles font style failed there. The line-height is far too tight.

0

99

equus

Ave

Pete

I agree with Tesmond. Of course there are arguments for and against but it all depends, there’s absolutely NO one magic bullet, there are a myriad of factors to take into consideration. e.g. screen resolutions.

Andrew

Gabriel Gosselin

First, I agree that body copy on the web tends to be too small. I understand comments about scrolling, but I disagree with longer line-lengths. The book convention of 60 characters to a line to holds true on the web in terms of easy scanning.

Second, comments about setting type in ems are slightly misinformed. em is a relative unit of measure. If you don’t use a reset, and browser has a default of 16px, them 1em is 16px. However, if you set style to 12px, the em follows.

Another factor others have touched upon is line-height. Heights of 1.2–1.6em tend to yield more readability (defaults are often quite tightly set).

Steve Fenton

This article was great because it made me think about this issue. I might not be opting for 16px, but I don’t think we are really discussing a “rule” here, more a “guide”. I believe you can justify different font sizes based on your website and audience, but if you haven’t considered the font size in this way you have missed an important step in the design.

It has certainly made me think about opting for larger font sizes than I am used to using, which I will experiment with – so thank you for the article.

Matt

“If you don’t explain what people should do, or why they should do it, then they certainly won’t. And the only way to tell them is with text.”

For a medium that’s as interactive and visual as the internet, I found this to be really disheartening. There are many ways of conveying message and what people should do in ways other than just plain text, and usually in combinations of text, video, imagery, interaction, etc. To say it’s only done through text is shortchanging some of the best assets of the medium we choose to work with.

3

111

Alex

I much prefer small text to big, and as a result often find myself skipping headers (not great when you are proofreading). I find 9-10 points optimum for reading. I am very short sighted so it may be that my glasses are having an effect.

Large text is horrible for scanning, I imagine because the text takes up more space and your eyes cannot take it in all at once.

If large text is the way things are going to go, roll on 40 – only 11 years to go!

2

112

Matt Velic

Very nice article! I’ve switched to using an 18px standard lately. 16px if the font has a larger x-height. I’ve worn glasses for 10 years now, and I just don’t know why anyone would want to strain their eyes playing around with some tiny font.

bikeboy389

I agree that we should all be paying greater attention to usability/readability. And I agree that 12 pixels on a high pixel density monitor is getting to look a little small.

What I do not agree with is your facile linking of small text with loss of revenue. Lots of definitive stats presented on readability and visual acuity, zero on how readability hits conversion.

If you tell me I’m losing money with small text, I expect to hear something more than vague insinuations that people *must* be turning away in droves from my otherwise awesome site because it’s in 14px body text.

Gain points for advocating readability/accessibility. Lose points for failing to prove your central claim, which is that small fonts are a “costly mistake.”

Finally: I agree that your article was actually a little hard to read. Column too narrow for your type size.

2

115

David Philippe

Very interesting article indeed and an enjoyable read but I don’t think a 1em font size is meant to work in every case.

Bigger font size is often associated with book for small children and/or catering for the age/disability and depending on the audience that you are trying to reach this could actually be off-putting and costing you sales.

0

116

Viktors Rotanovs

Rafael Trabasso

i totally agree with the author.
i just had a client who asked to design his site with a 11px basis. i hated it, won’t even show in my portfolio.
i’m sticking with the 100e2r (100% easy to read) stuff and it’s font sizes are sort of huge and i love them.
and i’m surprised how many people here took their time just to bitch about petty stuff .

mc

I for one hate small body text and I am 19. So much so, in fact, that I used 20 px body copy for my last design. Maybe a little excessive but I felt it worked in the context I used it. Another point to be made is increased resolution; the fact that many smaller monitors are rocking 1900 x 1200 resolutions that make everything appears significantly smaller.

1

121

Tibi Neagu

The trick you used at the end is pretty clever, but completely irrelevant. After reading an 18px font for 3-5 minutes, of course 12px will seem tiny and hard to read. But using 16px fonts as a general rule is simply not feasible for every scenario – screen real estate is limited, and when you need to get your user’s attention with the content ‘above the fold’, you can’t afford to use 16px fonts. Even Amazon (with 100s of millions of users) use 12px, and 16px only for headings.
Perhaps in a blog, with lots of body text, larger text might make the users more relaxed while reading the article – in that case, I would agree with you.

1

122

D Bnonn Tennant, Information Highwayman

Tibi, I’ve found very little evidence that the fold has a significant affect on conversion rates. You should definitely place more valuable content above the fold—but provided your headline and lede are there (and they interest users sufficiently), then users will scroll very happily.

Liz

Hm. I actually found this article very difficult to read and had to zoom out to read comfortably. These font sizes are obnoxiously big to me, and I don’t think it’s just what I’m used to — the footer text was a welcome relief to my eyes. Maybe it’s because I’m young (mid-twenties) or maybe I’m just a special case.

I think choice of type size is largely dependent on audience. Next time I design a site aimed at middle-aged customers, I will remember this article. If I’m designing for people in my own age group, however, I’ll stick to 13 – 14 pt.

0

124

tl

I’d like to mention. Besides font-size, line-length is important as well – if a line is to long readers will have a hard time to focus if is to short the eye hat to travel to much. A good length is something between 50 and 70 characters per line (about 12 words).

0

125

D Bnonn Tennant, Information Highwayman

Indeed. I’d like to emphasize this, since a few people have said the narrow measure of this article made it hard for them to read. I set the measure at around 60 characters per line (depending on other factors). To the best of my knowledge, that is a nearly ideal measure for readability, with decades of research to corroborate it.

-1

126

adam

Markus

Plz read Olivers article again before quoting stuff he didnt wrote and didnt mean.

Next thing is, you cannot say 11-15px costs your client money. It may be true in some cases, and others it dont. It just depends and its the designers job is to know that. You obviously dont know it and repeat others ppl opinions you didnt unterstand.

Phil Middlemass

With the variation in screen resolutions these day I find it hard to that this kind of research on board.

Lets look at it like this:

I have a laptop at home, 15.6″ display running at 1920×1080 = a pixel density of 141ppi

My wife has a laptop, again 15.6″ display but at 1366×768 = pixel density of 100ppi

So assuming the default dpi is set in the OS on both machines, my wife’s laptop will display browser text 40% larger than on my own laptop simply down to the resolution.

Resolution = massive factor in readability for text on screen

These kinds of articles can only be taken as a guidance, there are too many factors to consider to come to a single conclusion that can apply to all

16px on my laptop looks OK, bigger than I’m used to, but on my wife’s machine is actually difficult to read, it is all subjective, everyone has a different comfortable reading size because of their respective screen sizes and resolution.

Pattie

I agree (with a caveat). I believe designers have missed the mark on designing for readability / usability. It is hard for them to break out of the “small is tasteful” mindset. Now for the caveat – at my resolution 16 px look too big . . . I would set the minimum at 14px.

-1

132

Manuel Ruiz

Kim

I understand the point, but this article is absolutely unreadable in the large font…and I’m over 40. The bright red makes it more painful, and if the point was readability, it’s lost in this presentation. I’m all for usability and accessibility, but this was a terrible way to present the argument.

D Bnonn Tennant, Information Highwayman

Stephen, if only operating systems correctly identified monitor ppi and adjusted text display appropriately, you’d be right. Then we could set body copy at 12pt and rest assured that it would display the same size for people on iPhones and people on 30″ displays.

Unfortunately we don’t live in that world, so we have to make do with rough-and-dirty guidelines instead.

James Koster

As has been pointed out “16px” may be perfect for some typefaces but for many it’s way too small, or too large.

The message in this post remains true but there’s more to it. Also consider the measure (IE how many words per line. “16px” is not always appropriate in, for example, a sidebar). Don’t forget the leading and most importantly the target audience.

For me, there’s no excuse not to be setting our type in ems these days.

0

141

D Bnonn Tennant, Information Highwayman

Good comment, thanks James. A lot of people are taking my article as an ultimatum, which is understandable, but my concern is to get them to justify their font size decisions with facts and logic, rather than just base them on their gut.

I still use px for setting font sizes because I find it a real pain in the ass to use ems with a decent vertical grid.

Scott

Doesn’t your screen/print comparison imply we should be using *point* sizes for text, not pixels? On smaller and larger screens with different DPI pixel sizes will all be different, whereas point sizes will be the same (e.g. 12/72 of an inch).

0

144

D Bnonn Tennant, Information Highwayman

Hey Scott, that’s definitely a point worth considering. Especially as screen resolutions become wildly more disparate, I think points do make sense. Traditionally, designers (including myself) have resisted them because they’re not really appropriate to the pixel-based medium of the web. I wonder if that needs to be re-evaluated.

0

145

D Bnonn Tennant, Information Highwayman

Hi again Scott, further research shows that while this should be true, unfortunately it ain’t.

12pt on a 15″ screen is significantly smaller than 12pt on a 23″ screen.

The reason: operating systems don’t correctly identify the ppi of the displays they’re attached to. In fact, from what I’ve seen, pretty much every web-capable device created since 1995 is “hard coded” at 96 ppi—actual display resolution and size be damned.

0

146

steven

Bronwyn

I habitually enlarge just about everything I read online. I’m still young, but 16px is on the small end of my “comfortable reading size,” since I see no point in ruining my eyes for something I can change quickly.

I’ve been using larger body text in my designs from the start, because if I don’t want to squint, why would anyone else?

0

148

DCuffman

blahedo

It’s particularly charming that he writes an entire post about user-oriented design and making sure your users can see and read your content, on a page that has a huge blank bar on the left that pushes the content partially outside my window AND THEN also disables my horizontal scrollbar. I suppose this is technically Smashing’s fault, of course.

2

150

Mary

Thank you for the article, and the research. As both a graphic designer, artist, and intellectual I often skip over completely a web site if it has illegible type, regardless of the reason, if I can’t read it you have lost me. And that for me is the bottom line. Assuming that a web site can afford to loose customers (that is their primary purpose, information and sales of some sort) is simply an indication of ignorance. As a fifty something, interested in all manner of information, I am a little baffled by the comments that it is alright to exclude me and my reading needs because I don’t fall into your supposed demographic. I might be buying for my grandchildren, what then?

-1

151

David

I’m 56, keep my monitors at 32″ from my eyes, need significant correction from my glasses, have mild cataracts, and still prefer 12 point on screen. No neck craning here. But if your vision is typical, then I can see your point.

Gisella

Unfortunately, in my experience so far, having worked with big companies (and especially the ones involved in kids entertainment, which usually like things being BIG), clients want to fit so much content ‘above the fold’ that using a 16pt font would be impossible. Let’s not forget MPUs and various ads, which need to be in a specific position…

0

158

Ric

Harish

I am a web designer and my eyes are not so great. Honestly I use a 12pixel font size for almost every single website I make.
But while reading your blog post, My eyes were more at ease. As soon as I read the author details, I felt a strain in my eyes.

Most of my clients would not like me to use a large font, but am sure going to use them on my own sites from now on.

Holly

I’m a very long-sighted web designer and had to lean backwards from the screen in order to read the majority of this article, so from a personal stance, I disagree. However, my own website alternates between 12px and 14px font sizes, which sits nicely in the middle of the spectrum.
I do agree that large fonts are marginally better than the ridiculous 8 and 10px font sizes that became fashionable in the recent years, it’s a move in the right direction.

Patrick Samphire

One of the things that has come up several times in the comments but which a lot of people aren’t really taking on board is that, these days, there is an awful lot more variation in displays. Most of those older websites that use 10 – 11px font size were designed when most of us were using low-resolution displays. 10 px looked pretty big on standard monitors less than 10 years ago. Hell, probably 5 years ago. Now, of course, on tablets or phones or monitors with high pixel density, they look terrible.

What this variation means, of course, is that you either have to know that the vast majority of your visitors have a limited set of display devices, or you need to use some clever media queries to adapt font sizes (e.g., increase the font size for common tablet or phone resolutions, or for very big screens). It’s going to become increasingly difficult to design something that looks great on my grandma’s old monitor and on a retina display if you choose a single design and font size for all of them.

-1

166

nhavar

I’m an advocate for larger font sizes as well as more white space. I have seen some studies that suggest using some variability to impact readability, cognition and retention. For instance at times it may be helpful to have a small font in order to force the user to focus on something that requires understanding or retention. The difference between the small font size and the surrounding font size draws attention and the small font size makes the user focus harder and take more time to read/understand the material.

I think one unintended side effect of large font size is also a reduction in usable space. This can constrain content authors to be more concise. Constraint breeds creativity.

I have to agree with some of the other comments here about the choice of style detracting from the overall message of the article. The red, drop caps, serif font, shadow, etc., shock the user more so than the size of the text. I would have left the default styling in place and only adjusted the font size itself. This would have given the reader an easier model for comparison against other similar pages.

Alex Poole has a good post about legibility of serif versus sans serif fonts @ alexpoole.info/which-are-more-legible-serif-or-sans-serif-typefaces.

Viget is doing some studies on line length and legibility @ readability.viget.com

And I really like Joe Clarks commentary on some of the studies regarding typography, line length and readability @ blog.fawny.org/2005/09/21/measures/

Jason

DJ

In actuality – the front (home) page of especially a new site is designed to draw readers in to reading the full article. That’s why headlines and first paragraphs are nearly always larger in size. Our front pages should be the MOST easily scanable of anything.

0

170

Patrick Samphire

The New York Times doesn’t match those criteria, though. It’s not a new site for the vast majority of its readers. They know what it is, and like, say, the BBC news website, they want to scan for interesting content.

0

171

Flux Appeal

I agree with using somewhat larger fonts + I focus on varying the sizing between headers, photos and other design elements to keep the eyes interested. I don’t think anybody really wants to read copious amounts of tiny copy, I know I don’t. Looking at the pages in different resolutions and zoom modes when designing helps me arrive at the best size to use for a particular typeface. Admittedly, this font is a bit large, but I suppose maybe the author is merely pushing his point…which I believe is valid.

0

172

Michelle

Completely agree. I have been inching up the font size on sites I design and both clients and visitors are typically very appreciative. And though my eyesight is just fine (even though I’m 40, ha) I still find there are websites with excellent content I avoid reading just because the type is so small. And I’m a web developer! I know full well I could ctrl-+ the type up to legibility but it pisses me off that I have to, so I avoid the sites altogether.

Edward

Ben

It’s so true that most users do not know how to increase the font size or zoom a web page. Make the site enjoyable from the start and you won’t need to rely on browser features you hope your audience is aware of. I’ve noticed that as I get older my designs and layouts are changing. More negative white space, narrow columns for body copy, brighter graphics, and yes larger font sizes. When I first started designing, small font sizes were the hotness, now those small font sizes can create a hot mess…

Over the years I’ve also become more focused on the user experience and not just the design. I often say “You can design the most beautiful thing in the world, but if no one is there to experience it, who cares?”. So I totally agree with the statement “It is about what users want and what will best achieve our client’s goals.”

Using larger font sizes will place more emphasis on typography and layout which should make for some interesting new trends (I hope!). Great article!

0

176

fearless

DJ

Excellent points. Equally as stupid as too small of font size is: putting the text in a narrow ribbon down the middle of a full sized screen. On the screen I’m viewing this on I have 2/3rd’s of it white space! (60%). What a needless waste! To me, that’s the REAL next “bleeding-edge” that web developers MUST be addressing. Lots more wasted space there than in type size – although even I, more and more, need to use the “zoom” feature the past 12 months; and it’s especially true on development sites.

0

178

Chris

Great post, good points, but why does this post look so different? Isn’t familiarity a big part of legibility, esp on the web? By changing the format you’ve asked me to relearn something. Also, sup with the line-heights? A little shallow, no?

Tim

yiannis

Looks like you hit a nerve on designers! The “funny” looking titles were not necessary nice but it was nice having something visually different for once..
and yes copy should be very readable.. clients actually ask for it!

John Surdakowski

We should NOT have a set font size to use. Different projects call for different font sizes. Maybe on a blog, 16px will always work. But certain web sites may require smaller fonts. But I do agree with you that 16px are easier to read. And I will try to keep that into consideration moving forward.

Anthony McLin

“#5) 16-pixel text on a screen is about the same size as text printed in a book or magazine;”

Wrong, wrong, wrong!!! Screen text size compared to print has absolutely nothing to do with the specified font-size in pixels, and everything to do with the size and resolution of your monitor. That 16px is going to compare very differently to the book if I hold it up next to an iPhone, a netbook, or my HDTV.

3

187

Justin Heideman

I’m no fan of small fonts, but this article is merely the author’s opinion that less than 16px is costing you money. There is no data to back this up. There is some ancillary data, suggesting that users don’t like small fonts, but that doesn’t correlate into lost revenue. Unless the author can cite a specific A/B test that shows decreased revenue, this article is not very accurate.

Again, I agree that small fonts are often bad. I just don’t think it’s as cut and dry as the author states. There’s more to readability than font-size. One must consider the face, line spacing, use of ligatures, etc. Size is merely one tool in the typographer’s toolbox.

7

188

D Bnonn Tennant, Information Highwayman

Howdy Justin, that’s a fair comment as far as it goes. Unfortunately, I don’t know of any A/B studies which have tested for font size specifically, and I haven’t had the opportunity to run any of my own.

Espionoza

font-size should be based on screen-resolution and devices (such as laptops vs. mobiles). I can agree that a larger font is better to read, another thing they could do for instance is adjusting the scrollbar/mousewheel speed based upon the line-height that was declared in the css. So overall a nice statement that lacks at a few points….next topic should be “clean css w3c-coding” and hopefully this page wouldn’t show 557 css errors. ;-P

And why if 16px for body text should be the golden standard is SM’s navigation only a mere “horrible” 13px?

Celeste

Some users can zoom. Some cannot. But none of them can change a low-contrast font to black. (Or is there a way I don’t know about?) I find the low-contrast trend to be most annoying of all. Want something different? Fine. But use a color we can read.

0

196

Patrick Samphire

Well, you can change it if you really want. You can have a user stylesheet to override the page styles. You can even edit the css in something like FireBug. But generally you are right. Changing text color is a pain, and no one will do it.

0

197

D Bnonn Tennant, Information Highwayman

Hey Celeste, are you referring to the font color I used here? I had thought #444 was generally accepted as the happy medium between too much contrast for long pieces (#000; hard on the eyes), and too little.

Tom

I have to say I find myself agreeing with you. If you’d asked me before reading this, what is the minimum font size you should use, I would have said 14px – but my reasoning for that would be identical to what you’ve written.

I am frequently coming up against people who insist they don’t want the text on their site any larger than 12px as it means most people have to scroll. I’ve never met anyone with an aversion to scrolling.

Great article, thanks.

0

200

Sean

I still completely disagree with this whole article. I’m 41 years old and yes I do wear contacts but I have absolutely no problem reading font on a computer monitor that is set at 12 pixels. None. I had no problem reading the footer text way up above. I did not get closer to the screen nor squint nor anything. It was just nice and easy reading.

I also disagree because bigger fonts means you take up more room on the screen. Think about that for a second. No you do not have to pay for using more room like in the print world but it does mean something else. The more room you take up in a web page, the more the user will have to scroll to continue reading. I don’t know about anybody else but I was taught that users don’t like to scroll either. I was taught that the less you make a user scroll to read your website the better. I was taught that if users have to scroll a lot for your website that also can make them simply leave your website for a competitors that doesn’t make them scroll (or at least scroll so much).

I’ve been a web developer for 6 years and in that time I have not once heard a user complain because a websites font that was set at 12 pixels is too small to read. Heck, even my mother who is 64 years old and wears some thick glasses doesn’t complain about the small text on websites and she also uses a 30 inch screen to surf the web.

Then you’ve also got the problem of mobile devices with much much smaller screen real estate. If you design your website with a minimum of 16 pixel font and you did responsive web design so that your website can cater to the smaller screens on mobile devices, then with the bigger font you are forcing your sites users to scroll and scroll and scroll. I know that if I was a user and I had a mobile device and I was trying to read an article or do something on a website that had their font set to 16 pixels or larger and I was forced to continue scrolling, I would definitely leave that site and find some other site.

D Bnonn Tennant, Information Highwayman

D Bnonn Tennant, Information Highwayman

Clint Tabone

I agree 100% with your points. As you also mentioned, it depends on what font you’re using since some fonts have higher x-heights.

I believe that most importantly it depends on the content you’re reading. Reading this relatively long post, the font size made me sit back and read comfortably. I tend to use Readability on other sites as this gets rid of all the extra stuff, focuses on typography and gives you the option to resize the font to your own taste which I’ve set the default to something around the same size of this article.

However having short paragraphs, on say a homepage is a different story. Readers don’t need to focus on the content but rather skim through it and continue to navigate through the site or reach a call to action. Using a smaller font makes more room for the other important elements on the page, which have higher priority and function.

-1

212

Stephanie

“What ‘looks good’ to us is largely the result of what we’ve seen other designers doing and what we’ve come to expect.”

…and yet it’s important that our websites “look good” to customers as well. What’s just as likely to cause a user to hit the “back” button is a site that looks novice, which large font sizes tend to do. It’s not just other designers who are used to things the way they are.

3

213

Mark

Smashing Magazine has text of 1em… which equals 12px for me. They use 0.75em for the body but the posts are 1em.

Good article, but whatever happened to the whole “design in em” movement? I like to use ems so the user can determine this 12px or 16px argument. If they don’t know how to change the size, leave at 1em or 100% because that’s what they’re used to (by default).

1

214

Evan

Mike McKee

Hell, why stop there? Let’s catch all the people still with 640×480 screens and make all our sites fit that. Or, for that matter, let’s make all our pages greyscale so that we can pick up all the color blind users too. Geesh.

Folks, eventually you have to just cut the corner. The majority of websites out there are 12 and 13px. I’ve done websites for years and my clients and myself have never reported a single incident of users saying they can’t read the sites. Those who have vision problems learn the keyboard shortcuts and get used to this. Now, for a blog article or sales copy, do I think it would benefit if the base font was 14px or higher? Sure, I do. You might get more conversions. But only split-testing can tell you for sure.

D Bnonn Tennant, Information Highwayman

I’ve done websites for years and my clients and myself have never reported a single incident of users saying they can’t read the sites.

Do you have reason to expect that these users would let you know?

All the research I’ve seen shows that if people have trouble reading a site, their immediate response is to leave. They feel no loyalty whatsoever, and have no concern for correcting the problem. They’ll just go to another site that suits them better.

Seems to me you’re trying to create an argument from silence, based on anecdotal evidence, rather than listening to positive arguments based on scientific studies.

5

217

Antonin

Ever since reading up on responsive design, typography, and using readability (<- not advertising, I don't work with them), I started using a standard 1em for body text and .75em for footer/copyright. 1em = about 16px so I think it's a good standard size to go with.

When using readability, I usually have it on 17 or 19px. And because I read a lot on the internet, it's really hard to read <16px font.

0

218

Tom Hermans

Very interesting read. I too find many sites, blogs etc hard to read because of font, font contrast vs bg, and size. Especially with bigger screens than 10yrs ago, space is not utilized very good. I too use 12px fonts a lot (set in ems), but you have me convinced..

I’ve also taken a look at the wordpress’ latest default theme (twentyeleven), they use 15 for body copy, big headers and 12px for meta data.. It looks really nice and it’s very readable..

Good article.

ps: to the dimwits in the comments, confusing this blogpost with “an experiment in creating a masterpiece of layout art”, read the damn thing. It’s about content and readability… not “style”

-1

219

Tim

What? No, this is not what you should be teaching people. The standard size for font on a browser is 12pt, not 16px. Points are measured in physical units, which means that as pixel density increases, the displayed size will be the same.

Pixel density used to be lower, which is why everyone uses 12px as their font size. Because when monitors displayed around 72dpi, 12pt, was 12px. Now monitors display around 96dpi, and guess what, 12px * (96/72) = 12px * (4/3) = 16px. Ignorant web designers who did not take the time to understand the difference between points and pixels assumed they were the same because coincidentally, at 72dpi they are the same.

What you are encouraging people to do is not a solution. It’s the same problem that caused this, which is using a digital unit of measurement instead of a physical one. Once monitors inevitably improve and pixel density increases this problem will be the same again. Also, 16px fonts will look huge on old monitors. 12pt fonts will look the right size forever.

P.S. Since computer dpi standards aren’t concretely set, the actual physical sizes will vary in practice. 72dpi, and 96dpi are just average approximations that are convenient to use for monitors in those ranges, but the principle still holds, even though it’s not exact.

Blake Taylor

That being said. Why would anybody want to say 16px when they can say 12pt. That’s a best practice for print too. It’s so elegant it hurts.

Nobody should every use 12px, that is just too small as the author points out. It’s very clear why this is so, when it’s realize 12px equals 9pt. We all know 9pt is to small for body copy in print, and now we know it’s too small for body copy on the web as well.

D Bnonn Tennant, Information Highwayman

Blake, if I’m understanding the article you linked, 1px in CSS does not equal one actual pixel on a screen.

But if you’ve done much tweaking with CSS, you’ll know this is simply false.

1px in CSS is indeed equivalent to precisely 1 pixel on a screen. It’s a different amount of space on my 23″ screen as on my 15″ screen (both at 1920×1080).

If it were true that a pixel was always 1/96 of an inch, or that 12pt always = 16px, then 16px on my laptop would appear as the same size at 16px on my desktop, since points are absolute units. 12 point is always 1/6 of an inch. But that’s not how it works on a computer, as you can see in the photos I took for this article: 16px on my laptop is significantly smaller than 16px on my desktop.

Drew Gourley

Ha! I was just making a revision to my personal website upping the font size from 12px to 14px for body copy — as well as a general type size increase overall. I guess I’ll meet you half way, eh!? — Total agree!

0

226

I

Well, there is a reason that large print books have their own section in the library separate from other books; why there are still stairs in the world and not ramps everywhere; why the web is mostly dark text on white rather than yellow on navy blue (which studies say is the easiest to to read for vision impaired). It’s not that interesting to the general public. As a designer you need to have the ability to use contrast of size. All big type just looks horsy. You see lots of contrast of size on this page, to prove your example go ahead and make all the type a minimum of 16 pixels on this page! I just don’t agree with your provocative generalizations. I’m almost 40 now and I don’t have trouble reading the majority of text on the screen that I read. Sigh…this just feels like an inane thing to argue.

3

227

SzSza

Thank you for this amazing article! First I thought the font was a little too big, but the white space around it was very good so it was easy to accommodate with it from the beginning. After just a little it felt natural and COMFORTABLE reading the “not-too-big” font… And I just have to say that you absolutely made your point with the last part…

Very nice and useful read!

-1

228

Steve

Norm Dwyer

wow. That’s like saying 34″ is a great size for the waist band on a pair of pants. Really? what about the inseam? and skinny people. and thick people.
My point being, to focus on pixel height alone isn’t an answer. Its not even the right question. You need to address everything as a whole. Character size, line height, letter spacing, line length… and what about the font itself? Whether it be a serif, sans serif, cursive, decorative or display font. I know you are talking about body copy hear, and not headlines, i’m just trying to drive home the point. Many people get too myopic when talking about type. Fixating on just the size of the characters when the whole gamut of type control should be addressed.

3

230

Steven

“The users who will most need to adjust their settings usually don’t know how.”

There certainly will be users who don’t know how to adjust font settings, but do these people ignore the BBC or Amazon websites because the default font is not to their liking!? Is a font under 16px costing these websites?

And how many people turn on their internet device and consider it a mistake to see web text equal to (but less than) 16px and think … “Christ, I need to get out of here because some web designers want 16px (or higher) to be the new default standard.”

As others have said, there is no correct default anything for websites. However, if we begin with the default system font size for a web device, we can’t go far wrong. Forcing a size would not be right though and goes against all that everyone is doing to help give users who truely need larger fonts the freedom to do so … freedom is key and browser vendors have great defaults that frankly get screwed by some of the lazy-ass web development frameworks out there.

If some people want to undo all the hard work browser vendors have done for text defaults, then so be it. But to create something like a framework or methodology such as a fixed font size takes us back to before browser vendors had anything near a close standard between them like we do now. And that doesn’t help anyone that such measures are created to help in the first place, which makes no sense.

All devices have a relative (to device) default and we should start with that like a few others have said. For good reason and with the ever-growing resolution of devices we cannot and should not assume a singular font size, for similar reasons to what you said in fact.

Zeke

While i agree with the premise in theory, let us not fprget the impact smartphones are having on web browsing. If there is an issue with text size a quick finger scissor zoom can work wonders.

I’m more concerned about poor layout rendering non-mobile optimised sites impossible to navigate. Case in point, because this site loads all comments at once typing in this one had severe amounts of lag.

oquedo

andy

view this page at 1024×768 and you’ll probably think you’re looking at a site for kids.

Font size is dependent on screen resolution, especially if you use px declarations.

You also make quite a few assumptions on users habits, I don’t believe that most people will simply click back or go somewhere else if the font size is a little small, especially if, as you say, most sites are like this. It’s the norm, so they won’t think anything of it. It’s also easy to make something look small when compared to something big. As a 6’2″ male, I still find myself feeling short when I stand next to some taller than me, yet I am above the average height.

While I understand your reasoning and agree with it on some levels, I think you miss some key points about websites, like the fact that not everyone’s browser size and screen resolution will be the same, so something that works for one setup will not on another, where large fonts are concerned, I think that it would become too large at lower screen resolutions requiring people to scroll much more or reduce the font size, which is something you posed yourself as a failing of small font sizes.

4

234

fjpoblam

Hmmm… You *could* be right. I’m willing to take it for a test drive. I noticed, sitting here in my Morris chair, laptop in hand (or on lap), I sat with better posture reading your large text. I noticed that it was easy and quick to read. I noticed that, with some of the long blocks of text in some of the comments, I was ready to think: tl;dr

You’ve left the input box for comments in large print. Now my comment will be converted to tiny print and sink into oblivion, eh?

Scott

The article, and many of the comments, seem focused on web page like blog posts and other text-heavy pages. For that type of “design”, I agree that a large font size is appropriate. But most of the web pages I design for my clients have images, navigation, stylistic flourishes, forms, functional bits, and other things that, in total, almost out-weigh the amount of pure text. If I were to use 16px fonts for all text on the page, not only would the design look terrible, but the poor user would have to do much more scrolling to get to important parts of content.

The point of the article seems akin to saying “Print-based periodicals should always use black ink”. That might be fine if you’re a daily newspaper concerned with costs, speed of printing, and the “disposability” of your product. But I’d bet a monthly magazine might think the “always use black ink” guideline to be quite limiting.

Scott

When I view this page in Firefox v7.0.1 and use the “WhatFont” tool (see http://chengyinliu.com/whatfont.html), it shows the headlines being 16px and the body copy 13px. If the body copy were increased to 16px, as the article suggests, the headlines would have to go to at least 18px to be distinctive. I think those increases, while making the page readable from a further distance from the screen, would also force more scrolling.

Another example most people would be familiar with is Facebook. I think their pages would look terrible (and the design would break) if the minimum font size was 16px.

I know there’s a trend towards “minimal” web design, with very little text and “airy”, whitespace-laden layout. 16px (and larger) font sizes can work very nicely in those designs. But when we need to present more than a small amount of text, along with navigation and other page elements, I just think a 16px size is too large for some things.

Andreas

Great article – I’ven been wondering a long time now when the trend for small fonts finally is being discussed.
The longer the text the harder it is to read in 12px. There is great content out there but it is just too hard to read. The trend for microblogs and Facebook like communication makes it possible to use small fonts but when confronted with longer texts larger fonts are needed.
This article uses a 3px larger font then the 16px under discussion so people: please stop complaining about the text being too large – he is trying to make a point here.

-2

245

Sean

I run 1920×1200 on a 14.1″ Dell D830 laptop and triple 1920×1200 on 24″ LCDs for my desktop. I almost always enlarge font on sites, and I would go even further and say 18pt font MINIMUM, with 20-24 being more sensible. If you have a lot to say on your site, start a damn blog. If you’re trying to sell stuff, be concise and elegant.

thedannywahl

While I think that it might be another good “you should…” design principle, the fact is that you just can’t do everything.

If you move the body to 16px, then hierarchy speaking your h2 or h1 might be in the 40px range. Combine that with the fact that many still advocate that you “should” use a 960 grid for people with low resolution screens and suddenly you’re in a layout nightmare. You have a top-level menu with size 32-40px font and only 960 pixels to spread it across? Yikes!

I’ll just stick to the nice floating javascript withe +/- buttons.

0

248

D Bnonn Tennant, Information Highwayman

Er, this might be stating the obvious, but you don’t actually need to use significantly larger font sizes for headings. In fact, differentiating headings based on font size is a poor practice, since readers can’t distinguish between different heading levels without direct comparison. So if you have an h3 in the middle of one section of copy, and an h2 further down, without them both being visible at once, a reader typically can’t tell the difference between them based on size alone.

toufik

Tiago Marques

And one of the BIG mistakes nowadays is using custom fonts that don’t have decent hinting, resulting in the need to increase the font-size to disproportionate sizes to assure readability. Seriously, a properly hinted font works ok from 12px to 14px. I personally like 13px on a 1440×900 19″ screen and on 1280×800 12″ laptop screens.

Of course that given that pixel density is increasing quite a bit lately and OSs may not compensate for that well enough when displaying text. You have a good point, though I don’t agree with 16px, 14px is more than enough and pushing it towards big already. Again, use a properly hinted font which doesn’t require such huge font sizes for good readability and look at different OSs and hardware configurations.

0

255

Kathryn

I found your excellent article while researching for setting up my first website for a retired readership. Perfect advice for a newbie. Thanks so much!

**I** will leave a website that has too-small print; so, yes, it’s costing them. If I don’t read, I won’t stay around to buy or become loyal, and I won’t recommend them; so it might be costing them twice… at least.

I was thrilled to learn how to change the font size; so helpful for emergencies; but I really don’t want “one more thing to do”. It slows me down.

I’ve notice that since about 2009, I get physically nauseous when reading Times New Roman (serif) font, in any size, in print or on screen. It feels “old school”, staid, and rigid; that doesn’t resonate with me, anymore, and I leave.

When I have REALLY, REALLY wanted to read dinky-print or Times New Roman content, I have copied and pasted whole articles to an E-mail or Word document so I could enlarge the font size or change the font. No fun.

-1

256

Ali Reid

While usability studies do show that 16px is a better size for reading on screens, the logic in this article is very poor, and does not consider all sorts of other things. For one, line length should be 12-15 words generally. in this article it is far shorter. that is why it is hard to read. It also ignores scrolling as a potential usability issue. As a web designer I identify other issues too. Websites are generally built at 960px wide or less. With a large point size and 12-15 point size, the width of this column is too large. Its impossible to have a proper 2 column design. images at the full column width end up too tall, requiring even more scrolling. Just my 2c

1

257

iynque

I think the standard resolution for computer displays is considered to be 72-74 pixels per inch. My MacBook Pro is 133 ppi. My iPhone’s “retina” display is over 300 ppi.

If you set the text based in pixels, it will vary greatly. If you could set it based on points or even inches/centimeters and know that it would be rendered with the display ppi taken into consideration so that the physical size is consistent, you would be much better off.

Not sure if that’s even possible with current implementations.

Anyway, all this talk of setting type by the number of pixels is kind of silly since the size and shape of pixels vary so greatly. We need a system that renders relatively before we can go around prescribing pixel sizes. Until then, some assumptions must be made about the content not only being capable of being dynamically altered, but also that the users will have some idea how to do so.

PS—I read this re-formatted by Instapaper on my iPhone because everything was in 2 point type. …which was readable as long as the phone was three inches from my face :p

1

258

Guilherme Almeida

I believe there is a crucial flaw on this article. Seems like if you set font size on 16px all readbility issues will be solved. It is so untrue. There are so many other things to take into consideration about readability other than font size. As mentioned in the article, x-height matters. You can pick a font that at 16px high looks like 12px high, and another can be 14px high and look like 16px. Line height is another factor. This article’s subheading is so messy with the line height seemingly of less than 1.0 em, one line merging with each other, it makes harder to read, even if it has 36px. Line lenght too. According to The Elements of Typographic Style, a satisfactory line lenght is 45 to 75 characters wide. Yet it’s so common to find lines with more than 150 characters (see Slashdot). Contrast also matters, colors and font weight wise. It is much more complex than just setting a certain font size.

1

259

tristan

I would rather read smaller text with a larger line height than larger text with a tiny line height. As they say “It’s not the size that counts”. Yes body text on the web isn’t designed as well as it could be but there are technological restrictions. It’s up to the designer to choose a suitable font, colour and line height, AS WELL as size to make the text easy to read for their target demographic.
Also I find it hard to believe a user would leave the site based purely on a couple of pixels in font height. I would like to see the study that produced the results of ‘Fact: Most Web Users Hate The “Normal” Font Size’.

2

260

bek

Craig

I think you are right…
Just because we can fit 30 to 40 words to a line doesn’t mean we should.
I do believe that we should consider the old print setting rules of font and line height etc. as well.
I think I will push for bigger font sizes from clients

Carson Weber

After reading this article, I changed the base font size for my web development site at http://www.sacwebdev.com to 1em, and I’m quite pleased with the increased readability. Another tool in my arsenal to help my clients achieve their goals! Thanks Bnonn… this has been very, very helpful.

Lucas Nolte

Alex Patin

Not sure if trolling or just stupid. (Not seriously calling you stupid, just a meme)

Web design is much more of an art than craft. One must understand the most basic principles of art such as line, shape, color, texture, and principles of design like balance, dominace, rhythm, etc.

Web design requires skills that one can’t just pick up and start immediately. It takes time and an understanding of these principles in order to become a professional. My girlfriend does crafts; she knits, sews, and crochets. I design websites – still not a craft, and not necessarily art, but much more related to it than crafts are.

0

266

Alex Patin

I know there are already a billion comments here, but I feel I must add something myself.

A design instructor of mine told me that 12pt was slightly too big for body text (in print of course), and that he prefers to use 10pt or 11pt. That matches up roughly to 14px or 15px which I find to be just the perfect size for readability aesthetics.

Just my two cents.

-1

267

Chelsea

I’m extremely annoyed at how much scrolling I needed to do to read this article…

It may be easier when reading large amounts of copy once the user is interested in a story.. but could you image trying to navigate around a home page that needs to capture large amounts of content such as nhl.com, you’d be lost amidst all the large text.

Only way I could see it work is giving users the option to make the text larger… at the same time, I don’t think it’s necessary as resolution options do exist on computers. People just need to set their resolution to what suits their needs.

-1

268

Sara Frances

Way cool! I’m totally pleased to find someone of my opinion about type size. I just finished 2 new websites with themes from Themeforest and moved the text pt size up to 16, for readability. I didn’t know the scientific reasons, just the aesthetic and perception that I “felt” were right. Thanks !

Dinesh

ayantheworld

Patricia Fieldwalker

Took far too long to read and I am well over your 40+ group…felt like I was back reading night night stories to my preschoolers…must be a happy medium and this errs on the side of “too much of a good thing”.

1

274

Pop Bogdan

Funny, I think this is the first article I’ve read in a good couple of months. And I mean read, not scan. I’m not sure if it’s the font or the topic that kept me going until the end, but one thing’s for sure: for the next couple of websites I will make 3 versions (like media queries) for text, allow users to switch between them (with some clear call to action buttons) and see which resolutions is used the most.

I am also thinking about randomly selecting one of the three (small – 12, normal – 16, large – 20) and see which one users drop most and which one users tend to go to the most.

-1

275

Eelco Deuling

I have not read all the comments so maybe someone already pointed at this… I am experimenting with some flexible layouts and it occurred to me it is strange that you can make flexible images and boxes, but not flexible text sizes.
Because it all depends on screen size of course. The 14px text right above this text box I am typing this is perfect readable on my home 20″ iMac. My eyes are 90 cm (35,4″) from the screen. And yes: I am ‘old’ (45), short-sighted and tired (at the moment).

Scott Richardson

Sorry, but this article doesn’t take into account PPI of displays – a variable which differs a fair bit from computer to computer. My 13″ Macbook Air is far denser than my 24″ Apple Cinema Display. 16px on my ACD looks big, 16px on my MBA looks quite small.

So sorry, it’s all relative. Sure 16px is bigger than 12px on ALL displays, but saying 16px is the same size as printed text is pretty vague when a screen’s PPI can vary by upwards of 40 PPI or 30 – 40%.

2

279

Ed Brandt

I’m over the age of 40, wear glasses to correct farsightedness and astigmatism. I feel that there are limits on both ends. I agree with some that the body copy of this sight is too large. Even at the 24 inch distance I sit there is too much back and forth with the eye’s. And, yes the footer copy is too small, I had to lean in to read.

But, has anyone noticed the other font size on this page? The comment thread is actually very comfortable for me to read which seems to be the average font size I see on the web. It’s the one I like to design with…

1

280

Owen L.

This was a good read, I think what it lacked was context though. The argument made at the start is that in order to support the business needs of your clients you HAVE TO INCREASE SIZE OF TEXT. It is too simplistic. It ignores user personas, focuses too heavily on age demographics and accessibility, and doesn’t speak to the fundamental value of scanning. The average business site on the web sells MULTIPLE PRODUCTS. If you’re writing a blog post maybe this makes sense, but if you’re arguing for improving SALES then how easily the page is read is less important than how easily it is scanned. Only a certain user persona will actually care to read detail, if you’re trying to generate revenue you need to appeal to the masses more often than not.

This doesn’t invalidate this post, it’s definitely a good thing to consider and would certainly apply wholesale once in a while – but it falls short by making too bold a business statement upfront.

5

281

Mike Rudolph

In some cases I agree with this article, the studies were interesting, and the fact that you pointed out some of the top theme sites are still using very small fonts. I believe that 12px is way to small for a website, I also agree that 16px is a very nice size for font, in some ways.

I feel that not every website should be set at 16px. It all depends on length of content, and placement of content, I do believe some more important factors for readability would be line-height, as having your lines too close together can easily get the reader lost.

Letter spacing is great for fonts like Times, as pointed out in some comments there are a lot of accents in this font that are not needed.

And font use, while having “normal sized” font for body is good and easy to read, an input box where the user is proofing what they are actually typing having a larger than normal font is a better solution.

In conclusion this article did exactly what it was intended to do, while we don’t all agree with the 16px font theory, we are all re-thinking our design habits and I know next time I work on a website I will think more about font size and readability. Nice work!

0

282

Alan

Colm

Some interesting facts in the article, however, saying a font is hard to read because it’s too small is a bit of a loose statement. Font family, color, line-height and width (anything over 500px wide is a strain) all contribute to the readability of text. So a pink font at 16px stretching the full width of the screen (let’s say 1400px) with default line-height might be easier to read if it were 13px, dark grey, 450px wide with 20px line-height.

The article doesn’t target a specific type of site. Article sites or news sites rely on readability far more than startups. The article seems to suggest that you NEED copy to guide users. This statement is incorrect. You can guide users with whitespace, color, images, buttons, hover states etc.

If you have a startup landing page with lots of copy on it, regardless of font-size…you’ve already failed.

Paul

David van Ballegooijen

I can’t agree either.. I’ve experimented recently with bodytext fontsizes for our new upcoming website and 14px (arial) is the best choice for us. 15 or 16 px looked good on my 27″ iMac but even on our 24″ iMacs it’s already too big. On laptops it’s even worse and not acceptable imo. On tablets 16 px does read comfortable.

0

287

Anand

Wow. Great Article. Congratulations. What I think is that sometimes the text *has* to be small. For example, when we’re making a very professional website, the text simply cannot be large. What do you think?

Chatsworth Marketing

beth

I develop websites where the audience is predominately older that 40, and many are in their 50’s, 60’s and 70’s… so I did an on the fly change to one of the sites up from 14 to 16px. I think I liked it and it might be very good for many of our readers.

I think this 19px font is a bit large for me — and I am one who has to squint at the screen on far too many sites. I think I’ll give the 16px a shot.

1

292

Martin Silvertant

To me this article doesn’t make much sense. If anything it’s just a reminder to be careful not to use text sizes too small. The 19px used for the article is absolutely absurd, and the very fact that 19px is used while 16px is advocated is amusing. I feel a bit like I’m reading a children’s book.

The 12px at the end looks quite alright. I tend not to use fonts with a low x-height at smaller than 12px for body text, but for small portions of text 10px could even be fine. I think it’s a good practice to generally stay within 12 to 14px. If you’re heaving trouble reading 14px then the issue is probably with the line length, leading and tracking or your font features a low x-height (such as Garamond).

I’m not 100% certain about this, but I believe people used to use larger text on the web but now that the screen resolution and font rendering techniques have been improved fonts will render just fine at 12px.

You compare 16px web text with 12pt print text, which I think is a fair comparison but 12pt is quite big for text in print. It’s good for your thesis but definitely not for a reading book. So, if you take the correct size for print, then it would equal slightly more than 14px in web.

I honestly also haven’t met any contemporary people who don’t know how to zoom text. It’s being mentioned how to do it so often on the Internet. Besides, is zooming so bad? Then why is it one of the primary features of smartphones? I understand they can’t exactly be compared, but my point is that text size on the web is becoming a very relative value which you can control, anyway. Even if you don’t use em values for text, I think you can still zoom on the text in every modern browser.

What do people with bad eyesight have to do with how big I render my text? Ever seen books with 14pt text for old people? They don’t exist because there’s no market for it because we have glasses and contact lenses.

By the way, people can set the minimum font size in their browsers, so even for older people all this really shouldn’t be an issue. That is, if the text is formatted correctly taking the rules of typography and CSS into consideration.

I’ve been told that type designers and typographers tend to use smaller text, which I think has something to do with being familiar with the textures of type. Nevertheless, people read more text online every day and they’re becoming very familiar with it—even with small type. In some regard it’s actually a very amusing idea that people used to write and read blackletters, and now supposedly we’re having trouble reading a 12px sans serif. I mean, this article is just funny.

Hugh Grigg

Ben

I’d argue for one that you shouldn’t be using pixels at all to set your text. Use points or Ems instead. I still often just use xx-small, x-small, small, medium, etc. Also, I find the size of the font you used to be fine, but I recall a general guideline (magazine layout I believe) that states your column width should be as many words wide as your font size. Font size is fine, but it feels too narrow. Using that guideline, the width of the article should accomodate, on average, 19 words. This seems to be about only 12 as is.

Thomas

This is a good article, it promotes awareness of the importance of choosing a good font-size with the users in mind.

As a web developer the main thing to consider is who the main users of the website are going to be and cater for their needs.

On blog websites I tend to adopt larger fonts, 14 – 16px as it makes content quicker to take in and is easier to read through. The size usually depends on the font used along with the contrast of the font against the background.

It’s important to remember that content should be made easy to read. Font alone cannot provide this, which is why many companies are now seeking copy strategists.

0

301

James

TimMH

I think this is a compelling article and has certainly made me even more aware of font size than previsously. I have worked in a number of industry sectors from new born baby websites through to the older generation, I totally agree with tailoring the size to suite who your intended market it. However, having read the article I have now found it can suite all sites not just one sector in particular.

Great read. Thanks for sharing.

0

303

varghese

I really don’t think many people resize the text on their browsers when they are not able to read with a little bit of stress. But I do agree that if it was unreadable or if the user actually wanted to read a complete long article, they would do so.

0

304

Missy

Even filling in this feedback form is annoying; big ugly font – yuk! All modern browsers allow re-scaling of the screen with the Ctrl + and Ctrl – keys. Stick to a reasonable font size (12-14px) and ALLOW THE READER TO CHOOSE (after all, you want your readers to have a choice, don’t you?)

The author seems to forget that minimalism doesn’t work for every scenario, especially e-commerce. It’s FAR more important to make sure that the content is relevant, well-written, and presented in a format that makes it easy to scan. This does not necessarily equate to using a ridiculously large font.

1

305

Marida

I am very much over 40 and have all my browsers set permanently to zoom text. However, I think 16px is perhaps overdoing it. When I opened this article I had to go reset my Firefox because it was too big to read comfortably. The result (16 px) was tolerable but not all that comfortable – a lot of paging down involved, which upsets the flow of the argument. I think the comments are in a size that is pretty usable.
Oh, and those drop caps with the drop shadow? AAAAAAAAGGGGGGHHHHHHH…!

1

306

Paul Hamilton

Have I missed something and has everyone been having an awful time understanding and using websites with 12px text? Bigger type can be a bit helpful but does take up so much space on a page, that’s a real drawback.

Worse though is using fonts such as Impact, in red with drop caps. It’s snubbed ascenders and descenders, with machine-aesthetic letterforms make it ugly and really hard to read. The colour simply amplifies the issue.

This feels like an all to familiar case of an on-screen typographer not getting how and why type works.

0

307

Brett

Maykel

People here fail to understand what this article is all about. Sometimes what we like is not entirely the right thing to do. I don’t understand why he advocates on using 16px while using 19px, however; I think he is in the right path. I quickly moved to change his styling on my browser to convert the font to 16px and immediately it became easy to read and it felt like reading a newspaper at the distance and screen resolution I’m using. I do agree with some folks that the width of the lines is a bit too short as I found myself jumping the lines too quickly. In my personal opinion the font size is dependent on the font itself and what you want to accomplish. He was right to say designers follow other designer’s path and all becomes a trend of acceptance. I think if you follow the trends you can be a good designer, but if you set the trends you are great designer. That in my humble opinion set the difference between us the mean design community and those who are famous making millions every time they lift a finger.

Steve

I really like this article because I think it’s about time we rethink “standard” font sizes.

Debate all you want about the minutia of font size being dependent on screen size and resolution, but I think it really boils down to this: screen resolutions are increasing in all devices. Being able to cram more pixels into the same space means that the 12px body copy of yesteryear ‘s 1024×768 15″ laptop monitor will look proportionately smaller in the same monitor rocking 1680×1050 (or more) today.

Now that I think about it, maybe we’d be better off using a more fluid measurement system like em or percent.

0

312

José Luis

I relocated and sadly left my 1680×1050 20.5″ desktop for a 1920×1080 15.4″ laptop and there is a notable number of sites that I have to zoom in because they are completely unreadable. As screens grow on density (but not necessarily size) small text sizes are going to become a serious hindrance. Even new smartphones like the Nexus Prime, Samsung S III or HTC Sensation XE show a ridiculously high dpi density on a 4.x” screen, which, if any, will only aggravate the problem in the future.

I’ve had sight problems in the past and always been fighting against this “design trend” of ridiculously small font sizes. When I (re)designed my blog I struggled to not use a small size and after some testing at 14px finally set it at 15px. Might be interesting to change to 16px, after all it’s the default at every single web browser for a reason.

Also, as important as the text size is the distribution of the text. I have a small cheatsheet on my corkboard:
– line height ~= body * 1.5
– line length / line height ~= 25 to 30
– 55 to 75 chars per line
– 10 to 15 words per line

And lots of whitespace everywhere.

0

313

JJ

This is a really helpful (and timely!) post for me. Especially as I’ve been having to keep mobile environments in mind with recent web design work. The one thing I take issue with is the following and similar comments in the article:

“Web design is not about what designers like. It is about what users want and what will best achieve our client’s goals.”

It’s just not productive to think of designer preferences and monetary goals as being mutually exclusive. That sort of idea only pushes designers further away from your initial theory by then equating the use of a 16pt font with a result that is automatically not aesthetically pleasing than therefore a design blight.

There are excellent examples of using large size type (in both web and print) so this idea is merely a good challenge to break a longstanding habit/trend of using slightly illegible fonts so frequently.

LucidGal

Ugly is ugly…haven’t seen that headline font used since, oh, 1980? Lots of good info in the article, but it’s too long by half or more. People will read online if the subject is interesting. Leading (the space between lines) affects readability tremendously…12 pt type with 18 pts leading is easier to read than 12 pt type with 12 pts of leading. As for the line length, shorter is better. The eye begins to get tired at about 36 characters.

0

318

karleen hubley

That was great. And, it was easy for a non techie like me to put into action by sharing with my web master, if I dare.
Most of my customers on-line are middle age woman and it is time to help their eyes as well as help their horses:)
Yes, I hunched over when I read the bottom piece in 12.
Thanks to Chad Mandal for tweeting this.

Wendy Walton

At last someone else thinks the way I do!! Great article – keep pushing the point. I get very frustrated with small font – and Yes, I am slightly older, but still want to enjoy the web – without feeling tired trying to read small blurb.

0

321

Joe Jollands

Darren

I wonder how many people use their computer on a desk that allows their eyes to be 28 inches away from their monitor and still use their keyboard and mouse in a comfortable fashion? In the real world, where people’s desks, office and study spaces don’t allow that sort of distance, 16px is too big. At average screen distances, the equivalent would probably be 13-15px.

Elliot

Okibi

Okibi

Elliot

You certainly make some good points in this article. It was a great read. I don’t exactly agree with you on everything but it is definitely food for thought.

I found the 19px font size a tad too big. I dropped it down to 16px and found it more acceptable and readable. This being said I am 24 years of age and you did mention that the older you are the less light your eyes let in. So perhaps 16 is the ideal pixel size for me.

In terms of increasing font size in the browser, I certainly don’t think it is up to the designer to create a site that some how magically is the best for every user. There will always be some give. If someone outside your demographic does happen to come across your site they should be able to use it perfectly regardless of how you built it, but it doesn’t necessarily mean they site should be built for them.

Anyway, great article :)

Elliot

0

328

nelson

Nice article. question. When you tested this, which screen resolution did you try? I find that at 1024×768 which in the main site I work on is a good 40% of our users 14px, 12 depending of the fonts works well. This is after a user focus group, but after reading this I will test this further.

jkregala

Palle Zingmark

Interesting discussion and I totally think that 10-12px is just way too small. But personally, I think that 16px is too big .. it actually takes me longer to read a long text sized 16px, versus a size of 14px. I’ll have to move my eyes a lot more, for the same piece of text, when it is so big.

I guess it differs a lot from person to person if 16 really is the ultimate size (age, vision problems, etc.), but that a text size should be greater than 12px, I think we all agree on.

Martin Barker

Your wrong even by your pictures most users now have a widescreen monitor as such web sites are not confined to the space of 1024 by 768,

As me and most designers of web sites we build a site at 1000 PX wide witch means there is plenty of room to zoom the site and it not break a design,

What your doing is saying building for Accessibly of all user is bad and building for the minority is good well your wrong build a site to work with zoom (all browser have) and your fine as user will just zoom the site that are having problems reading

Frank Wehrmann

I agree with the spirit of this argument. Right now I’m sitting using two monitors: 17″ and 22″. I’m 57, do webdesign and strategy all day and am ‘most comfortable’ with 16+ fonts. When I retire to my macbook air or iphone for quick busts of personal work or information I’m working with the technology I craved in my 30’s – when my eye-sight was FAR better. When I do mobile designs I also keep the big type or icon idea in mind.

0

340

Paceaux

Article was very good and informative. I’ve already been in the habit of using 16px for font-size – but I always got feedback from clients that the text was too big. I think 16px is a case where usability is losing to trendability.

And to the other points about ems – I agree that it’s best to use ems – not just for font-size but layout, because everything becomes proportionate to the typography, more or less.

Oh, the site flowed much better once I set the font size to 16px through Chrome’s developer tool.

Yikes

Luke

FACT: using Limelight and Impact tightly tracked in red over white for headline are super hard to read. Kind of weakens your argument right from the start. Pretty funny, the entire article itself was very hard to read.

0

344

Heidi

I think the difference between usability and familiarity pointed out in previous comments sums up the argument over the article. When I first started reading I was uncomfortable with the size of the font. It was unfamiliar and looked just plain bad. But as I kept reading I got used to it. I leaned back in my chair. I started imagining larger fonts on the website I’m currently working on. The idea grew on me and I’ll probably try it out.

There are some points on each side for which I would like to add my two cents.

Zooming: I’m quite young, but still have to zoom in on certain sites to avoid eye strain and headaches. As a college student, I was embarrassed that I needed to zoom. I would imagine that as others grow older and would benefit from zooming, they will feel similarly uncomfortable with this “proof” that their bodies are aging. Zooming may be an admission that we don’t belong on some site, that we aren’t at home there.

Glasses: Some rather rude commenters said that if an individual has difficulty reading then he or she should get lenses. “If you struggle to read 12px font then you obviously require reading glasses or contact lenses and to read without corrective measures would only be damaging your eyes further!” In my case, my prescription perfectly corrects my near-sightedness, yet there are still times when it hurts to read small font. Probably not 12px, but having vision correction doesn’t mean I have super-eyes.

Scrolling: Someone mentioned that increased size means increased scrolling, which is bad and hurts the wrist. I totally agree, but luckily read this article on a large screen. On a similar note, another person mentions reading space. If you don’t have room to lean back from the screen, as I did, then a larger font becomes painful to read and the back button looks pretty enticing.

0

345

Michael Clowney

BrianMc

So your argument for larger font size is money. Basically your theory is, if the font size is larger people will read more. If people read more, they will spend more time on your site and or buy your products or service.

You then go on to give evidence as to why this is true. However, all of the evidence you supply is circumstantial at best. Have you done a scientific study to prove your theory true. This would require a website that is currently generating revenue that has 12pt. text. You would then have to modify the text to your recommended 16pt. size and compare revenue for a set period of time. You would also have to take into account the time of year and any special circumstances that might account for the increased revenue.

It would probably be best to test this on several different sites as well. You would also have to measure if time on the site went up as well as compare bounce rates. Another criteria to measure would be the age of the users. How many users over the age of 40 are buying more or spending more time on the site after the increase in font size?

So my point is, you can’t just go and say that 16pt text is better because it’s easier to read. And if the text is easier to read, you’ll make more money. That is a very big jump. What about 18pt. type? Will that make me even more money? What about different fonts? Some are easier to read than others. Will the easier ones make me more money?

In the end, because there is no real evidence to support your claims, this is just your opinion. It’s interesting but still just an opinion.

2

347

Tim Holleman

Great thoughts! My dad was always criticizing the font-sizes I used when designing sites as a wee young lad back in the days when IE6 and Netscape were cool. I always thought he was just being old and not in tune with the upcoming age of the internet and the websites designed for it…which, at that time were really using a lot of smaller font-sizes to pack more information into smaller spaces for our 15-17″ CRT monitors. Oh how the times have changed my perception of font-sizes used, even though our viewports have increased dramatically as well as the devices we use to surf.

I very much agree with this article. We use 16px as our font-size:100%; when designing for mobile devices, (phones in particular) and make ems of that base unit.

Andreas

I’m thirty and now and I find myself time and again hitting Strg + in Opera whenever I want to read a longer news item. 10px was really cool when I was younger, I even went for 9px just to put more content on one screen. Important text deserves space.

Now I’ll go and try changing the default-templates that I use on posterous and tumblr…

0

350

Adam

Completely agree. I’ve been using 15px since about 2008 or 2009 because I had too many complaints from people having trouble reading my websites (at 12px). After I adopted the standard of 15px, I had literally NO complaints. I now use 100% as my default font size, which, as you pointed out, is 16px in modern browsers. Great read and info! Thanks!

Carl Jones

The line-height should be as important as the font size, and don’t forget ample margins (whitespace). I agree the majority of web pages are hard to read . I am 55 and wear reading glasses but find the text in this article a tad too big for the column width on my 1920×1080 screen. Yes, in addition to font size, line height and margins the length of the line is also important. They all combine to make good typography and thus readability. I think you should have stuck with 16px rather than the 19px for all the reasons I mentioned.

0

353

peteski

This is article is a major fail. It barely mentions other factors which are just as important as font size – line height, font selection, contrast, kerning, line length etc. These have just as important a role to play and it is the interplay of each of these variables which make the art of typography such a subtle and difficult art to master.
Reductive, simplistic and poorly researched.

2

354

LucidGal

Nigel

All of those certainly factor into legibility and are what set apart a typographer from a web designer. I think the article is a good start but could easily be refined and expanded upon to include the remaining typographic settings overlooked.

Marty

This is almost as ridiculous as trying to prove why it is better to park a car by “backing” into a parking space.

Your article is completely flawed because almost all of the points you make do not apply to computer screens.

– At age 40, only half the light gets through to the retina as it did at age 20. WOW, really? Too bad that has nothing to do with reading on a display. It actually has to do with the aperture of the eye which I would argue does not really translate to how we see on displays. Besides, ever watch a baseball game in 1080p and notice that you can see the people in the stands way better than you could if you were sitting there? Your eyes taking in light does not translate to your eyes taking in light from a display. Your TV would be 25% larger than mine and then people would have to stand back 25% further wouldn’t they. So I have to get a really long monitor to see your entire page or get used to a lot of scrolling. People can actually change the brightness and contrast, maybe you did not know there’s fine tuning like that on almost all monitors these days and the monitors today are a lot better than the old CRTs we had in the early 80s.

– Nearly 9% of Americans are visually impaired. So they can’t read a monitor? Maybe they have larger issues like learning how to change the zoom level on most browsers now with ctrl-mouse wheel. Your point works great for PHONES, not displays. You can zoom the text on a display but you can’t on a phone. So instead of making everyone read like they were 60 why don’t we just use technology that we already have. In fact, we can use 8px and force people to zoom but they would end up with something around 10-12pt depending on the content. Notice I said depending on the content which was missing from your article.

– 16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Hey, as we get older we need to hold things further away, wouldn’t that make print smaller, like regular web sites? I think newsprint is a lot smaller than your example and that has been around for like 100 years before people were using printers in the home and office.

Did you consider types of content and style and formatting? Or should everyone have the same website template as yours? Actually a lot of web sites that try to sell you stuff looks like this. But wait, there’s more… Of course reading = revenue but that does not mean reading 16px is going to guarantee more revenue. I put a web site together with larger font and people hated it. About ten people which I think is enough to have a good sample population, so I changed it back to 12pt.

Next article…, I bet we are supposed to read white on black to reduce glare? That is more natural right?

Cedric Sagne

Kamran

The comment text is 15px (on FF 7). That is pretty much perfect for me. I didn’t have any issues reading the article either.

It has never been hard for me to read small screens, but I know people who are older than me that keep their resolutions lower than their monitor’s native because it’s easier to read for them.

Also, font size becomes important when you consider mobile devices. I can’t tell you how many times I went to a “mobile optimized” site (even Gawker) and I had to squint to read the text on my Droid Incredible. Make the text bigger for phones! Especially for content articles.

Overall I totally agree with this post. I think you can make an argument (as a designer) that:

a) Content that people should read should be bigger.
b) Content/flourishes that people don’t have to read can be smaller (dates, author bios, etc.)
c) Depending on the font 14-16px is probably just fine for body text.

As with any topic like this, people have varying opinions. Just do what you want for your site and ask your users what they think. Maybe you only target 20 year olds, so keep your text at 12px. Maybe you have a news site, so keep your articles bigger. Do what you need to do to make your site readable!

0

361

Craig

What about user testing? Surely by selecting a pool of end-users who meet the target demographic and carrying out isolated testing would determine whether an onscreen font size is illegible. The target end-user is key to determining the design stance taken with any project.

It is worth noting that different fonts render at different sizes. For example, Verdana is a ‘larger’ font than Arial. Selection of typeface is also key to legibility, along with visual statement.

Kamran has made some extremely valid points above, but, the most interesting one, for me, is how does this recommendation translate to mobile device apps? For me 16px is excessive as a base font size, especially for phone platforms.

One thing that also needs to be considered is that users have full control over browser zoom along with many browsers now having built-in readers.

Good article though.

1

362

Zakhir

Martin

I’m glad I read this, I’m learning web development at college. Our lecturer has told us to use 12xt for body text and I thought that was ridiculous, I have always designed with a bigger font size, at least now I can back up my argument with facts.

Thanks M.

2

364

James

Martin, I am glad that you are pursuing a degree in web development. I am a (young) college professor teaching web design and development, I can say that the number one issue beginning students have when designing web pages is making the font size too big. The article about using 16 pt/px font has some validity, but as with anything in design, there is no rule. Saying that you always have to use 12px is wrong, but saying that you always use bigger fonts could also be wrong. There are too many factors that go into any type of design to say that you should always use *this* for *that*.

Good luck with your degree!

9

365

t

@Martin — most professors won’t admit they are wrong, and most have bad information that may have been relevant when they were actively involved in the field 5-10 years ago. take what you can from them, but generally go with what you find from sites like this and from what others are actively doing.

3

366

m

@Martin – same in every country as it seems – teachers in the area of media, design, programming etc. mostly work with their outdated experiences back then when they used to work in business. Often the students are more up to date then them.

But the good ones of them, the open-minded, can be convinced of new stuff, others are not worth following their lessons (unless you have to..)

Make your own experiences. Reading such magazines as Smashing Magazine or those from the Tuts Plus Network definitely helps you even if you are experienced someday.

Mark Simchock

Re: “Web design is not about what designers like. It is about what users want and what will best achieve our client’s goals.”

Worst than tiny fonts is the fact that this statement still needs to be repeated in (what might as well be) 2012. Font size just happens to be a symptom of a broader disease, yes?

That being said, let’s face it, plenty of us get “direction” from client that is less than ideal (to put it kindly). There’s certainly no shortage of poor design. I’m just not so sure designers are always the root cause.

Michael Guthrie

Evie

Great article! Why we we get so stuck on what’s the ‘norm’ just because it’s always been like that? This is such a simple solution and not even thinking ‘outside the box’ (as much as I hate that cliche phrase). I thought I was pretty good at stretching the boundaries of generic web design, but this article has ‘pulled me back in’ to reality and made me realise that I need to do more – not just for design but for comprehensibility. Thanks for the inspiration!

Yvan

Why not use “em” as a unit of measure? That is what I use all the time and it makes sense. “Em” is the size of a capital “M” in the browser’s default font. This way, if the user uses a larger font-size as the default in his browser, the text will also display larger in the web page, if the designer took care of using “em” as the unit of measure in his CSS.

2

377

Bento

Alan Stainer

Very good article. It’s one of those things that seems so obvious when you think about it as well. I can think of at least one social media site that would do well to take heed, especially with all the silly updates they have been doing recently that have already put people off!

paul

Your reasoning is flawed, you should never design for yourself but for the people who use your site. My guess is you are still in your twenties and an experienced internet user. The people who will use your design most likely are not.

3

381

Laura

I think in theory it’s a great idea, and would be great for certain situations, but I think to generalise would be a mistake and there’s much more to consider than just the size of font when you’re a designer.

We don’t tend to plonk a large amount of text and leave it, we use other devices to make it easier to read such as segmenting, highlighting, making keypoints larger etc. In this page the font has proved to be easier to read I agree but wouldn’t work always.

We don’t often get briefs that just feature the need to have as much text as a book would.

I’m not disagreeing entirely, I just think the examples used in this piece are slightly biased, and don’t show the situations where it would make websites harder to use. It depends entirely on the website and this idea would be great for things like blogs but would make it especially hard to layout e-commerce and catalogue sites in a user friendly way and still get vital information in without the need to scroll constantly.

Also a key thing is having easy to use navigation. With increased font sizes as standard your side navigation would constantly be falling onto 2 or three lines which would throw up lots of usability issues.

9

382

Graham

Louis

I agree, size count (don’t misquote me)! But to me the type of font weight in the scale. My pace of reading is faster and easier with font like arial, verdana instead of font like the article itself (Times etc…) I agree, size is important but to my point of view, type fonts are also very important for the ease of reading!

Jordan

Mortis

Wonderful article! Indeed, most designers would rather go for what looks good to them instead of the preferences of their clients. I admit I’m one of them but after reading this, I’ll reconsider. Thank you for sharing this with us!

jfry craig

i very rarely bash an article, but this is so off the mark i barely know where to start. there are so many ill-thought out and poorly researched notions that try to support non-factual suppositions.

for starters, i read this article on a tablet where the font size appears insanely small because your site isn’t formatted for mobile and as a result i had to “zoom” in for readability.

there’s a lot more to decent typography and information design than simply stating body font should be 16pt. this article also makes a lot of suppositions like “the users desire to hit the back button”, average user age of a web site and the user’s platform. where’s your data, your a/b testing to show this as such? where’s your data about the average age of a user online? where’s your historical context for why 16pt is the default text size (which isn’t true, by the way)?

if you were really going to enter into a discussion about print, you should have mentioned how those same 40 year old and 60year old eyes suffer from the same issues with the acceptable (due to size constraints, apparently) 8-point font. there’s no reason to segregate this argument for web and print. old people need bigger text, now move on with your thesis. If you want to talk about standardized text and engage a print discussion, then you should at least mention how type setting evolved and how it’s not that different than our current modal div theories controlling contemporary web design

the other point i find interesting is that you assume that all people are reading from a certain distance on a desktop unit. in 2 years more than 50 percent of web content will be delivered over mobile, which you don’t even touch on. this brings us full circle to my complaint that you text wasn’t readable on a tablet, which made me want to “hit the back button” as you say.

this blog, as an example of your thesis, would have lost your client money.

5

388

Thomas M.

First off, it’s not his site and I read it on an iPad without having to zoom (a rarity among most articles on non-mobile-ready sties for this 42 year-old).

Body font is 12pt. for print, you said 16pt. (point) the author is talking about 16px (pixels). And, I’m not sure what browser you’re looking at, but if I load a non-stylized HTML document into a browser, the browsers I have (FF, Safari, Chrome, Opera, etc.) all render my default font as 16px serif (normally Times or Times New Roman); seriously, go to preferences in your desktop browser and see what it’s set too (Chrome just says “medium” but all the others give a 16px setting). I also thought the shots between the screen and book were pretty convincing … I also personally can’t stand reading books and magazines with smaller copy size (too much eye-strain) — although I completely understand about printing costs and keeping font sizes small for magazines, catalogs, and books like the Bible (that’s where digital versions that allow you to increase the font-size are so nice).

As for facts, what more did you want (you saw the links, correct)? The distance of a recommended 28 inches is idea of ergonomics (for desktop computing). While I have two mobile devices (phone and tablet), I do the majority of my reading on my 24″ laptop (at a distance (at work) that is approximately 28″ from where I’m typing) — this article was an ideal read versus even reading these comments. As for age … most of my clients are age 30+, thus this article makes a very valid point. I suppose, if you’re aim is at an under 30 crowd, font size could be smaller (and should be mobile ready) — then again, maybe you could provide a link (for your facts too) on what is best (and provide your A/B testing).

As a University professor in Web, Design, and Illustration, I know about typography (history, readability, blah, blah) … And I understand about how there isn’t one “hard and fast rule” and or design can be “subjective” — even in this article the author states that the font chosen determined the baseline … But I believe the majority of my clients (not all mind you), might prefer a base size for body copy larger than 12px. I (for one) am glad to see the changes in such sites as http://www.markboulton.co.uk/ (18px) http://jasonsantamaria.com/ (16px on the front and 20px inside) that both use chaparral-pro … And using http://drewish.com/tools/vertical-rhythm makes testing variations between 16px and 20px very easy.

Although I used to teach 12px should be used for the font-size and 18px for the line-height (since I came from a traditional print background – and thinking in terms of PICA and points), I know much of my future work (and what I teach students) will start with a baseline that is proposed here.

I don’t mean to ramble, and normally I don’t reply to comments, but I just wanted to give you my perspective (2 cents is probably all it’s worth, if that) on the post.

6

389

Lisa Tennant

The article is written from the context that no websites are viewed on hand-held devices. I just finished a unit in my design class teaching students about readability. If we would like to engage most of our users, we could code a button in the site up front for users to make the text larger. It is not a bad idea to try to put in text larger on the web, you set the type size as normal and work off of that in ems — pretty easy. Although smaller text is elegant looking, as truly a visual person as I am, what I see on a page most of the time is a grey box, and then I have to force myself to deal with actual letters and words. So, perhaps we could all go a little larger. I would experiment with testing your sites out with several sizes and users will tell us what they think with how much they visit. It’s measurable.

Zac Bettendorf

While I think this article has some valid points, I also agree that it is a case-by-case scenario. I did find this article easy to read, though the type itself was too large to really give credit to the subtleties of characters. I.E. I could read it easily, but the characters were not aesthetically pleasing. On a usability note, it is well established that san-serif fonts are actually easier to read on the web. If one is really striving for readability, they should not use a serif. This article is a bit biased for my tastes, even with all of the good info (not trying to insult!). I think the line is fine, and it should be respected.

1

392

Brian Daly

The article was food for thought, but I found it hard to read with the big font and narrow columns. My inclination was to scan as opposed to read and increased amount of scrolling made me lose my place. Someone else mentioned that it looked like one of those “how to get rich” style websites. Those sites work well with big fonts because they are making broad stroke points, and it is easier to see with the big font. But for reading a lengthy post or article I like to have less scrolling, and more words close to each other. I also like to read articles on my iPhone, so I might not be the best example.

Anastasia

“What size is the font on desktop PCS and Macs, program fonts, it’s definetly not 16pixels.” – which is a constant pain in my eyes.

I hate iMacs for their restrictions in changing font sizes for the sake of good looking design. Yes, Windows Large fonts look aweful, but at least I can see it.

I actually second the author of the article. Large chunks of text must be at least 16px big. For examle, as much as I love SM, reading its artcles is always a srtuggle. I do only because I know how good the copy is, but experience leaves much to be desired…

Adam F.

Absolutely ridiculous. How is this featured on Smashing Magazine? Everything cannot be a headline. Layout needs structure, not massive text thrown haphazardly on a page with bad typography. Please, no.

Jurgen

16px is ridiculous. This page makes me move 3 feet away from my screen and I still am irritated by the big fonts, big line heights, ugly formatting and endless scrolling. And I have a big resolution screen… What if people with 17-19 inch monitors come here? They’ll click away in a second I’m sure.

Okay, 12px may be a bit on the small size nowadays with the high resolution screens, but 13px or 14px will do fine.

0

402

Rob

Definitely a great article. However, one might argue that using larger fonts as gospel could pose visual hierarchy problems with smaller screen sizes or higher resolutions when trying to eliminate scrolling. I usually set my body font to 15px and use a line height of 1em. I find this more than sufficient for readability with large paragraphs of text and it still gives me room to make headers 18px and 20px for slight differentiation.

That being said, there are definitely reasons for using smaller fonts. It’s certainly more aesthetically pleasing, and it can be used as an extra aid for action e.g. if you have and arrow pointing right, placing “Next” in 12px font can be extremely helpful and eliminates the need for your button to accomodate 15px font. If you are going to use 13px for a paragraph (I don’t think anyone should go much smaller than this), try toying with the line height (1.3em isn’t bad) and letter spacing to improve readability.

The underlying theme to this article is that you should be designing the site for the user and the site should accomplish it’s goal. If a constraint is visual appeal, lowering the font size might be necessary. Otherwise, usability and readability should usually be your goal.

Ryan

The problem is here, aesthetics vs usability and what audiences are you catering your usability towards. A standard problem we all face in the interactive industry is identifying the lowest common denominator and how to appease this group. The unfortunate result is, not everyone will get a hug in the end. I do however believe building in tools to increase seamless usability across all audiences is the smarter move. Additionally I also think that users can be guided to utilize browser tools more efficiently then laying the burden of individual use completely on the interactive team.

I think your argument of pixel size is rather arbitrary. The bigger point is, you want to have the large print version of the WSJ available by default. From a design perspective, this means that your typographical hierarchy will have to cascade up and down from this central position. Aesthetically you run the risk of creating a dopey look to your solution which may not be an issue for everything out there but there are conditional applications where this will not fly.

Danielle Hill

I must say my first reaction was one of skepticism, as I’ve been trained throughout my education and short design career that the text and body copy will be fine as long as they work well with the brand design. And maybe it will be hard to design larger since it’s been ingrained in me to make copy smaller, rather than larger, if it needs to be altered. But as I read your article and thought about all the times I catch myself leaning closer to the screen to read, and while reading your article, I was comfortably reclined in my chair, I was pretty impressed. I think I might need to change some of my digital typography practices!

Boray ERIS

SoSuanne

Designers struggle constantly with non-designers who don’t believe that making content “look pretty” is important to conveying their message successfully. We’ve also struggled getting the “technical guys” to let us help with creating more useable interfaces for their programming. Now in these comments, Designers are the one’s arguing against the application of common sense.

Personally, I was relieved to be able to sit back in my chair to read this article. I’m not a huge fan of the Art Deco font, but it’s purpose was clear “I’m a headline”.

Someone said “larger text doesn’t look as pretty” isn’t that just an opportunity for us to learn and adapt our design methodologies to embrace larger text? We can build in a visual hierarchy with weight and color in a way that is pretty. And, we should already be developing solid companion mobile design templates or templates that scale gracefully with the mobile interface – one size doesn’t fit all interfaces.

Note: I changed the base font on my blog before posting this comment.

0

412

Arnold

Marcus Tucker

Interesting article. However, you have shot yourself in the foot by using an even larger font size (19px) than you actually advocate (16px) – this only serves to create the impression that 16px is ridiculously large, because one naturally assumes that you’ve followed your own advice, when in fact you reveal at the very end that the body is 19px instead of 16px. So in fact nowhere on the page do you actually demonstrate what a 16px font looks like in real use (the photos don’t count) – this is quite an oversight! Madness!

B

Proportions are more important than “size.” Drawing a hard line in the sand is unwise.

In the design of anything, on screen, or in our physical world it is the relationships between elements that matter.

So rather than stating a precise pixel size is right, wrong, or otherwise, it’s more accurate to speak of the elements in terms of context and proportion – and in terms of the intended purposes of the design. Responsive design solutions are based on percentages and proportions, no?

12px may be correct for some uses, 16px in others, as long as the leading and the line length does not exceed a tolerable and legible measure (See Robert Bringhurst’s book “The Elements of Typographic Style” – still relevant even in our digital world.)

1

415

Gemma

Web designers should stop dictating to the end user their “ideal” font size. This can be done by setting the default body font size at 1 em.

What this will do is, if the web designer was smart enough to let the p element inherit the font size from the body element, and if the end user has not set the font size in their browser settings, then they should see body text set at 16px. If the end user has adjusted the font size in the browser settings to suit themselves, then they will see the body copy set at whatever size they chose. This is wiser than expecting the end user to use zoom.

I prefer to leave the default font sizes etc alone in the CSS, and just use a minimal reset to create more consistency. It’s best not to deviate too far away from the browser font sizing defaults for headings as well as other text such as body copy.

End users are being more savvy than they used to, and they should have control over things like font sizing that’s more suited to their needs. Web designers need to change from the old practice of dictating the design to the end user, and adopt the practice of giving up control to the end user and designing with the end user’s needs in mind. No web designer can accurately predict the best font size to suit the majority of their target audience. That decision is best left to individual end users who know their own needs better than any web designer ever could. Stereotyping is not useful in this case.

2

416

Kathleen Clohessy

Thank you from a woman whose eyes-like the rest of her-are not getting any younger. Although I agree with the commenter before me re: setting the default to 1em and allowing it to default to the user’s choice, the truth is that not all users are that savvy. Many users, in fact, are not savvy at all, and assume that WYSIWYG. period. In other words, they do not realize that they control anything on the page other than whether to close it or not. And close it they will if the font is too small, regardless of how compelling and beautifully written the content may be.

Gemma

Actually, I wasn’t saying that all users are savvy enough. But, most regular internet users are savvy enough to know that they can change the font size either via zoom or via the browser settings.

So for me at least, it makes sense to set the base font size at 1em. This way, if an user who isn’t knowledgeable about their browsing options views the page, their font size is very unlikely to be too small, provided no-one has changed the browser settings from the defaults. It’s more likely to be 16px which is the default setting in modern browsers.

jack caine

imho it’s other seo article nonsense, everybody knows that webdesigner has more type of units and only beginners stick with pixels, because pixels are for screen only but css isn’t formating only for screens … i guess all the comments include all my reservations … good luck with gaining more experience, don’t let me stop you writing :D

-3

420

pants

This is all well and good, except that I was taught in all my graphic design classes in college that 12 pt text on a printed page was really too big for blocks of text. 10-11 pt was what I was taught to be the sweet spot. According to your math this would put the equivalent px size somewhere around 12-15 px which is…pretty much what I’ve been using in websites.

devlim

Himanshu

Kate

This article looks like a custom post type: you don’t see any of the standard ads at the top right of the page the way you do on other SM article posts. Therefore, you have nothing to reference the text size to other than the header and footer of the page. This post type doesn’t look like a standard web page, which typically has content on the left and right sides, etc.

The author makes an interesting point, but shows no great examples of how this 16px text is applied to websites. And, on his own site, the text is hardly legible (thanks to decisions on type and color) on my 24″ Mac.

To me, reading text as large as it’s set in this article feels gimmicky, as though the author is working hard desperately trying to convince me of something. Well, that’s true, but the type size is cueing me into that before I even get into the meat of the article, which makes me doubt what’s being said. I’ve seen examples before where copy is laid out like this; it just never feels genuine to me.

Let’s also note that the author is a copywriter, not truly a designer (or at least he’s hiding his portfolio…). B Nonn, if you can show examples of websites (not just blogs) where 16px fonts are applied well, I might be a little more open to this idea. Until then, I remain unconvinced as well.

2

425

Petar Subotic

As designers we need to stop being such control freaks, and let the users define their own display.The most adaptive technique is using percentages, not points, and by no means pixels, especially in the world where every different device has different pixel (ppi) density.

Jessica Enders

I have to disagree with the idea that there is no cost involved in using larger fonts on the web. Designing an effective and appealing web page is about the careful balancing of a number of different factors, with font size being just one. Get this *balance* wrong, and there could be a severe cost.

For example, using a larger font would make a form look much longer, and research shows that this perception can be enough to reduce response rates. And it’s pretty clear to me that the lack of contrast between text and background on Mark Boulton’s site (for instance — nothing against him personally!) would undermine the readability more than the large font improves it.

So while it’s great to have the data to suggest we over-estimate our readers’ ability to see what we produce, I think this should just be part of what we consider when deciding font size.

Thanks,
Jessica Enders
Principal, Formulate Information Design

18

428

Mandi

Rob

There are so many things I take issue with here. One is that browsers’ default type being 16px means anything to a page design. How long have browsers been built that way? Why is 16px now the ideal body copy size as opposed to every other year they shipped this way?

Not every site is a single column blog. You completely ignore the total design of the page (type hierarchy) in order to declare one size “best.” Your type is not well set enough to help your argument, either. Your line height makes this text *more* difficult to read than a smaller, well set size. The footnote bit is also set as #444 which makes it more difficult to read, but you’ve not written about contrast at all, only size.

Further, you ignore mobile and focus on desktop only. How long will that be the prevalent browsing experience? Most of these devices are much closer to the eyes, and a properly set viewport clears up a lot of issues without going for 16px as a minimum.

Lastly, you may think that just web designers read this. They’re not the only ones. So when I get a client who comes along and tells me every piece of text on the page must be at least 16px for a complex site, I’ll know where they got the idea. Should my H1 be 48px, too? I have had a client go back into a site design and restyle it for 16px minimum. It looks AWFUL. 16px type should not be a driving principle. Clear design thinking SHOULD be.

But why do 16px fonts when you can just have them scale perfectly to whatever device? And why not just use the zoom feature built into every modern device ever?

Why do we constantly need to build entire sub industries around the ineptitude of the end user? If it’s just about money, well I say you’re losing money by changing web standards every 28 days like a menstrual cycle.

CTRL + Mouse Wheel = Problem Solved. ALL CAPS 25px fonts and uninteresting content = money lost. If not because you alienated your viewer, then because you had to pay money to an adhoc blog writer.

I say if you can’t read the internet you should be a Walmart door greeter until society changes again.

I didn’t read to the bottom of the page where he tries to rebuke the web designer who said ‘use the golly darned zoom functionality’ … okay I did. But it wasn’t the massive text that got me there. Or the boring tone.

If it’s really about making money, then why not just jack the lowest common denominator into the pseudo matrix and hook em up to a dopamine transmitter attached to a giant big arsed unmissable red button and charge money to their credit cards every time they push it and when they run out of FIAT credit supplied by a broken economic system replace said chemical with cyanide and turn their decomposing body into usable energy? How’s that for efficiency and a solution to the population problem.

I would argue that it is far more costly in the long run to constantly cater to weakness and fight against evolution.

RAISE UP humans. Try harder.

And no, I didn’t hunch forward and furrow my brow to read the page footer but that is just because I have no interest in BNONN.

Anyway, I jest… now that most people are using 1920×1200 monitors you really should up the font size. If you’re still using 1024 x 768 – get with the times. We live in a disposable society.

Peace out.

Thanks for letting me waste your time to add nothing to a needless conversation that common sense should have solved years ago. I hope you had to stare hunched over with furrowed brow getting massive screen radiation to read this 10pt facebook text.

-56

432

R Dean

Using a low contrast font to reduce readability of trolling comments is a usability problem. Here I sit trying to read it and straining my eyes in the process. Why not just hide the idiotic rant and make me click something to get a readable version?

6

433

Greg

Funny thing – we always debate the ideal format for blogs and articles here (for ourselves and our clients). Our blog lacks readability and we’ve wanted to redesign it for 18 months now, we just never find the time! Hell, can’t even make the time to post blogs!! But, this is a design issue that we discuss for almost every site we create.

Fundamentally though, the issues are:
1) Too many words on a line is difficult for eyes to track – which leads to strain.
2) Low contrast is difficult to read, which strains.
3) Small font size is difficult to read, which strains causing squints, hunching, etc – and of course, also leads to #1.

The fact is, while it looks large to us, the number of words per line is far closer to optimal – as opposed to 12, 15, or even 20 words in the worst cases. Part of the reason some college text books were so hard to read without falling asleep was the number of words per line. That and they were incredibly pointless and boring. However, in almost all printed material, you see pages broken into multi-column format. Why? It’s easier to read.

And to keep the topic on track, this is about articles/blogs – copy intended for the user to read/consume. Forms are not included in this. However, the description of a form’s intent should be. (“Please fill out this handy contact form so we can send you a personalized design mug with accompanying vagrant sea bass!!”)

Lotsa haters out here – but a good topic.

Thanks,

Greg of the OnWired clan.

13

434

Rich Dooley

Very good article and an even better message. 16 px is a perfect on-screen size, and more importantly also means that text renders at a relatively legible size on phones & tablets, for sites which aren’t designed responsively or with a mobile-specific version.

Although I have to agree with others who have said that we ought really to be steering away from px measurements in favour of % or em.

9

435

Dafrallah Khan

Very constructive article. Content and content is the most important thing in all interfaces and of course the presentation it goes in paire with it. User friendly called by marketing people and I think that this rule have to be respected. Thanks again for this article. Daf

0

436

Felix Miata

While I laud the premise that most web sites use too small text, 16px is just as wrong as 12px or 10px or 24px. Any px is wrong for sizing anything other than objects that have intrinsic sizes measured in px.

Why?

1-Screen densities vary widely, as do reading distance and other user environment variables. While the CSS spec defines a px as an angular measure that shouldn’t be affected by distance, in practice browsers don’t match up with the spec, because they’re incapable of anything other than too granular conformance – no fractions allowed – in matching up device px to CSS px.

2-This is the bigger problem, and it’s huge: Defining font sizes in px (or pt or mm or any other “absolute” measure) disregards the browser default size, which disrespects the visitor. The browser default is presumptively the ideal size for the user. He’s the one in position to do anything about it if it’s inappropriate. No designer is. There’s too much variation in device densities, viewport dimensions, viewing distances, and viewer needs to ever say anything sized in px is ideal, or anything close thereto.

If 16px is an ideal base size on your developing screen, and your developing browser default is 16px, then you’re also saying 1em is ideal. Indeed, 1em is always an ideal base size, as it (presumptively) matches the user’s ideal size perfectly, no matter the screen density, viewing distance, viewer, or any of the other environmental variables a designer has no knowledge of or control over.

Peter McClory

I think you’re right about text generally being too small on most websites.

There are of course a number of ways to do this, but in terms of the creative that gets signed off by the clients, I’m already moving towards larger font-sizes on all aspects of the designs, and I’ve only had positive feedback from clients.

0

438

Blake

It’s the principle of the thing. Increase body font size = improved reading experience (based on evidence given in this article, the web survey cited and opinions of many). Whether that means px or % or ems it doesn’t matter.
If you’re into the responsive thing already than do it in ems or % or whatever, but I think the point is that body font size needs to be approx. 16px for all the good reasons explained in this article and most of the comments here.
I have to agree with @Greg:
“And to keep the topic on track, this is about articles/blogs – copy intended for the user to read/consume.”
The topic is body copy text size, just like the title of the article says.
Obviously caption text and sidebar text and meta text don’t need to be huge. If you start with 16px (or body {font-size: normal or 100%} and then whatever that ends up being using relative measurements) you can apply same typography principles of hierarchy ect. I think of this as just moving up the scale.

Check out trentwalton.com specifically. One of my favorite sites for many reasons, but the typography is one of them. The body text font size is 20px (or 137.5% for screens larger than 900px wide) Another good example of a nice looking site with great typography is jasonsantamaria.com his font size there is 20px.

George Reith

Anne E

While I totally agree that overthinking the common use of 12 or 13 px big fonts is necessary and 16px is indeed a good option.

I think the argument “… all browser makers chose this as the default text size” shouldn’t matter. Just because something is the default, it does not mean it is the best option.
There are far better arguments for increasing font size and they make much more sense than using “default”.

Levi Aho

I have an approx. 18 in. monitor, which (I just measured) I sit 18 to 20 in. from. At a 1600 by 1200 resolution, this leads to a DPI of a little over 100. While I can’t be sure my vision counts as normal (I’m thirty and have awful sight without correction. With an up-to-date prescription can be corrected to better than 20/20, but my current prescription is a few years old.), but I have to view much of the web at various levels of zoom. In particular, I have to zoom (oft mentioned above) Facebook quite a bit.
Luckily Chrome remembers my zoom settings for various sites. Otherwise I’d probably go batty. It’s like a ritual, go to new site, fix font size, read content.
Doing a little math, 12px text at 100 dpi is less than 9pt text. At a reading distance nearly one and a half times what is considered normal for printed matter where 9pt text is acceptable. Furthermore, due to the low DPI of most displays (relative to printed material at 300-600 DPI), typeface details at small sizes are less clear than print as well.
The article’s recommended 16px text is nearly 12pt and the 19px it’s set in is a little over 13.5pt. While these may seem like large sizes, when one factors in the reading distance, the angular measurements are equivalent to 7.68pt and 9.12pt respectively, while 12px is reduced to an unreadable 5.76pt.

FollowTheLIght

sixreffie

Honestly, attempting to read this article with body copy so large made my head hurt, and the shadow on the drop caps made things worse. I’m sorry but I actually find the font choices and styling in this article overall to be awful (my opinion).

I was intrigued because I normally use 13px (which I’m pretty sure I learned from a smashing article a few years back), and some of my clients (mainly the ones who attempt to design themselves and are the worst to deal with) comment that it’s small.

So I went into this hoping to learn something new… I learned not to use 16px for body copy. Never would I want to put my users through that, outside of a welcome paragraph at the top of the page.

-1

448

Subodh Sarkar

I am designing my website. I am trying to find out the best size for the texts. You are 100% correct. If my visitors are in trouble to read the texts, then why should I write the texts?
Thanks for your excellent arguments and working samples.
With best of regards,
Subodh

Matt Woolhuse

I’m calling bullshit!
Here’s another UE guy trying to claim fame and fortune and industry authority.
The larger the font the harder it is to skim the page, because your has to do more work and and it also makes the page longer and that just adds to the scroll time. computers are going to retina as well and in a few years the monitor definition and clarity will be that much better. Not a point for now but just saying.
I’m going to listen to a guy who is wearing glasses and obviously biased.
I’m calling bullshit.

0

452

Steve

I never realized that designers were such a conservative lot! Okay. I knew they were politically speaking (though they don’t like to think of themselves as conservatives, most are neoliberals or libertarians, so vote for Clinton-like Dems). BUT I figured that, surely, designers are open-minded when it comes to design itself, and — since they are designers creating user interfaces, and not artists — I figured that surely designers want to maximize user access and, well, usability. Guess I was wrong about that. These comments mostly demonstrate a stunning degree of dogmatism. Nearly every comment defended the common practice of setting web type at 12px or so. Most of those comments gave no reason at all except “design” (ie: it’s what the designer is used to doing, and used to seeing).

Unfortunately though, the author of this article did himself, and his case, a *tremendous* disservice by choosing to set the article’s type at 19px. And he doesn’t explain this until late in the article, so I suspect most readers assume the article is set at 16px. (It also makes the examples of smaller type look extra-small, which is a bit deceiving, albeit unintentionally so. I think.)

Moreover, while the author goes on about the importance of considering the diversity of users, and how users actually view webpages, the author opts for a rather obscure font to lead his font stack — and it’s his view of that particular font which leads him to set his type at 19px. He explains that he probably would have used 16px in the article had he chosen Georgia or Verdana. Well, I the article is set with Georgia on my PC, and I suspect that’s what many readers see. And Georgia at 19px really truly does look oversized. The author failed to take his own advice when he did not choose Georgia, or another very common font, to lead his font stack (or choose to use a hosted web font service which would guarantee we would see the same font). This really puzzles me because then the author, by his own admission, would have stuck with 16px had he used Georgia or another font with a very large x-height.

(Btw, I suspect the history of web designers having to use Georgia and Verdana is what led most to reduce the default p font size to something like 12px or maybe 14px. The most recent web font releases from Microsoft — the distributor of Georgia and Verdana too — don’t look overly large at all at 16px. Constantia and Cambria look fine, or even a tad small, at 16px …or 1.0em.)

Steve

4

453

Lawrence

This comment (from Steve) absolutely nails it. I too saw the article at 19px and thought I was looking at 16px until halfway through the article. I didn’t dislike the article font at all, but it was a tad larger than necessary – ironically, 16px would likely have been perfect on my display.

That said, I want to echo the call for a truly device-independent size unit (which points would be if browsers didn’t asininely assume 96 DPI) and, absent that, deriving all sizes as percentages from the browser’s configured default – such that the body of the text on the site is 100%. What really needs to happen is for browsers to make it super-easy (and obvious) to set the “base” font and size.

Also, for what it’s worth, the size of the font in this comment-entry textbox is an ungodly 10.68 px. I can’t read it without straining. At least the comments themselves are OK.

Ben

Great article. I’m new to web design. Only been doing it for about 2 years. I’ve known HTML and CSS for years though. But over night I redid my record labels website and made it a responsive design (was before but not perfectly).

I’m in college right now and in english they say when doing a paper the most professional font size is 12px. So in an effort to make my website top notch I made sure all font was Times New Roman 12point. Sadly it was hurting my eyes a bit. I did a quick search on optimal font size for the web and this article was at #1. I comfortably read through it and with quicker speed.

I just changed my site over to 16point font. I fully agree with you.

0

457

Steven

Great, another self-appointed expert looking for fame and fortune through cheap eZine articles. When you build the next Google, Facebook or Amazon etc. that have millions of users then I will listen to your one size fits all view on how everything should be. To me, 16px is far to large but for others it would be perfect but since browsers render fonts differently and different fonts render differently, difference screen resolutions and so on, I will leave it up to my users to decide how large the text should be. This is nothing more than a sensationalist article to try and increase click through rates for his so called free email secrets that no one else on the entire inter webs has found, well done, you have found the holy grail to the internet, have a cookie and while your munching on it, quit being cheap, unoriginal, uncreative and lazy and build a site people would actually use rather than one that looks like a scam.

Louis Sullivan

When all you have is a hammer everything looks like a nail.
In summary of all the comments about this article. The author wants to plug in a one size fits all solution regardless of context (let see his portfolio I say. The proof of the pudding is in the eating) He needs to stop thinking reductively and consider readability in context. Point size must be thought of in relation to x-hight, line spacing, line length, the amount of text on the page and in what medium and function. Context governs appropriateness. “Form ever follows function.” — L.S.

If you all want to learn about type, start by reading one of the many good books about type that are available. Robet Bringhust’s Elements of Typographic Style is recommended reading in most university typography courses and has been for years, for good reason. surveying your audience to make design decisions will never get your work past mediocrity.

0

460

Alipta Ballav

Mrs Dee

Love your article!! I am a 66 year old who loves larger fonts…because I can’t see the tiny fonts a lot of websites use. I am so glad to see it wasn’t all me…it’s a proven fact that larger is better. My other pet peeve is this light gray a lot of web designers are using. I know black can be harsh but it seems like some of them are getting lighter and lighter with there grays, especially with they pair it with a light colored background that makes the gray get lost on the page.

And you are right, the people who need larger fonts to see don’t know about the Ctrl+ to increase the page size. Personally, I use that all the time but I didn’t have to do that with your page. I could see it clearly and enjoyed reading it. I think the size of the font depends a lot on the font style, too. Even though you used a 19 px it probably would have been ok at 16 px because of the choice of font you used.

Those are just some of my thoughts. Thanks for the excellent article.

0

462

rob

I am 56 and prefer not to use glasses to read the web and I totally agree with your article (I think all commenters should state age and whether they have to use glasses to browse so we know where they are coming from). The other thing that annoys me is sites that not only use small fonts but use a light grey to make it almost impossible to read.

0

463

bh2

Here, here! The desire to make pages look “artsy” often trumps well tested comparisons about what works in typography and what doesn’t. (Ask any printer.)

Screening back large, bold lettering in a title header can really improve the appearance of a page so it doesn’t spill too much dead black “ink”. But screening back denser, smaller body text to anything less than pure black on pure white is simply suicidal.

0

464

bh2

The reason for seriphs is to aid the reader with “hints” to quickly distinguish one letter from another where they are similar, which makes text (particularly body text) faster reading. Just as capitalizing a sentence more clearly marks its beginning and speeds reading. (The Romans didn’t spend all that extra time chiseling seriphs into text literally written in stone merely to make the type look prettier.)

The popular adoption of sans-serif for body type on the web has arisen mainly because its (mostly) straight vertical and horizontal lines align nicely with the way pixels are arranged, which allows designers to use finer font weights and sizes. This was particularly true back when monitors were less capable of high resolution. The habit stuck.

Designers design according to their preferences, but readers read according to theirs. If there’s a conflict of preference, the designer looses every time. This obvious wisdom has not yet been received by all designers.

SmashingConf isn't the eighth wonder of the world, but we are pretty close. Join us at SmashingConf Oxford on March 16–19 or meet us at the shores of Santa Monica for SmashingConf LA on April 27–30. You won't be disappointed.