Typography within websites

Ems and Percentages are considered the "best" units for sizing fonts and layouts in CSS. They do not have the disadvantages of UsingPixels and UsingPoints. They are resizable in all Web browsers that support resizing, they are specified relative to the user's font size preferences, and can therefore adapt to the viewer's screen.

A word of caution concerning Internet Explorer

Be careful using ems. InternetExplorer for Windows flummoxes text in descendants of body which have a font-size set to less than 1em ("0.5em", for instance). Please note that this applies only to the font-size (FontSize) and line-height (LineHeight) properties. For all other properties for which ems are suitable (margins, padding, width and height, among others) the bug does not apply. Note that even though em and percent are theoretically just two different nomenclatures for specifying fractions, the bug does not apply to percentages, since they are calculated according to the dimensions of parent elements.

The other problem with ems in IE is the resizing of them. If for instance you set the root element (either or) to font-size:1em, then just setting View > Text Size to "smaller" can cause the text to become unreadably small. The solution to both IE problems though is simple...

Ems with Percents

If you set:
body { font-size: 101%; }

Then you can use ems in the rest:

p {
font-size: 1.0em;
line-height: 1.3;

This stops IE from going micro (keeps the text more or less legible when the user sets his/her font size to smallest...), from the [Sane CSS Sizes] page.

typography10Typography added with a beautiful poem by John Donne:

"No man is an island, entire of itself;
every man is a piece of the continent,
a part of the main.
If a clod be washed away by the sea,
Europe is the less, as well as if a promontory were,
as well as if a manor of thy friend's or of thine own were:
any man's death diminishes me,
because I am involved in mankind, and
therefore never send to know for whom the bells tolls;
it tolls for thee."

John Donne Devotions upon 1624

View previous coverage about typography: 1 / 2 / 3 / 4 or refresh the site.

Typography Gallery

typography black

jay z typography

typography example

bauhaus graphic design with advanced typography




2011 calendar typography

Typography Inspiration




beautiful typography

typography background

corpetto azzurro typography

alex beltechi typography


death by typography

typography examples in print and web media

japan typography

bruce lee

NewYork Manhattan Typography

national theatre typography: home and beauty

2010 typography

abc lost poster typography


letter l typography


Typography within websites