Best Font Size for Web Design

The font size set for a web page can make it readable, usable and accessible, or not.

“A certain trend among designers, believing that small text gives a Web page a sleek appearance and provides more space per “page” for actual content, sometimes results in the use of unreasonably small font sizes.

Unfortunately, this does not go well with the diversity of platforms used to access Web pages, from portable devices with tiny screens to projection devices hooked to computers. And even within a specific platform, text settings may vary.

The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.”

Care With Font Size – W3C Quality Assurance Tips for Webmasters

Setting Font Size

Older HTML editors set font size using the font pair of tags. These tags have been deprecated. The correct way now is to set the font size for your web pages in the stylesheet.

To set the general font size for your web pages you set the size in the body selector of the stylesheet. e.g.:


body {
  font-size: 100%
}

Size: respect the users’ preferences, avoid small size for content

As a base font size for a document, 1em (or 100%) is equivalent to setting the font size to the user’s preference. Use this as a basis for your font sizes, and avoid setting a smaller base font size
Avoid sizes in em smaller than 1em for text body, except maybe for copyright statements or other kinds of “fine print.”

Care With Font Size – W3C Quality Assurance Tips for Webmasters

This same article goes on to explain that setting the font size to a fixed size is not advisable for screen display (the browser). With a fixed sized font:

  • The user cannot adjust the size of the font within the browser to suit their needs.
  • A fixed font size can make the web page content inaccessbile and/or unusable to the visitor.

Once you have set the base font size in the body selector, other HTML element font sizes can be adjusted using:

  • a percentage. This will take (or increase) the font size for the new element setting based on the original size set in the body selector.
  • Using absolute sizes as defined by the CSS specification. These include xx-small, x-small, small, medium, large, x-large, and xx-large.
  • Using relative sizes, larger and smaller.

Don’t Set the Font Size Too Small!

Even if you follow the guidelines set out above, don’t set the base font size of your web documents too small. Website visitors are impatient. If they can’t read your web page on arrival, they will just move on to another website.

This point isn’t just about making your website accessible, people with perfectly good vision will leave the website also.

With so many different sized monitors around and different resolution settings available, there’s just no way you can guarantee that a visitor will have the same set up as you (or your web designer). Making the font size adjustable based on the visitor’s settings is one way to keep the visitor.

Adjusting Font Size

In your browser, you can adjust the font size of a web page if the font size is set as an adjustable size.

In Internet Explorer, left click View, Text Size in the menu bar to see the choices you have for increasing or decreasing the font size on a page.

With other browsers (e.g. Firefox) the user can do the same thing only in smaller increments.

If your font size is adjustable, those visitors who find your web page text a bit too small have to opportunity to use these tools to adjust the text size.

Also with adjustable font size, the size is relative to the user’s settings, meaning if they have a vision problem, they have already adjusted their screen resolution and/or browser settings to suit thier needs. Problem solved, they can read the page when they arrive.

Now you are going to say, but Internet Explorer now has the zoom tool down in the bottom right of the browser window. My reply: What about those who do not have IE7 or newer? What about those who don’t use Internet Explorer? What about those who use mobile devices to surf the web? What about those who have to use assistive technology to read your website?

Don’t you want everyone to be able to view your website?

Further Reading on Font Size

5 Simple Ways to Improve Web Typography

Font Resizing Guidance

What's next?

Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:

33 Responses to Best Font Size for Web Design

  1. dav4is Says:

    Worse than the too-small font, which can be “corrected” with FireFox minimum font size, is the current trend to use low-contrast text, i.e. a gray text that is, for me, impossible to read!

    Why do they do this? What, if anything, is going on in their heads?

  2. Small Business Website Design Says:

    I hate larger font size in the body of the text. Headers are fine but when the body is larger I can’t stand it. Also when it’s times new roman. Hate that too.

  3. Web Page Mistakes Says:

    Those who using low-contrast text, have not considered those with vision problems.

    Effective Colour Contrast

  4. Internet Marketing Services Says:

    The other point is with more browsers these days they have a zoom in and out feature for people who want to read massive text.

  5. Chicago Local Search Marketing Says:

    Nice post, i think this is a great tip. A lot of people have a some very strange conventions on what they believe to be the best font size.

  6. Dorian Says:

    Very good info on this post. I am just redoing my website’s layout and I will implement these suggestions. I had a lot of visitors comming in and leaving too fast. I realized soon that it has tobe the text size.

    Not everybody knows about zooming feature in browsers, and if you don’t use keyboard shortcuts as I do, (Ctrl + or Ctrl -) is anoying to access them from the menu…
    Thanks,

    Dorian

  7. candy Says:

    Quote:Not everybody knows about zooming feature in browsers.

    I agree with you. The most important fact about the font is readability and design. Some people use too small font or some people use strange fonts that cannot be readable.

  8. web design company Says:

    We can make headings and other elements stand out using font size by specifying that headings of level 1 should be say 30% larger than the body text, level 2 should be 25% larger, and so on. Now, regardless of the size that the user chooses for their main text, headings will be scaled to be proportionally bigger than the main text.

  9. deed poll Says:

    I AGREE TO YOU ABOUT THE FONTS!THIS IS ONE OF THE REASON FOR THE FAILURE OF THE WEBSITES DUE TO INAPPROPRIATE SIZE OF THE FONTS USED!

  10. Famous quotes Says:

    Fonts are an important part of a website…they attract and give a good look to websites…it becomes very easy in some cases to read a particular article.

  11. bluetooth headset forum Says:

    Fonts very important for any website!many of us don’t give much more attention towards the fonts size that is the reason we get very short traffic to our website!in my view we should do use of proper & simple size of font size!

  12. Change / Reassign Keys of a Keyboard in Windows Says:

    It’s always a good idea to use percent in setting font size in CSS. So that users can zoom in or zoom out if in case they think that the font is too small or too big.

  13. all inclusive cancun hotels Says:

    Everybody is well known about the fact the fonts size really have a great effect on the sites ,the site having a good & simple font size can only gain very good reputation among it’s visitors!

  14. Soy Candles Says:

    Generally people dont know what is the main reason for their failure of their websites among the visitors so i would say there might be on e of these reasons that they are not having a proper size of the fonts in their websites so that people will not feel the uncomfortable with it !for example recently i visited a site having a lot of shinning fonts just like a lighting decoration & it was very difficult for me to navigate the site to visit the proper page!

  15. Candle Making Says:

    To use percent in setting font is a good idea but using the right font size has been taken for granted in most cases. For usability sake it is important to get the font size right on a web page.

  16. SoyLicious.com Candles Wick-Flame Less Says:

    This is really helpful when doing your own web design and picking a font that is easy to read.

  17. Peter Moss Says:

    The proper use is to use percentages for font sizes and “em”s for any other sizes.

    That is what should happen, sometimes we use shortcuts to get stuff to work and end up having px sizes :-(

    Peter

  18. birmingham hotels Says:

    I never know what to do about my font when it comes to web designs. I guess it’s all about what looks good on the page. You can have something bigger if you want it to be eye catching but nothing massive for reading.

  19. Tobias Says:

    Thank you for this overview. For readability it is really important to use the right font size. The new Google Font Api improves your Webdesign additionaly

  20. Web Page Mistakes Says:

    The Google Font API doesn’t solve all font problems. From the Google Font API site:

    •Works in most browsers.

    Reference: Google Font API – Google Code

  21. web marketing coeur d'alene Says:

    Your choice of fonts and font sizes will greatly affect your site’s popularity, credibility and traffic. I once came across a site which has pretty relevant content but the font used was irritatingly small and loop-ridden. I ended up not reading ’til the end. I’m quite sure I wasn’t the only one who made a complete u-turn out of that site.

  22. AWEsome01 Says:

    Google Font-API is not bad, but the perfomance of the site will not be so good.

  23. Mike Says:

    Yeah, you have to keep in mind the older genereation. I just went through my Dad’s laptop and I saw that he had all fonts to “Large” in Windows and a fairly large font size for Firefox. It’s sort of funny actually.

  24. Jeniva Perez Says:

    The font size of a certain web does not really matter at all. However, if the font is very small then this will cause a minor problem.

  25. Web Page Mistakes Says:

    Font size will matter if you are not making any convertions to a sale because the visitor can’t read your site. Something to consider.

  26. Kevin Thomson Says:

    So many sites have very small font sizes that are hard to read. I prefer bigger!

  27. Allison Clark Says:

    I think its not just the font and the size but the overall layout of the website that matters. Before a magazine is published, it goes through an editor and a layout artist. I think websites need proper layout too to make reading it more effective and easier on the eyes.

  28. Jeff Thompson Says:

    Aside from web font sizes, another common mistake in web pages is the use of inappropriate colors for the font. The webpage won’t be of much use even if the font size is at size 16 when the color does not even allow reader to decipher what they’re looking at. Although highlighting is one of the solution to this, most people won’t know about that way.

    Jeff the Shed Guy
    Project Manager
    Home of the: shed designs

  29. Web Page Mistakes Says:

    Yes colour contrast is important also besides using the right font size.

  30. Jordan Says:

    I couldn’t agree more with you Jeff. The fonts may be a good size but if the website color and look does not appeal to you, people tend to skip them. Guess we all like to look at good-looking, clean websites. Thanks also for the tip on how to adjust the font size in our browser. That will come in real handy.

  31. remodeling Phoenix Says:

    I am currently building a site with an 11px font size as the client specifically asked for it. I think this is too small but at the end of the day I can only suggest a larger size to the client!

    Don’t forget that many people with lesser vision will use say a 17″ monitor with an 800×600 resolution that will effectively make everything on the screen bigger to them. It is unfortunate that resolution changes are not as easy on the new gimmick of TFT monitors.

  32. Javier Pintor Says:

    In my case with the age of 43, the normal size of a font which is 12 is not longer normal to me. I think at my age I need a larger size of font in a site unless I am with my glass. Honestly I am a chrome user for a long time but since I started to have a problem with my sight, a friend of mine advised me to use Internet explorer because it has a capability to adjust the font size for my better view. Also much better if the site owners do not use too small font size and a very dark background for us older people to read the content clearly. Feel pity to us old internet surfer.

Best Font Size for Web Design Was Mentioned Here:

  1. Better Usability Through Consistent Design

Join the Conversation by Leaving a Reply

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> within your comment.

By leaving a comment, you acknowledge that you have read our terms of use.