CSS Units of Measurement for Font Sizes

 

There are four units of measurement in CSS:

 

 

Points

Example: font-size: 12pt;         

 

This is the default font size in most browsers as is for Microsoft Word.

 

Advantages:
Documents intended for printed media will be able to tell the device exactly what the intended size is for these units. Documents designed to be displayed primarily on the web should avoid using these units.

 

Disadvantages:

  1. Users can’t resize the font using their browsers. This is an accessibility issue. 
  2. These units are print media units of measurements. Digital displays, however, will have to guess arbitrarily, how to convert these units into pixels, and there is no real uniform way of doing so. Macintosh and Windows computers display points differently because the two machines have a different DPI. The “points” font unit is NOT resizable with the browsers.

 

 

Pixels

Example: font-size: 12px;

 

Advantages:
Pixels give you exact control over the size of the element, allowing you to make exact calculations of width and height for your design.

 

Disadvantages:

  1. Users can’t resize the font using their browsers. This is an accessibility issue.
  2. When it comes to print media, pixels have no real value and it's up to the device to guess what you meant in terms of physical size.

 

 

Percentage

Example: font-size: 120%;       (120% of the default font size)

 

When assigning percentage units to the font-size or line-height properties, they act like
the Em unit, where 100% equals 1em. 

 

Advantages:
Users can resize the font using their browsers.

Disadvantages:
Resizing the font size by users will affect the look of the layout as some

paragraphs might not fit in their table cell or <div> box.

 

 

 

Ems

Example: font-size: 1em;         

 

Ems is relative measurement unit. One Em (1em) is equal to the height of the capital letter "M" in the default font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. Ems are set to decimal units, like 1em, and 0.9em.

 

Advantages:
Users can resize the font using their browsers.

Disadvantages:
Resizing the font size by users will affect the look of the layout as some

paragraphs might not fit in their table cell or <div> box.

 

 

What is the Best Font Size Unit to Use?

 

The W3C recommends using percentages or ems. This way, you’re not affecting the usability or accessibility preferences of readers. Please keep in mind that percentage and ems units are relative units which allow resizing web pages and creates fluid layout that might cause distortion of the web page layout.  If the layout of the page is important to you or your client, might then use pixels.

 

 

Examples:

 

Font Measurement Units

 

Disadvantage of ems

 

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>