UX Design and Development course

Typography; base and themes

Typically all my Typography Rules are set in the base styles. All modules and themes should inherit these rules as to reduce unnecessary duplication of such rules as font-family, colors and sizes.

Inevitably in our designs there will be alterations to the typography within a module based on a number of variations including location and state. Are they Module Rules, are they Theme Rules, are they State Rules? All of the above.

What's important to remember here is that, as in the case of building Theme Rules, as the design evolves it is the responsibility of the UI Developer to recognize these patterns and treat them responsibly.

As stated, the overall typography themes would be addressed in the Base Rules. Alterations to Base would come in the form of Theme Rules and/or State Rules. So it wouldn't be uncommon for me to write something like the following.

.theme-large-type {
  font-family: "web-font-family", sans-serif;
  font-size: 3em;
  font-weight: bold;
}
<div class="module">
  <header class="module-header theme-large-type"></header>
</div>

Or in the case of State rules

.is-error {
  font-weight: bold;
  color: red;
}
<div class="module">
  <header class="module-header is-error"></header>
</div>