Best practices

Keeping track of Typetura styles

Name your keyframes the same as your selectors, replacing spaces and punctuation with hyphens. This will help you keep track where your Typetura styles are and what they apply to.

CSS

@keyframes My__complicated--selector-is-alternate {
    0% {
        font-size: 1rem;
    }
    100% {
        font-size: 3rem;
    }
}
.My__complicated--selector.is-alternate {
    --tt-key: My__complicated--selector-is-alternate;
}

Setting up your foundation

You should put your basic typographic styles on your :root element, not your body. By doing this you can reference this font size anywhere in your document with the rem unit.

Accessibility tip

Use percentage units so that a readers default font size is preserved. Normally this is 16px, and 100% would equal 16px.

Typetura starts at a container width of 0px, and in order for your text to work on screens as small as possible, you should set your font size to 0%. This might sound absurd, a font size of 0 isn’t useful, but neither is a browser width of 0 and that’s where our styles start. From there, ramp up the base font size as quickly as possible using easing and adjusting your maximum context.

CSS

@keyframes root {
  0% {
    font-size: 0%;
    line-height: 1.25;
  }
  100% {
    font-size: 135%;
    line-height: 1.5;
  }
}
:root {
  --tt-key: root;
  --tt-max: 1000;
  --tt-ease: cubic-bezier(0, 0.75, 0.1, 0.9);
  font-size: 135%;
  line-height: 1.4;
}

What units to use

rem everywhere and % on :root

For accessibility reasons, you should use % on the :root element, and rem everywhere else. Any transitional CSS unit will work, you can even mix px and vh if you wanted to. But again, best practice is to use rem everywhere and % on the :root element.

Typographic hierarchy

Font size is one way to implement typographic hierarchy. You may have seen tools like Modular Scale that help with this. Also look into font weight, compression, letter spacing, and capitalization. You are not limited to just font size and with Typetura you can transition many of the other aspects of typographic hierarchy. A headline can use weight at a small size to indicate hierarchy and get thinner as it grows.

Font selection

Some people call this font pairing, we prefer to think about this as a typographic palette. Your typographic palette should satisfy your communication needs through both character and utility. Character or voice is the aesthetic of a font, but it also needs to be useful to you. If you are crunching a lot of numbers, you might want a font with tabular numerals to keep things lined up, or if you have lots of text, something that focuses on legibility. Larger text on your page has room to show some character and smaller text needs to be as legible as possible. You may be able to find a single type family that solves all your typographic needs, or you might find that different fonts are better suited to communicating different things.

Partner with us to get the most out of Typetura

We’d love to work with you! Typography is the foundation of design and how you communicate to your audience. You’re already off to a great start and we can help you towards your goals every step of the way.

pageSupport and services