$typography — Thesis Skin API Object

As of Thesis 2.7, the $typography object is deprecated. You should now use the $grt object to calculate typographical values for your Skin.

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 css_variables() method.

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

Line Heights

The most important spatial consideration in just about any design is the line height of the primary text.

The $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 $fonts object.

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 thesis_skin_typography_cpl filter.

Typographic Scales

In addition to line height calculations, the $typography object can also determine a typographic scale for any font size via the scale() method.

$this->typography->scale($size, $fibonacci = false);

The 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 true, the scale() method will use the Fibonacci sequence to generate a typographic scale with golden ratio characteristics.

The 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 $size parameter
  • 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).

Naturally, the $typography object contains a handy method, space(), for determining layout spacing based on an input line height.

$this->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:

  • x1 — single unit of whitespace, corresponds to input $height
  • 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.