Typography... Details, Details, Details
While researching web typography I realized that I take a lot of things about text on the web for granted. I never realized how detailed displaying text can be. There are several factors that must be considered with online text that are not relevant with print media. On the web the shape of a window can change and text can be enlarged. This means text should be flexible. According to "A Practical Guide for Web Typography" browsers are advanced enough now to handle complex rendering of text. With the use of CSS font layout and design has become far more interesting. This site is based on the book Elements of Typographic Style by Robert Bringhurst who is considered an expert on web typography. Most of the examples I will review come from that resource.
I never really considered the benefits of using one way over another for sizing text until reading this tutorial. Points and pixels are absolute units of measurement for fonts, while em's and percentages are relative to the default size of a font. 1 em is equal to 100% or simply the default point or pixel size of a font. Being able to size using em's and percentages is beneficial because visitors to a webpage may choose to scale up or down the text and with CSS, a font size in em's can also scale up where points and pixels would remain fixed. Space between lines can also be defined using relative units.
The use of lots of white space has become trendy in the web design world but is also quite practical. From print media like newspapers white space is used to avoid clutter. Without white space it would be difficult to scan a web page to find headlines or identify paragraphs or different content. It is recommended that web designers format text using appropriate padding, relative to the emphasis of the default font. It is also recommended that between 45-75 characters occur on a line which limits the amount of text on a page, allowing for more white space, and easier reading.
I definitely plan to incorporate both these typography tips into my own web design.
Points, Pixels, em's, or percentages?
I never really considered the benefits of using one way over another for sizing text until reading this tutorial. Points and pixels are absolute units of measurement for fonts, while em's and percentages are relative to the default size of a font. 1 em is equal to 100% or simply the default point or pixel size of a font. Being able to size using em's and percentages is beneficial because visitors to a webpage may choose to scale up or down the text and with CSS, a font size in em's can also scale up where points and pixels would remain fixed. Space between lines can also be defined using relative units.
White Space
The use of lots of white space has become trendy in the web design world but is also quite practical. From print media like newspapers white space is used to avoid clutter. Without white space it would be difficult to scan a web page to find headlines or identify paragraphs or different content. It is recommended that web designers format text using appropriate padding, relative to the emphasis of the default font. It is also recommended that between 45-75 characters occur on a line which limits the amount of text on a page, allowing for more white space, and easier reading.
I definitely plan to incorporate both these typography tips into my own web design.
Comments
Post a Comment