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:
typography
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

website-typography

u&lc

typography10

typography1

Typography Inspiration

typography examples in print and web media

typography example

typography black

typography background

typography

typography

typography

NewYork Manhattan Typography

national theatre typography: home and beauty

letter l typography

japan typography

death by typography

corpetto azzurro typography

bruce lee

breakfast-at-tiffanys-audrey-hepburn

alex beltechi typography

abc lost poster typography

2011 calendar typography

2010 typography



Typography within websites