This page is now deprecated. Please refer to the Thesis Skin $typography object for current functionality.
The Thesis Typography API is a tool for calculating the typography and spacing for any design. Specifically, you can use the Typography API to determine the following:
- Appropriate line height for text in any setting
- Golden typographic scale for a given font size
- Layout spacing for a given line height
Line Heights
The most important spatial consideration in just about any design is the line height of the primary text.
The Typography API includes a method, height(), that calculates a line height based on an input font size and, optionally, a content width, font, and/or optimal number of characters per line.
global $thesis; $thesis->api->typography->height($size, $width = false, $font = false, $cpl = false);
In the example above, height() accepts up to 4 parameters. The first one, $size, is required, but the other parameters are optional.
As you might have guessed, $size corresponds to the font size (in pixels) for which you’d like to determine an appropriate line height.
For accurate line height tuning, you’ll want to supply a $width parameter (in pixels), too. The height() method will adjust the line height based on the given width, ensuring pixel-perfect typography in your specific setting.
On top of font size and content width considerations, the actual fonts in use can affect the resulting line heights (and thus, the entire design).
To account for this, the height() method contains an optional $font parameter that corresponds to a font array key specified in the Fonts API.
The Typography API uses the character constant for known fonts to make specific adjustments to the resulting typography.
By default, Thesis tunes all line heights around an optimal value of 75 characters per line. Put differently, the height() method will generate a golden ratio line height at 75 characters per line; at lower CPL values, the line height will be less than the golden ratio, and at higher CPL values, the line height will be greater than the golden ratio.
If you’d like to change the CPL tuning value to something other than 75, you can supply an integer value for the $cpl parameter.
Golden Typographic Scale
In addition to line height calculations, the Typography API can also determine a golden typographic scale for any font size via the scale() method.
global $thesis; $thesis->api->typography->scale($size);
The scale() method accepts a single parameter, $size, which is the primary font size (in pixels) in your typographic scale.
This method returns an array of 5 values that represent a golden typographic scale:
'title'— Title text, the largest size in the scale'headline'— Headline text, 2nd largest size'subhead'— Sub-headline text, 3rd largest size'text'— Primary text, corresponds to$sizeparameter'aux'— Auxiliary text, smallest size
For more info, check out how typographic scale values are calculated.
Determining Layout Spacing from Line Height
In the very-unofficial-yet-very-awesome Pearsonified school of design, the line height of the primary text should serve as the mathematical basis for resulting layout spacing (whitespace, margins, padding, etc).
Naturally, the Typography API contains a handy method, space(), for determining layout spacing based on an input line height.
global $thesis; $thesis->api->typography->space($height);
In the example above, the $height parameter is an input line height (in pixels). Given a proper line height, the space() method will return an array of spatial values:
'single'— single unit of whitespace, corresponds to input$height'half'— half unit of whitespace'3over2'— 1.5 units of whitespace'double'— 2 units of whitespace
When setting up your Skin CSS, if you determine spacing with the space() method, you’ll be able to create a layout that responds perfectly to user-initiated font size changes.
In other words, this is a great way to ensure that your layout and spacing are always proportional, regardless of the user’s font size settings.