Define typography rules

When we started out with this tutorial, the first thing we did was defining a color palette. A color palette defines a more general set of rules than a component does. Every visible element has to conform to the color palette and you do not have to fiddle around with selectors to get even your most hairy brownfield project under some sort of control. Another general set of rules that you can subject every element on your production page to is typography rules.

Defining typography examples #

Every good pattern library contains examples of valid typography. Warhol can analyze your typography examples and make sure that every element follows the examples, very much like color palettes work. The key difference is that “valid typography” is always a valid combination of certain font sizes and styles. Consider the following typography examples for our pattern library:

<p class="typography regular">
  This is normal text, <b>bold</b>, <i>italic</i> and <b><i>both</i></b>
</p>
<p class="typography large">
  This is large text, <b>bold</b> and <i>italic</i>
</p>

<style>
  .typography {
    font-family: Arial, sans-serif;
  }
  .regular {
    font-size: 1em;
  }
  .large {
    font-size: 1.5em;
  }
</style>

Warhol's default take on this is the following:

The only valid font-family stack is Arial, sans-serif
The font-size may either be 1em or 1.5em (or rather whatever pixel value 1em and 1.5em compute to)
Text that is 1em in size may be bold, italic, or both, while text of size 1.5em can only be bold or italic

Warhol's analysis takes into account the font properties on every typography example in the pattern library and every combination of styles, sizes and fonts that occurs at least once is considered valid. Any combination that does not appear in the pattern library does not count as allowed styling. This includes bold, italic and underlined text - if it's not in the pattern library, it's not allowed!

Configuring typography examples #

Lets configure Warhol to use an updated pattern library with typography examples!

Go back to the web app, open the pattern library for this tutorial, change the base URL and then update the JSON object in “Theme” to include a typography object with a sources selector:

{
  "typography": {
    "sources": ".typography"
  }
}

If you have been following along the whole tutorial and still use the color palette from the beginning, the whole object should look something like this:

{
  "colors": {
    "sources": ".colorExample"
  },
  "typography": {
    "sources": ".typography"
  }
}

By default, Warhol only looks at the CSS properties font-family, font-size, font-weight and font-style. If you want to expand this to include, for example, text-decoration, the properties property (also available for colors) is just what you need:

{
  "colors": {
    "sources": ".colorExample"
  },
  "typography": {
    "sources": ".typography",
    "properties": [
      "font-family",
      "font-size",
      "font-weight",
      "font-style",
      "text-decoration"
    ]
  }
}

With our typography configured like this, let's save the pattern library, re-generate the snapshots and debug the production page!

Debugging components #

Let's keep things simple for a start and first see what Warhol has to say about an obvious violation of the typography rules by a non-component:

<style>
  :root {
    font-family: Arial, sans-serif;
    font-size: 16px;
  }
</style>

<p style="font-size: 10px">Random tiny text</p>

Complaints about invalid typography on element p are exactly what we would expect. Things get more interesting when we add an instance of the larger button to the production web page, just how it was defined in the pattern library:

Non-conforming typography expected is what you see when you implement a component just as it is defined in that pattern library, but when the component definition itself is in violation of the pattern library's basic rules. The larger button is defined with a font stack that contains only Arial, which production mirrors, but which is not a valid font stack according to the pattern library's typography rules. We can't just update the font stack in production, because that would mean that the button does no conform its own definition anymore – the problem's root cause is the inconsistency in the pattern library itself.

Whitelisting icon fonts #

Icon fonts are a popular way to get icons into web pages, but they are not really typography. Their font-related properties often have values that differ wildly from regular text and the fact that they are technically text is incidental. To keep Warhol from complaining about typography errors in icon fonts, just configure your icons!

Summary #

Typography rules are, as an addition to colors, another way to define general rules for all elements, not just components
Warhol will complain if a correctly implemented component's initial definition violates the pattern library's own rules
Icon fonts can be excluded from typography checks with minimal configuration effort

Warhol