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
Copyright © 2005 - 2024 Web Page Mistakes. All rights reserved.
What's next?
Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:
October 21st, 2008 at 8:08 am
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?
November 20th, 2008 at 11:03 am
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.
November 20th, 2008 at 11:15 am
Those who using low-contrast text, have not considered those with vision problems.
Effective Colour Contrast
December 11th, 2008 at 3:26 pm
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.
February 18th, 2009 at 6:38 pm
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.
April 8th, 2009 at 8:14 am
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
April 17th, 2009 at 11:01 am
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.
June 4th, 2009 at 8:55 am
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.
June 12th, 2009 at 5:16 am
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!
June 12th, 2009 at 11:07 pm
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.
June 18th, 2009 at 5:37 am
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!
June 25th, 2009 at 1:47 am
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.
June 25th, 2009 at 5:23 am
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!
June 28th, 2009 at 1:32 am
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!
August 6th, 2009 at 2:28 pm
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.
February 19th, 2010 at 7:49 am
This is really helpful when doing your own web design and picking a font that is easy to read.
March 17th, 2010 at 3:58 pm
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
July 9th, 2010 at 7:38 am
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.
August 10th, 2010 at 1:55 am
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
August 10th, 2010 at 1:15 pm
The Google Font API doesn’t solve all font problems. From the Google Font API site:
Reference: Google Font API – Google Code
August 17th, 2010 at 7:42 am
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.
August 19th, 2010 at 6:50 am
Google Font-API is not bad, but the perfomance of the site will not be so good.
September 8th, 2010 at 8:08 pm
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.
September 10th, 2010 at 2:03 am
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.
September 10th, 2010 at 10:53 am
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.
March 27th, 2011 at 2:53 pm
So many sites have very small font sizes that are hard to read. I prefer bigger!
April 28th, 2011 at 2:43 am
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.
May 2nd, 2011 at 5:23 pm
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
May 2nd, 2011 at 6:11 pm
Yes colour contrast is important also besides using the right font size.
May 19th, 2011 at 8:20 pm
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.
June 6th, 2011 at 6:38 am
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.
August 1st, 2011 at 7:43 pm
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.