The Skin API
$typography object is useful for adding precision typographical and spatial calculations to your Skin. Most likely, you’ll need to reference this object and its associated methods from within your
Thesis Skin Typography Tools
The Thesis Skin API includes typography tools you can use to calculate the typography and spacing for any design. Specifically, you can use the these tools 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
The most important spatial consideration in just about any design is the line height of the primary text.
$typography object includes a method,
height(), that calculates a line height based on an input font size and, optionally, a content width or even the current font!
Please note! The code examples on this page apply to Thesis Skins and assume you are operating within your
skin.php file! (Hence the
$this-> syntax in the examples below.)
$this->typography->height($size, $width = false, $font = false);
In the example above,
height() accepts up to 3 parameters. The first one,
$size, is required, but the others 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
$typography object even uses the x-height of fonts (if known) to make specific adjustments to the resulting typography.
By default, Thesis tunes all line heights around an optimal value of 75 characters per line, which is perfect for article-length reading.
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 via the
In addition to line height calculations, the
$typography object can also determine a typographic scale for any font size via the
$this->typography->scale($size, $fibonacci = false);
scale() method has one required parameter,
$size, which is the primary font size (in pixels) in your typographic scale.
The second parameter,
$fibonacci, is optional. If set to
scale() method will use the Fibonacci sequence to generate a typographic scale with golden ratio characteristics.
scale() method returns an array of 6 values that comprise typographic scale:
f1— Title text, the largest size in the scale
f2— Extra large headline text, 2nd largest size
f3— Headline text, 3rd largest size
f4— Sub-headline text, 4th largest size
f5— Primary text, corresponds to
f6— Auxiliary text, smallest size
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).
$typography object contains a handy method,
space(), for determining layout spacing based on an input line 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:
x1— single unit of whitespace, corresponds to input
x025— quarter unit of whitespace (rounded)
x05— half unit of whitespace (rounded)
x15— 1.5 units of whitespace (rounded)
x2— 2 units of whitespace
x25— 2.5 units of whitespace (rounded)
x3— 3 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 your layout and spacing are always proportional, regardless of the user’s font size settings.