Type Units

When you are setting a font-size property in CSS to a number you also have to specify the units (if you set it to 0 you don’t but you’ll rarely need a font-size of 0). The units we will use for this class for the most part are px (pixels) and em (Ems).

Pixels (px)

This is the most straighforward of the units to specify text. They fell out of favor for a while because in IE6 if the font-size is specified in pixels then it won’t let the user resize the fonts in their browser.  This is important because people who have difficulty seeing (and many over 50 do) often resize the text in web sites to make them easier to read.

Modern browsers, including the newer IE versions, now zoom then entire page, text and graphics and so sizing font in px has come back in vogue.

Ems (em)

Ems take the most getting used to. That’s because they are a multiplier. 1.5em can mean different things depending on the context. It takes a bit to explain so I wrote the following to help with that: HowMuchIsThatEm.html

So why would you still want to size in ems? Well besides working in older browsers, they are also the most flexible measurement. If you want to achieve a liquid layout or quickly resize all fo the text on your page then they are the way to go. Also you may inherit a site that was designed using them and need to know how they work.

Here are some other materials to help with sizing text in ems.

EmValueCalculator.xlsx (10.368 Kb) This is an Excel file that helps with the process of picking a default font-size and line-height and then allows you to plug in other sizes in px and it shows you the em equivalent.

Ems and Elastic Layouts
http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
Information on how to use Ems to size text.

http://pxtoem.com/ Pixels to Ems Converter. Make sure you have figured out your base font size first.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>