Typography for the web
Companion page in technical skills: Five ways to work with type in web design
The essential elements
- Measure: Robert Bringhurst method is type size x 30.
- Justification: example of left, center, right, justified.
- Leading: example of "14 on 14" compared to "14 on 18".
- Pull-quotes, call-outs, and handing quotes.
- Rhythm
- Headings: override defaults for better proximity.
- Widows
- Font stacks: examples of wide and narrow serif, wide and narrow sans serif, and monospace.
- Font selection: Webfonts (such as Typekit) are changing how fonts are rendered within web browsers.
- Emphasis
- Scale
- Rags
- Combine all of the above in a thoughtful fashion. All of these elements are interrelated. A change in one setting will affect another. Address all of the elements together as a set for successful typography.
- Re-use CSS styles. Use a single external CSS style sheet file that can be linked to all of the web pages within your site.
The goal: readability
Format paragraphs for readability and pages for easy visual scanning. Use leading and spacing settings in CSS to create typographical "textures." Create a single style sheet that can be used for consistent typographical presentation throughout your web site. In commercial projects, a company or product style guide often needs to be emulated through CSS styles.
Other issues
Decide how many fonts are appropriate for your page. Remember that fonts can vary in size, case, style, and color.
Understand the difference between on-screen and print versions of the same content.