Typography for the web #1: “Basic Issues: Choosing between px, pt, em, %, and keywords”
Everyone in this class has a basic knowledge of CSS–cascading style sheets, which is the code, kept in a .css file, that, among other things, tells every bit of text on a website how it should look. An example CSS statement for text in a paragraph could look like this:
p {
font-family:"Times New Roman";
font-size: 20px;
line-height: 200%;
color: #333;
text-align: center;
}
Or in plain English:
For all paragraphs on this page, set…
- the typeface to Times New Roman
- the type size to 20 pixels
- the line spacing to double (so, 200% is the same as double-spacing)
- the text color to a medium gray
- and center the text
Choosing your measurement for text
But what many people don’t know is exactly why, in that statement, you would choose pixels as the measurement for your font-size when “em”, “pt”, a percentage, or even a keyword such as “xx-small” could also be used.
So when should you use pixels (px), points (pt), ems, percentages (%), or keywords in your CSS?
The answer has to do with context.
Pixels are absolute measurements, so that in a cascading stylesheet, pixels don’t “cascade”. If you set a parent element (p, for example) to be 12px and a child element (p > p.smalltext, for example) to be 10px, they will be 12px and 10px, respectively, on the nose.
But ems, percentages, and keywords are relative measurements. If p happens to be set in absolute terms like 12px but p.smalltext is set to .8em, p > p.smalltext will be .8 of the size of p (9.6 px). The same goes for percentages.
Why would you use relative measurements like em and %? Because it keeps all of the text in relative balance no matter how it gets resized by the user.
Choosing your measurement for block elements
Text is one thing. But these measurement types play a crucial design and usability role with block-level elements—divs mostly.
It would make lots of sense, and is a best practice on the typical blog design, to have the main-text div have a width that changes as the user resizes his or her screen. (We’ll talk about why this is a best practice in a future post.) You can’t do that with px, but you can with ems and %.
But for the sidebar, it does make sense to keep it a specific width—something you can only do with px.
And to touch briefly on points (pt), they should be used exclusively for your print stylesheet. It’s what tells the printer what size you want the text to be when a webpage is printed in hardcopy, and you don’t want the user to muck with how text is displayed in print.
So to sum up, when choosing pt, px, %, etc., each element of your webpage has its own needs, and you want to choose the right thing for that specific element.
Reference: http://css-tricks.com/css-font-size/
