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 isArial, sans-serif
- The
font-size
may either be1em
or1.5em
(or rather whatever pixel value1em
and1.5em
compute to) - Text that is
1em
in size may be bold, italic, or both, while text of size1.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