Theme.Typography


Warhol can limit the valid number combinations of typography-related properties (such as font-family, font-size, font-weight and font-stype) once it has learned all allowed combinations from your pattern library. When Warhol checks your production page, it will point out every bit of text that is not formatted as defined in the pattern library.

Example configuration #

Full example:

{
  "patternLibUrl": "https://warhol.io/components",
  "breakpoints": [800, 1000],
  "theme": {
    "typography": {
      "typographyUrl": "https://warhol.io/components/typography",
      "sources": ".typography",
      "properties": [ "font-family", "font-size", "font-weight", "font-style" ]
    }
  }
}

Minimal example:

{
  "patternLibUrl": "https://warhol.io/components",
  "breakpoints": [800, 1000],
  "theme": {
    "typography": {
      "sources": ".typography"
    }
  }
}

Field theme.typography.typographyUrl (optional, string, defaults to the theme URL or the pattern lib URL) #

If your typography examples live on a specific URL in your pattern library, you can specify this here. If you omit theme.typography.typographyUrl or set it to null, theme.themeUrl will be used instead. If theme.themeUrl is not defined, the top-level patternLibUrl will be used. If you set none of the URL fields to a valid URL, you will get an error.

Field theme.typography.sources (string, required, non-empty) #

Selector for elements that contain typography examples. Typography styles are from the source elements and their children. This means that you can just nest elements for bold, italic and other variations inside your typography examples - Warhol will see them!

Field theme.typography.properties (list of CSS properties, optional, defaults to [ "font-family", "font-size", "font-weight", "font-style" ]) #

Configures the CSS properties that define a typography example. If you want to, you can add any CSS longhand property you like, even if it is only tangentially related to typography. CSS shorthand properties like font are not allowed. This is only a limitation of the configuration format! The CSS in your pattern libraries and web pages can of course use font and other shorthand properties.

Note that Warhol's snapshot algorithm will complain if you do not define each of your typography properties for every typography example in your pattern library directly, without inheritance. Warhol can (and will) use the inherited values for the undefined properties, but those could in theory be inherited from a browser's built-in default style sheet and then be different for different browsers and operating systems. Warhol can't tell the difference between values that were inherited from the browser's style sheet and values that were inherited from your own styles, hence the complaining.

Tips for debugging #

  • Do not hesitate to update the pattern library and add typography examples if necessary. Most pattern libraries that were created without Warhol's help are less comprehensive than their creators like to believe. Remember to include “modifiers” like <small> or similar classes to your pattern library, so that Warhol can know that smaller fonts are allowed to exist.
  • Check the snapshot error log in the web app to make sure that Warhol was able to find the source elements for colors.
  • Inspect the typography snapshots in the browser extension or the web app to make sure that Warhol completely understands every combination that is allowed by your pattern library.

Join our Slack Community

Any question not answered yet? You want to get the latest information on Warhol and discuss new features? Join our Slack Community.