HTML default sizes for headings and paragraph are a bit large and dull, right? We as web developers and designers need to learn how to correctly adjust font sizes, as most people find the default sizes horrible and unsophisticated.  In order to adjust our HTML page font size we need to implement CSS. With the help of CSS we can control the font size our HTML page content; such as, headings, paragraphs, subtitles, etc. The CSS property that is used to do that is called, font-size. The font-size property lets us adjust sizes in four different ways, using pixels, using percentages, using ems (unite of measurement), or by using keywords. In this CSS tutorial, we are going to learn about the different ways of specifying font-size and the correct way to do it. Let’s get started!

THE HTML PAGE:

First, we need to have a HTML page with some content to stylize. I created a XHTML page with a main heading: <h1>, a subtitle: <h2>, and paragraph tags: <p>.
Also, I linked a CSS file to my XHTML page: <link href=”style.css” rel=”stylesheet” type=”text/css” />.
Let’s take a look at my XHTML page:

Notice that I created a class for the footer; therefore, I can apply a different font size to the footer’s paragraph tag.

ADJUSTING FONT SIZE WITH PIXELS (px):
When we specify font size with pixels we are identifying dots on the computer screen. For example, adjusting a font to 24 pixels means that 24 dots are going to be between the bottom part and the top part of the letter.

Preview in browser:
font-size using pixels preview

NOTES:

  • px must be right before the number; don’t add a space in between.
  • Font specified with pixels doesn’t scale in Internet Explorer.
  • Mobile devices don’t reduce fonts specified with pixels.

ADJUSTING FONT SIZE WITH PERCENTAGES (%):
When we specify the font size of a parent element (Ex. Body) using percentages we are telling the browser to relatively fix the size of child elements (Ex. Paragraphs) For example, adjusting the font size for the body to 80% will make the no-identifying paragraph tags to inherit it.

Preview in browser without body or paragraph font size specified:
font-size using percentages - without

Preview in browser with a body font-size of 80%:
font-size using percentages
Notice how the paragraph inherited the font-size declared for the body.

NOTE: When we specify font-size using percentages, the text will become fully scalable.

ADJUSTING FONT SIZE WITH EM UNIT (em):
Em is a unit of measurement that defines the percentage of a text according to the point size of the current font. Similar to percentages, the em unit tells the browser to relatively fix the size of child elements when a font-size is specified for a parent element.

Because we already have our body font-size specified, let’s specify the font-size for our <h2> tag to 1.5e.m and see what happens.

Preview in browser without font-size specified:
font-size using ems - without

Preview in browser with an h2 font-size of 1.5em:
font-size using ems

Not a big difference, huh? That’s because 1.5em is equivalent to 24px (our h1 font-size).

NOTES:

  • Ems is the best and popular font-size method to use. It is scalable and mobile friendly.
  • Don’t confuse the HTML <em> element with the CSS em measure specification. The HTML <em> element emphasizes text, the CSS em specification adjust font sizes.

ADJUSTING FONT SIZE WITH KEYWORDS:
An easy and quickly way of adjusting font size is with keywords. We can specify font size with the following keywords: xx-small, x-small, small, medium, large, x-large, and xx-large.
According to your browser settings, each keyword will be converted into pixels. Generally, the small keyword is converted around 12px. From there, each keyword declaration is about 20% larger than the preceding size.
Let’s specify our footer paragraph text using the x-small keyword:

Preview in browser without any font-size property declared:
font-size using keywords - without

Preview in browser with the font-size property declared using the x-small keyword:
font-size using keywords

NOTE: Keywords are NOT always converted the same way in every browser or computer.

FINAL TIPS:

  • Remember not to add a space between number and symbol (Good: 10%, Bad: 10 %).
  • Negative font size values are not permitted.
  • Specify the font-size for the body and then fix the font-size of other elements accordingly.

Here is an excellent resource that shows approximately the conversion from points to pixels, ems, and percentages:

POINTS PIXELS  EMS PERCENT
 6pt  8px  0.5em  50%
 7pt  9px  0.55em  55%
 7.5 pt  10px  0.625em  62.5%
 8pt  11px  0.7em  70%
 9pt  12px  0.75em  75%
 10pt  13px  0.8em  80%
 10.5pt  14px  0.875em  87.5%
 11pt  15px  0.95em  95%
 12pt  16px  1em  100%
 13pt  17px  1.05em  105%
 13.5pt  18px 1.125em  112.5%
 14pt  19px  1.2em  120%
 14.5pt  20px  1.25em  125%
 15pt  21px  1.3em  130%
 16pt  22px  1.4em  140%
 17pt  23px  1.45em  145%
 18pt  24px  1.5em  150%
 20pt  26px  1.6em  160%
 22pt  29px  1.8em  180%
 24pt  32px  2em  200%
 26pt  35px  2.2em  220%
 27pt  36px  2.25em  225%
 28pt  37px  2.3em  230%
 29pt  38px  2.35em  235%
 30pt  40px  2.45em  245%
 32pt  42px  2.55em  255%
 34pt  45px  2.75em  275%
 36pt  48px  3em  300%


This table was generated by REEDDESIGN (www.reeddesign.co.uk).

Now you know the different ways of specifying font sizes, which one are you going to use?

Download Source Files