The Skin API
$grt object contains everything you need to add Golden Ratio Typography (GRT) to your Skin. Specifically, you’ll need to reference this object and its associated methods from within your Skin’s
Use the Thesis Skin GRT tools to calculate precise typography and spacing for your design:
- Golden typographic scale for a given font size
- Appropriate line heights for each size in the typographic scale
- Layout spacing for a given line height
scale() method to determine a typographic scale for any font size:
scale() method has one required parameter,
$size, which is the primary font size (in pixels) for your typographic scale, and it returns an array of 6 values that comprise typographic scale:
f1— Title text
f2— Extra large headline text
f3— Headline text
f4— Sub-headline text
f5— Primary text, corresponds to
f6— Auxiliary text
The most important property in just about any design is the line height of the primary text.
You can use the
height() method to calculate 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 the Skin’s
css_variables() method (hence the
$this-> syntax in the following examples).
$this->grt->height($size, $width = false, $font = false);
In the example above,
height() accepts up to 3 parameters. The first one,
$size, is required, but the other two 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 spacing used throughout the design).
To account for this, the
height() method contains an optional
$font parameter that corresponds to a
$name specified in the
$grt object even uses the x-height of fonts (if known) to make specific adjustments to the resulting typography.
Layout Spacing Units
In Golden Ratio Typography, layout spacing units can be calculated from the line height of the primary text. These spacing units are sufficient to cover everything in the design—whitespace, margins, padding, etc.
$grt object contains a handy method,
spacing(), for determining layout spacing based on an input spacing value (the line height of the primary text):
spacing() method will return an array of spatial values related by the golden ratio:
x1— extra large spacing unit
x2— primary spacing unit
x3— one unit smaller
x4— two units smaller
x5— three units smaller
x6— smallest spacing unit
When setting up your Skin CSS, if you determine spacing with the
spacing() 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.