typography

[YuezhenQin]

It's also about its style, weight, and size (also include line height and letter spacing). By combining all these elements, you get what is called a font. To choose a font for your project so that it's pleasant to read, avoiding visual discomfort and increased cognitive load.

Font types

Two font types are used all the time, and two are used less often (in fact, there are also combinations, but we won't delve into these). The most common font types are Sans-serif and Serif. The main difference is in the style of each character. Sans-serif is smoother, neat, maybe even "modern". Serif is rather conservative, classic — it's characterized by serifs, small lines attached to characters.

Font choice

Choosing fonts (and selecting colors) for a project can end up taking a really long time. So it makes sense to simplify the process by using a special service that allows you to compare text snippets rendered in different font styles. For example, you can use Google Fonts.

Pairing typefaces

Using a second (auxiliary) font in a project is a fairly common practice. For example, you could display all the headers in Lato style and make the body text Ubuntu.

Typographic hierarchy

Hierarchy is communicated through differences in font weight, size, line height, and letter spacing. The type scale organizes styles into five roles that are named to describe their purposes: Display, headline, title, label, body.

[YuezhenQin]

If you have a base font size of 16px, using this scale, the next size up is 16 1.333, which is 21.33px. The next size up is 21.33 1.333, which is 28.43px. This provides a lovely curve as you move up and down the scale.

The rem unit stands for root em, and is relative to the font size of the html element.

html {
    font-size: 16px;
}

.small-text {
    font-size: 0.85rem;
}

[YuezhenQin]

h1 {
  font-weight: 800;
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px;
}

[YuezhenQin]

span

<p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>

[YuezhenQin]

.indent {
    margin-left: 1em;
}

[YuezhenQin]

p {
  margin: 0;
  display: flex;
  justify-content: space-between;
}

[YuezhenQin]

Letter Spacing

Even on the best typefaces, the default letter spacing is almost always far apart. generally speaking, bigger fonts need to be closer together and smaller ones need to be far away.

-0.022

[YuezhenQin]

Scaling Typography properly

[YuezhenQin]