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



Typography within websites

Typography within websites




Typography

Typography is the art and technique of arranging type in order to make language visible.

Good design just works

Find out more

Projects

Designed with emotion

Ideas

Your ideas are important to you. Let's make it happen.

Find out how

How

Starting with a project definition