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 css_variables() method.
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
Typographic Scale
Use the $grt object’s scale() method to determine a typographic scale for any font size:
$this->grt->scale($size);
The 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 textf2— Extra large headline textf3— Headline textf4— Sub-headline textf5— Primary text, corresponds to$sizeparameterf6— Auxiliary text
Line Heights
The most important property in just about any design is the line height of the primary text.
You can use the $grt object’s 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 $fonts object.
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.
Naturally, the $grt object contains a handy method, spacing(), for determining layout spacing based on an input spacing value (the line height of the primary text):
$this->grt->spacing($height);
The spacing() method will return an array of spatial values related by the golden ratio:
x1— extra large spacing unitx2— primary spacing unitx3— one unit smallerx4— two units smallerx5— three units smallerx6— 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.