Max Kiesler - Designer
The Web 2.0 Big Font Controversy
SubscribeMonday, March 27, 2006
Do you ever wonder why many of the new websites you go to have giant high-contrast fonts? Extraterrestrials, a clan of very elderly web designers, or maybe it's just a bunch of punk kids that are trying to be trendy? While in some cases any of these may be true, I would argue the real culprits are designers who base their typographic decisions on research (hopefully).
Contrary to popular belief most well trained web designers look to HCI and UI readability research to determine typographic choices for a website. Currently there's a trend in web design to use large, high-contrast fonts. I follow many blogs and social bookmarking sites that report on next generation websites. One comment that I see time and time again is something to the effect of, "you really really need to decrease the text-size. What's up the giant font?" I have more own reasons for using larger font sizes on my blog, and since there were so many of these comments (on my site and others) that I finally wanted to look into and share some of the research on this very subject.
In many ways, I believe the recent use of larger high-contrast fonts is a direct reaction to the last font trend in web design. The small low-contrast font movement began with the advent of CSS because it became to easier to style fonts and create a variety of text treatments. While web designers had always used small and low contrasts fonts as an effect, particularly in art sites, the movement really took off using CSS for blogs (eg. Zeldman) and other dynamically-generated sites that used stylesheets. Interestingly enough, this paradigm became prevalent at the same time as web standards which preached the opposite - that fonts should be readable and not low contrast, or at least offer a CSS switcher to a high contrast version. There are other design trends in the last few years that have influenced the current shift. In her article, "Design 2.0: Minimalism, Transparency and You", my partner Emily Chang writes about a shift away from clutter in favor of simplicity, usability, and minimalism.
In Jakob Nielsen's article, "Top Ten Web Design Mistakes of 2005" he states, "bad fonts won the vote by a landslide, getting almost twice as many votes as the #2 mistake. About two-thirds of the voters complained about small font sizes or frozen font sizes; about one-third complained about low contrast between text and background." While I don't always agree with everything Mr Nielsen says about web design, his studies are a great look into a large group of users. Personally, in this case I couldn't agree more with his findings. Many times when I'm on my laptop I find I have to toggle away the stylesheet in order to read the content. From Jakob's study it seems as though a majority of web surfers agree that readability and small font size is an issue.
In 2000, Michael Bernard & Melissa Mills of the Usability Research Laboratory at Witchita State University did a study titled, "So, What Size and Type of Font Should I Use on My Website" which looked at several points including, font type, size and aliased vs non-aliased. The most popular font size was 12 point, however, you have to remember that the study was done in 2000 when the most popular screen resolution was 800 x 600.
According to OneStat.com, the current most popular resolution is 1024 x 768 with 57.38% of users. The next is only 18.23%. I would argue that if the most popular font size was 12 point in 2000, then the current best size would be at least 14 point if not 1 em or 16 point. This is because the other 20% of users in the OneStat.com statistic were at resolutions above 1024 x 768. The web 2.0 trend of 16 pt font does have a basis.
With screen resolutions of 800 x 600 still at nearly 20% of the market, designers should provide and easy way for surfers at lower resolutions to easily switch to another size font. Zeldman and Nielsen have both been proponents of a CSS style switchers which is just a link that switches the stylesheet. Not every web surfer knows how to decrease their font size in their browser so this is the best way to ensure readability for everyone. Also, always use percentages or em's as your font type so your font can still be resized in the browser if necessary.
in conclusion, larger and high contrast fonts can increase readability, usability and the age range of surfers who visit your website. If large fonts are used it is a good idea to include a style switcher for people with different screen resolutions. I have to admit that I am guilty of not doing this myself and will be implementing a style switcher soon.
If you know of any research or have any opinion that supports or contradicts this article please let me know in the comments section of this post. Either way, everyone benefits.
Comments on this post
Apreche on 03/27 at 07:38 AM
I don’t really have a problem with small fonts on websites. That’s because in any modern browser you can change the font size on your own. In Firefox you can hold down ctrl and flip the scroll wheel to change the font size. There are also keyboard shortcuts and menu options which have the same effect.
What’s most important when making fonts on a website is that when someone changes the font size in their browser the site doesn’t fall apart. Too many times I visit a site and make the font a little bigger and the site becomes unreable. No site will be able to withstand making the font 5 or 10 times larger. But if the layout of the site is totally destroyed by a slightly larger font setting in the browser, then that is bad design.
On my website I set the font to a size where I can read it comfortably in a default Firefox at 1280x1024. If you can’t read it, change your browser’s settings.
Jacky on 03/27 at 08:39 AM
You should also consider the size of the Monitor. It’s cheaper to buy a 17’ or even 19’ nowadays. So, if using a 17’ + 1024*768, the actaul font-size apparent to people would be similar to a 15’ + 800*600
P.J. Onori on 03/27 at 01:37 PM
You bring up some really good points. I do agree that some of the force behind the big-font trend is a trend backlash. I also do respect the fact that readability is a large concern. My opinion is that there needs to be a good balance between readability, aesthetics and screen real-estate. We all know about the studies that have been done showing the vertical scrolling is not looked well-upon by the average user. This may be less relevant in the case of a blog article…
Part of designing in the web medium is to accept that your site is going to be a slightly different visual experience for almost all of your users (browser, platfrom, size of monitor, resolution of screen, monitor color settings, etc.). Because of this, I went the em route and allowed users to increase the font size manually if they so desired.
Charlie on 03/28 at 06:50 AM
I think your site would be more readable with smaller fonts. But that’s just me.
sebastien billard on 03/31 at 05:37 AM
Concerning contrast : contrast improves readability, though maximum contrast (pure BW) tend to generate halo/glaring effects, see http://psychology.wichita.edu/optimalweb/older_adults.htm
So it is good to make backround a little darker or fonts a little brighter
I did wrote an article about these questions, but it is in french :
http://s.billard.free.fr/referencement/index.php?2005/07/03/103-contraste-et-lisibilite
Ganesh Iyer on 04/01 at 03:57 AM
Hello,
Well I dont agree with you much. I mean large fonts do look good but on low content sites, sites which have huge contents(blogs etc) should stick to smaller(around 80% in firefox cuz I define fonts in % :/).
I found it very much difficult to read your site until I decreased the font size through my browser.
I think what designers should keep in mind is that their design should not break when the fonts are resized in a browser, oversizing them aint that necessary.
Timo on 04/11 at 07:43 AM
Sorry but in my opinion as a classic Typographer from Germany (please excuse my bad english) is also that the Big-Font Trend is the wrong kind of hype. Readability always is a matter of reading-experience. And reading is learned on paper 
. I would say that a good font is better than big types because it becomes difficult to get the shape of a whole word. You see Letters not words. On your site i would first of all increase the line-height because it’s really verry difficult to hold the line when reading this site. The font-size is also difficult but…
And on the other Hand i think it’s true that black to white is a too hard contrast for reading (i think). That’s just because modern Monitors shine verry bright i would prefer #333 to #FFF because that’s just like black Type on Paper.
And by the way the best Test for Reading-Typography is to read the text! (A Text you don’t know!
Love your Website!
Benjamin on 04/11 at 08:21 AM
It seems big fonts are being used to simply make POINTS. And by POINTS, I mean $.
Marco on 04/11 at 05:04 PM
i’d like to quote Timo, he said exactly wait i thought when i was reading this article… big font doesn’t mean more readable… more readable means the best aspect ratio between font height, font “weight” and interline. In italian we call it “giustezza”, i don’t know the english for.
Hanz on 04/18 at 05:27 AM
Personally, the font size being used on this page is “readable”. I mean , a big font is always better than a small font. So, big or small fonts?? It depends upon the website. As stated somewhere above, blogs use small fonts since it’s more suitable in terms of design and information display. Imagine a blog or a forum using a big font, that would be a real mess. So, it depends on the content of the website. Somehow, I was amazed and pleased to see this website using this kinda font. It makes it really different, and I think it really fits with the content. One thing is that, maybe you should it with another background color, #ededed for example. The white background is a lil’ bit too bright. Cheers
Simon Cox on 04/19 at 04:53 AM
This site is eminently readable, though I found that I kept having to wheel my chair back toward my desk to scroll down the page and then move back out to the comfortable reading positon some yards away. I could invest in a remote keyboard and mouse which would help, though it does feel a bit odd stranded out in the middle of the office.
The other aspect of large fonts on a site is that collegues can read what’s on your screen easily and it makes it difficult to justify visiting certain sites as they may not appear to be work related (obviously when I visit such sites I am looking at the interesting source code but it is sometimes difficult to persuade my collegues that its is for research...). To counter this I have to dim the screen so that the big font sites are just readable. More sites should have screen dimming switch code.
azahari on 05/03 at 01:14 AM
In my non-professional opinion, I honestly think that your website will be more readable if the font size is a bit samller..but then again, maybe it’s just me :D. For me, I fancy designing web with font size of 10-14 for body size, any size larger than that will be the headings.
Gillian CS on 05/15 at 11:21 AM
I agree with those who would prefer a smaller font. Readability isn’t just about size of font, as you can see if you just reduce the size in the browser: the line length needs to be reduced and the interline leading increased. Because the eye’s flexibiity is finite, some aspects of size are absolute, not relative. Spacing—between letters and lines—is one of these. If you increase these in proportion they look too tight at small sizes and too loose at large sizes. This is why in metal type each size was designed separately.
The Doc on 05/17 at 09:42 PM
I personally don’t like fonts that big, for instance in your blog. But it’s trendy, and that sells, so eventually everywhere people will turn their sites to the new standards… I guess in the end, as always, it’s whatever is used most that sets the standards…
Harry Maugans on 05/28 at 08:11 PM
I tend to agree with the few commenters above me. I prefer websites with smaller fonts.
Bigger may be different and “easier to read”, but when you take into account the additional scrolling involved, it’s counter-productive.
Rainer Eschen on 06/12 at 09:00 AM
When I worked at Sun in 2000 I realized the first time how important font size is. I remember that the Unix workstations used resolutions beginning with 1280x1024. If you have in mind, that Unix renders its fonts differently in the Web browser, you can imagine how horrible it was to have a look at a “Windows-ready” designed Web page (of course without the possibility to change the font size). None of these pages was usable (in difference to readable 
).
Since then I designed every site with fonts starting with 12pt. On Windows systems it looked always different. But, this design worked on non-windows platforms, too. Reading all the comments against big fonts: I hope you have tested such “Windows-ready” pages on other platforms, too. If not, you don’t know what you’re talking about. Sorry.
Dave Atkins on 06/28 at 03:26 AM
This is all very frustrating to me. It just illustrates that almost no one knows how fonts should work, and this needs to be fixed. Also, web standards provide mechanisms for portable text, that are largely ignored.
This statement really gets me going: “The most popular font size was 12 point, however, you have to remember that the study was done in 2000 when the most popular screen resolution was 800 x 600.”
The point size of a font should not change based on screen resolution. When we talk about points, we are talking about a physical measurement. It’s the equivalent of saying my 2 inch square, is bigger on my other monitor. No, a 2 inches is 2 inches.
12 point text, should be the same size regardless of the screen resolution. The only factor affecting readability should be dot pitch (DPI), and visual accuity of the viewer.
The problem is most users don’t bother to setup their displays correctly (unless they are using a mac or unix), and web developers bypass users’ presentation control.
Any measurement in HTML and CSS can be given in em or text elements. An em is the width of the average character at the viewers font size. This allows me to control presentation of my page and place content where I want it, and it allows my viewers to control how the page is scaled.
CodeNote - Notepad for Developers on 06/29 at 06:15 AM
Cool,The Web 2.0 Big Font Controversy.
Annika on 06/30 at 01:17 AM
I think most people forget line-height.I find your site hard to read due to the close spacing of the text lines. A smaller font with an increased line-spacing would make it much easier on the eye.
If you look at well executed print design, fonts can be quite small but still comfortable to read due to generous line-spacing.
Of course, in web design, the percentage of spacing needs to be balanced so it doesn’t look weird when increasing or decreasing font size.
Cat Laine on 07/01 at 11:53 PM
Ditto on annika’s comment. Set line-height to 1.8em or something. The text is a bit hard on the eyes at the moment.
Harvey on 07/04 at 11:56 PM
I’m finding I’m liking blog style layouts more and more, while liking portal style pages less and less.
Blog style with content on the left + a small sidebar (like this site) means you aren’t having to think about where to read. With this simple layout, you can get away with large fonts, plenty of line height, and lots of whitespace around the headings. Works for me.
William on 08/28 at 11:14 AM
I’m a web user since Netscape 1.0.
The changes I’ve seeing on webdesign shows that we are in fact going to the right way. It feels good to me to read nowadays sites. Because of the existing time of WWW, people can gather lots of experience and statistics about what seems good or bar to the masses. It’s sort of an evolution.
Joe on 09/22 at 08:05 PM
I also think from smaller font to Bigger font is an evolution Bigger fonts is easier to read for all people,just only for some good eyesight people.
Shops on 10/09 at 04:39 AM
As screen resolutions got better designers started to make fonts smalle rto fit more on the screen and you could still see it ok. As screens are now getting bigger - people tend to sit further back from the screen. If there is too mcuh text on the screen, it mnakes it hard and boring to read anyway.
v.baskar on 10/09 at 06:51 PM
The fonts insisted by web designers are small and People who see at a Glance/
But many people prefer the sizes are readable with min 11PX and line height not less than 17 px
Which is better
Any way this is interesting
vb
http://www.e-worshippers.com
Movies Point on 11/27 at 11:52 AM
Movies PointPierce BrosnonTom HanksStacy KeiblerJulia RobertsMichelle BranchAishwarya RaiAdriana LimaAnna KournikovaJessica AlbaJennifer AnistonDemi MooreAshley JuddSydney MoonHeather GrahamBrooke BurkeCatherine Zeta JonesCeline DionChristina MilianCharlize TheronCarmen ElectraKobe TaiKaren McdougalKate BeckinsaleKate WinsletGwen StefaniCindy MargolisJaime PresslyJill KellyLindsay LohanDrew BarrymoreToni BraxtonJanet JacksonBriana BanksTATUTraci LordsMadonnaRachel HunterJennifer LopezMariah CareyParis HiltonAlyssa MilanoShannon ElizabethCherNicole Eggert
online datinge on 11/27 at 11:53 AM
Online dating, Free Online Dating,for singlesOnline Dating Services,with new peopleOnline Dating Games,fun gamesOnline Dating Sites,best online dating sitesBookofmatches Online Dating,Christian Online Dating,Christian SinglesAmateurmatch Online Dating,Online Dating Tips,tips newsletterOnlinebootycall Online Dating,Loveaccess Online Dating,Lesbian Online Dating,Lesbian and Gay DatingBlack Online Dating,black dating on googleOnline Bootycall Online Dating,Eharmony Online Dating,Online Dating Websites,also used by MSNTotally Online Dating,totally free dating serviceVahoo Online Dating,online dating with Yahoo!Truebeginnings Online Dating,Advantages Online Dating,Gay Online Dating,
Health Insurance on 11/27 at 11:54 AM
Health Insurance, Aetna Health Insurance,Health Insurance Quotes,Wiz provides free health care insuranceAffordable Health Insurance,Humana Health Insurance,Individual Health Insurance,Aarp Health Insurance,MSN Money InsuranceHealth Insurance Companies ,Cheap Health Insurance,Oxford Health Insurance,Oxford Health Plans of ConnecticutBlue Cross Health Insurance,Health Insurance Plans,California Health Insurance,Cigna Health Insurance,Blue Cross Blue Shield Health Insurance,Yahoo! reviewed these sitesLow Cost Health Insurance,affordable health insuranceSmall Business Health Insurance,Google Directory of Health InsuranceSelf Employed Health Insurance,Mega Life And Health Insurance,MEGA LIFE AND HEALTH INSURANCE COMPANYMassachusetts Health Insurance,Student Health Insurance
Movies Point on 11/27 at 11:55 AM
Movies Pointbrandom routhArnoldVan DammeChristian BalePierce BrosnonVin DieselJim CareyGeorge ClooneyElijah WoodHoward SternOrlando BloomJohn TravoltaTom CruiseRicky MartinJet LeeBruce LeeJackie ChanJude LawBrandon RouthGood CharlotteBen AffleckAntonio BanderasBrendan FraserKeanu ReevesMr. TRobert De NiroMel GibsonVal KilmerAshton KutcherMichael JacksonJohnny DeppRobin WilliamsJustin Timberlake50 CentRussell CroweBruce WillisBrad PittBan MergeraOliver MartinezWill SmithAmitabh BachchanAdam SandlerLeandardo De Caprio
Michelle on 11/29 at 03:53 PM
I’m coming to this blog post many months after the initial responses. (It shows the value of blog archives) I came here because I am looking to get educated about this issue from the technical, disabled and policy perspectives for two reasons. Our org is working on new consumer sites and the recent case law “National Federation for the Blind v. Target Corp. and Its Potential Impact on Web Sites and Services”
Additionally, and importantly, I have a unique perspective. I am a web content manager and my Mom was a low vision users. She had macular degeneration and could “see” but needed to make the font incredibly large to do that. I did usability tests with her and can tell you screen magnifiers are one thing, but if you are trying to reach senior with low vision, it’s hard for them no matter what.... and those magnifiers do get expensive… the menus are hard for some to use and remember—much less see it all…
What I would like to see as an advocate of low vision users AND a Web Content Manager—is ONE STANDARD EASY TO SEE ICON (like RSS, though there are more than one of those too!) The user could ‘see’ it and click on it invoke the style switcher into a low vision, one column page.
WOW, what a value. She would have used that Web site ALL the time.
On the other hand, as a Web person, (though not a techie like a lot of you here) I understand many issues involved with actually implementing style switcher programming onto a Web site etc. A lot of dymanic database driven apps can’t do this easily.. etc.
Anyway, thanks for this blog. Was helpful.
child on 11/29 at 08:28 PM
child, Child Abuse,Child Support,Child Development, Child Labor,Child Care,Child Protective Services,Destinys Child,Child Molesters,Child Psychology, Child Custody,Child Birth,Child Labor Laws,Child Abuse And Neglect,Child Stars,Bangbro Com Your Child,Child Health Plus,Child Obesity,The Golden Child,Mothers Day Poem From Child,Mother And Child,
Tourism Udaipur on 11/30 at 05:23 AM
Travel Information Udaipur, Tourist Palces in Udaipur, Tourist Places india,Places to see Udaipur,Transport Udaipur,How to reach Udaipur,Hotel Information Udaipur, Hotels Udaipur,Food Junction Udaipur, Restaurants Udaipur,Shopping in Udaipur ,History of Udaipur,People of Udaipur,Culture of Udaipur,Important Contacts Udaipur,Udaipur Weather,How to Reach Udaipur ,Hospitals in Udaipur,Travelling tips Udaipur,
Mehendee on 11/30 at 05:25 AM
Mehendi, Henna Herbs, Henna Plant,Lawsonia Inermis,smooth lawsonia, lythraceae plants wholesale, al-khanna, al-henna, jamaica mignonette, indian henna leaves,Black Henna,red Henna,Natural Henna,herbal plants exporters, herb plants, herb seeds,Bridal Importance, Mehendi Desigens ,Importance of Mehendi,Henna ,traditional medicine henna, Henna as Medicine,henna plant, lawsonia inermis, mehndi henna,Ayurvedic henna,Ayurvedic henna, Mehendi use ,henna plant, lawsonia inermis, mehndi henna ,
Tourism Jaisalmer on 11/30 at 05:27 AM
Travel Information Jaisalmer, Tourist Palces in Jaisalmer, Tourist Places india,Places to see Jaisalmer,Transport Jaisalmer,How to reach Jaisalmer,Hotel Information Jaisalmer, Hotels Jaisalmer,Food Junction Jaisalmer, Restaurants Jaisalmer,Shopping in Jaisalmer ,History of Jaisalmer,People of Jaisalmer,Culture of Jaisalmer,Important Contacts Jaisalmer,Jaisalmer Weather,How to Reach Jaisalmer ,Hospitals in Jaisalmer,Travelling tips Jaisalmer,
Tourism Lucknow on 11/30 at 05:27 AM
Travel Information Lucknow, Tourist Palces in Lucknow, Tourist Places india,Places to see lucknow,Transport lucknow,How to reach Lucknow,Hotel Information Lucknow, Hotels Lucknow,Food Junction Lucknow, Restaurants Lucknow,Shopping in Lucknow ,History of Lucknow,Awadh Rouls ,People of Lucknow,Culture of Lucknow,Important Contacts Lucknow,Lucknow Weather,How to Reach Lucknow ,Hospitals in Lucknow,Travelling Rips Lucknow,
Tourism Varanasi on 11/30 at 05:28 AM
Travel Information Varanasi, Tourist Palces in Varanasi, Tourist Places india,Places to see Varanasi,Transport Varanasi,How to reach Varanasi,Hotel Information Varanasi, Hotels Varanasi,Food Junction Varanasi, Restaurants Varanasi,Shopping in Varanasi ,History of Varanasi,People of Varanasi,Culture of Varanasi,Important Contacts Varanasi,Varanasi Weather,How to Reach Varanasi ,Hospitals in Varanasi,Travelling Rips Varanasi,
voip word on 12/01 at 06:38 PM
voip world, Voip ProvidersVoip PhoneFree VoipVoip ServiceVoip Stuntvoip pbxVoip BusterYahoo VoipVoip ReviewsVoip CheapVoip Phone ServicesVoip WhyVoip Solution Att VoipVoice Over Ipvoip TechnologyInternet TelephonyVoice Over Internet ProtocolIp Telephonyvonage
Online Casino on 12/02 at 10:31 AM
Online Casino, Online Casino Games,Free Online Casino Games,Real Vegas Cnline Casino,Online Casino Reviews,Online Casino Gambling,Online Casino Blackjack,Online Casino Bonus,Royal Vegas Cnline Casino,all slots Online Casino,Grand Hotel Online Casino,Golden Palace Online Casino,Club Player Online Casino,Las Vegas Online Casino,Online Casino News,River Belle Online Casino,Carnival Online Casino,Platinum Online Casino, The Gaming Club Online Casino,Top Online Casino,Online Casino Free Bonus,
photographs on 12/02 at 10:32 AM
Photographs, Aerial photographs,use of aerial photography Spencer tunick hotographs, Ipg photographs,IPG is the place for youBlack and white photographs, Famous photographs,Google Sonic famous photographs Man ray photographs,Man Ray: Photographs, Paintings Diane arbus photographst, Satellite photographst, Photographs lyrics,Needs of Pictures Lyrics Ghost photographs,ghost. Add to My Yahoo Wedding photographs, wedding and special event photography David hockney photographs , Tornado alley photographs, Selling photographs,Selling Photographs OnlineOld photographs,old photos. on MSN Baby photographs,your baby photographs this way Civil war photographs,Civil War comments Nickelback photographs lyrics, Robert mapplethorpe photographs,
Mental Health on 12/02 at 10:32 AM
Mental Health, National Mental Health Association,National Mental Health Day,Department Of Mental Health,Mental Health Jobs,Mental Health Disorders,Mental Health Act,Canadian Mental Health Association,California Department Of Mental Health,Mental Health Issues,Magellan Mental Health,National Institute For Mental Health,Mental Health Services,Mental Health Counselor,Mental Health Nursing,Mental Health Assessment,Mental Health Facilitics,Value Options Mental Health,Mental Health Center,Los Angeles Country Mental Health,National Center For Mental Health Philipines,
Tutorials on 12/02 at 10:35 AM
Tutorials, Photoshop tutorials,,Flash tutorials,adobe photoshop tutorials,free photoshop tutorials,html tutorials,3ds max tutorials,good tutorials,3ds studio max tutorials,maya tutorials,illustrator tutorials,c tutorials,dreamweaver tutorials,adobe illustrator tutorials,myspace tutorials,visual basic tutorials,flash web design tutorials,flash 8 tutorials,php tutorials,brilliant tutorials,anime drawing tutorials,
The Geek Guys on 12/18 at 04:23 PM
I think fluid layouts are pretty much the way to go. If you want to reach both extremes of the scale.
Joel on 10/23 at 12:26 PM
seriously what is the big deal? I think all these geeks that have been writing code forever need to wise up. Websites are becoming more visual and more like print media. AMEN to bigger fonts.
alex on 11/08 at 02:39 PM
You can double the font size all you like, but line-spacing is what really increases readability. That and serifs.
Search
Home | DesignDemo | VizList | mHub | About | Contact | News
Max Kiesler is an award-winning strategic designer and co-founder
and principal of Ideacodes.com, a web consultancy in San Francisco
focused on next generation websites. About Max...
This work is licensed under a Creative Commons Attribution 2.5 License