Choosing the right size font for a web page

When I design a website I try to use percentages whenever it is possible.
But sometimes my clients insist on using certain size fonts.
I try to explain in plain language as clear as possible choosing too small font ( 10px or smaller ) it is not a wise thing to do. Unless that text meant to be footnotes. Anything on the web less than 12px will cause problem for readability. If the website or the web page is not readable I personally do not even bother to look at that page more than 5 second. And the fact that most people do not also. A text should be readable, if is not readable for all visitors, then do not put it there!

Web browsers renders fonts slightly different than each other, I am not even trying to explain here how differently browsers display fonts. That is a whole different subject to talk about, which I wrote about it previously. What you see as Font Tahoma on Safari, looks a bit different on Internet Explorer. However with CSS you can use scalable percentages to read the font comfortably in every browser as well as different devices, such as mobile, tablet, laptop or desktop.

A few golden rules should be followed for website design:

  1. Never use too small fonts ( unless the text meant to be footnotes )
  2. Never use fonts similar color to page background. Such as on a black page background with dark grey text. Or a white page background pale yellow, grey, blue fonts, they are not readable, it should not be used!
  3. Never use small cursive fonts on the web.
  4. Avoid using fixed size fonts. Especially  paragraphs should not be smaller than 12px!

 

Using scalable percentage base CSS font is the right thing to do for designing website.

CSS Font Size Options

Font value alternatives for sizing:

percentages (%)
pixels (px)
picas (pc)
points (pt)
keywords (xx-small, x-small, small, medium, large, x-large, xx-large)
em ( ems) “Ems” (em): The “em” is a scalable unit that is used in web document media.
ex
inches (in)
centimeters (cm)
millimeters (mm)

What about images then? If there is an image behind the text, most logical thing to do, make sure the text is different color than the image, so it can be readable. If the text gets lost in the image, then there is not much reason to put it there.

For instance if you have a landing page and all you want when the visitor comes click on image buttons to choose where to go, then make sure those buttons are big enough to read.

Creating a button with CSS is trivial, you can have hover effect, text color change etc. Creating the button from an image is not that best way to go. Why? Because CSS buttons will supply consistent look and effect across the browsers and devices. Versus to an image button when it scales ( for instance on an iPad mini, or iPhone) will not be readable. If you make the button too small then on a large desktop computer the button will look ridiculously small.

Using percentage based CSS buttons, div tags will always give better result for website design.

Here are the sample text using as buttons on a black page background:

 

As you can see the gif image with blue text on a black page background looks too busy.
ems and percentages are the good choices to use scaleable fonts on the web.

Em:

An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, Ems are commonly used in web documents due to scalability and their mobile-device-friendly nature

Percent (%):

The percent unit is the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, the text remains fully scalable for mobile devices and for accessibility..
As a result with relative values (defining em or %), the font size, line-height and margin spacing can be inherited with CSS. Therefore by changing the font size it can be changed all descendant elements for instance defining that particular word or sentence X-Large you make the text large size. The CSS will like this: div
{
font-size:x-large;
}

Or you might use this:

div
{
font-size:150%;
}

You can define the font size with CSS percentage value (%);

h1 {font-size:200%}
h2 {font-size:180%}
h3 {font-size:160%}

p {font-size:100%}

Using  valid CSS options for setting font-size on a web page can take care of all browser sizing issues. Just simple defining fonts  with these keywords; xx-small, x-small, small, medium, large, x-large, and xx-large as well as relative keywords smaller and larger.

I also like nice CSS trick unbreaking text.

You can force unbreaking text (for instance a long URL text) to wrap instead of running in a single line.

Just simply add:

.break-word { word-wrap: break-word; }


As you can see using CSS codes is nice and easy  solution.

Keep in mind that the font-size property is supported in all major browsers.

xx-small : Sets the font-size to an xx-small size

x-small : Sets the font-size to an extra small size

small : Sets the font-size to a small size

medium : Sets the font-size to a medium size. This is default

large : Sets the font-size to a large size

x-large : Sets the font-size to an extra large size

xx-large : Sets the font-size to an xx-large size

smaller : Sets the font-size to a smaller size than the parent element

larger : Sets the font-size to a larger size than the parent element

length : Sets the font-size to a fixed size in px, cm, etc.

% : Sets the font-size to a percent of the parent element’s font size

inherit : Specifies that the font size should be inherited from the parent element

Please share it
Email this to someoneShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedInShare on Facebook