TypographySystem

The Typography System plugin is used to generate a CSS file, which gives developers and designers
a flexible grid structure to hang their design on. The Typography System has these key advantages:

• Relative EM sizing, for better consistency when fonts are scaled by the viewer’s browser.
• Baseline grid compliance for all text elements, which affords visual cohesion and vertical rhythm.

Usage

./script/generate typography CSS_FILENAME BASE_FONT_SIZE BASE_LINE_HEIGHT GRID_COLUMNS COLUMN_WIDTH GUTTER_WIDTH

Examples

Check out the index.html in the examples folder for an example of a layout using the typography system.

Tuning

It’s helpful to be able to toggle a grid on an off to check the position of elements on the page.
Here is a simple bookmarklet you can use to check your elements positions:

Note, this bookmarklet is linked to an image that assumes you are 64×16px grid unit, and therefore
is best thought of as an example implementation.

javascript:void(myDiv=document.getElementById(‘_grid_div_mrb’));void(myBody=document.getElementsByTagName(‘body’)%5B0%5D);if(myDiv!=null){void(myBody.removeChild(myDiv));}else{void(myDiv=document.createElement(‘div’));void(myDiv.id=‘_grid_div_mrb’);void(myDiv.style.background=‘url(http://locusfoc.us/images/64×16.png)’);void(myDiv.style.position=‘absolute’);void(myDiv.style.zindex=‘1’);void(myDiv.style.width=myBody.offsetWidth+’px’);void(myDiv.style.height=‘10000px’);void(myDiv.style.top=‘0’);void(myDiv.style.left=‘1.0em’);void(myBody.appendChild(myDiv));}

Background

Typography is the design and arrangement of text to engage the reader visually, while illuminating the meaning of the text in their mind. Typography is at once an art and a formulaic system, which produces a rich visual landscape of undulating glyphs on a surface; these glyphs form a rhythm for the eye to move with, and enrich the meaning of the text.

Recently, web designers have begun to reexamine typography on the web. This renewed interest is partly due to the new generation of web browsers, which are more sophisticated and precise in their rendering of page markup. Secondly, the typical computer user has a display device which is of higher resolution and quality than just a few years back. As a result of these advancements, designers are beginning to unpack many of the typographic tools and techniques they used in designing type for print.

Beware, even with the new precision of displays and browsers the web is still an inherently variable space, where the interpretation of standards change from company to company and product to product. Many of the major browsers still pick and choose, which markup standards they’ll implement and what their default settings look like. Therefore, web designers still need to tread lightly and remain flexible as they try to implement a more rigorous typographic framework.

This document shows the various ways text can be changed yet remain consistent to the baseline grid. The fonts will be set to a base unit of 12 pixels with a leading of 6 pixels of leading in between lines.

Limitations of this Template

Typography exists to honor text.
— Robert Bringhurst

Beautiful typography is created through the designer’s precise use of text and in the text’s interrelationship with other attributes of the design, including text length, page size, ink color, paper quality etc. Fortunately, for print designers these decisions can be made at the outset of the project, which affords them the ability to count on a measurable level of precision in the printed result. Unfortunately, the same level of precision cannot be assumed for more dynamic mediums like web browsers. The goal of the typography is to respond to and frame the content not vice versa. This template should not be used as a ridged framework, which binds your hands from making choices to benefit the text. Use this template as a scaffold for building your page quickly and then peel away elements of the template, which do not benefit your text.

Calculating Columns

To calculate columns and gutters for a particular screen width
solve for x or y, where
x is the width of the column,
y is the width of the gutter,
a is the number of columns,
and z is the screen width.
(x + y) * a – y = z

Calculating Vertical Rhythm

Vertical rhythm is created by choosing font sizes, margins, line-heights and paddings, which are all derived from the same vertical scale. Correctly chosen values will give your text a syncopated structure, which remains cohesive and readable to the eye. However, even slight deviation from the correct measurements can throw off the text and all the text that comes after. This section explains the process for choosing the correct font-size and margin to allow for precise vertical movement.

When rendered by the browsers margins collapse when they are nested against one another. This means that if you created two sequential vertical paragraphs with a 1.0em border around their parameter, the margin between the two paragraphs would not equal 2em but instead would still be 1.0em. Margins are calculated off of the top and bottom the line-height measurement not the font-size.

Font Size Calculations

Font size is desired size in pixels divided by the base size (or size of parent).

font size: 18px ÷ 12px = 1.5em = font size ÷ base size

Line Height Calculations

Line height is desired height divided by the font size.

line height: 18px ÷ 18px = 1em

Keys To Good Typography

Key points for typography for digital distribution

The following are a list of several of the guidelines Bringhurst provides for his readers. I found these points to be especially relevant when designing for digital formats.

1. Make the visual relationship between the text and other elements (photographs, captions, tables, diagrams, notes) a reflection of their real relationships.
2. Kern consistently and modestly or not at all.
3. Add and delete vertical space in measured intervals.
4. Don’t suffocate the page.
5. Set opening paragraphs flush left.
6. Add extra lead before and after block quotations.
7. Indent or center verse quotations.
8. Don’t compose without a scale.
9. Don’t use a font you don’t need.
10. Change one parameter at a time.
11. Set headings in a form that contributes to the style of the whole.
12. User as many headings as you need: no more and no fewer.
13. In heads and titles use the best available ampersand.
14. Consider the medium for which the typeface was originally designed.

Contributors

Thanks to Gabe da Silveira for pointing out the difference between unitless and unit(full)? line-heights:
http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

Additional Resources

Copyright © 2009 Typography System Mark Daggett, released under the MIT license