[반응형 디자인 / 개발] 타이포그래피 Typography

Typography

Scaling text

Don't

html {
    font-size: 2.5vw /*the user won't be able to resize the text. */
}

Do

html {
    font-size: calc(0.75rem + 1.5vw); /*the text will be resizable if you mix in a relative unit like em, rem, or ch. */
}

But, there's a possibility that the text will get too small on narrow screens and too big on wide screens.

Clamping text

The clamp() function is like the calc() function but it takes three values.
The middle value is the same as what you pass to calc().
The opening value specifies the minumum size, in this case 1rem so as to not go below the user;s preferred font size.
The closing value specifies the maximum size.

html {
    font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

Now the text sizze will never go below 1rem or above 2rem.
Just like min or max limits.

Line length

You can't set a line length directly in CSS. There is no line-length property.
But you can stop text from getting too wide by limiting how wide the container. can be. The max-inline-size property is perfect for this.

Don't set your line-lengths with a fixed unit like px. Users can scale their font size up and down and your line lengths should adjust accordingly. Use a relative unit.

Don't

article {
    max-inline-size: 700px;
}

Do

article {
    max-inline-size: 66ch;
}

Using ch units for width will cause new lines to wrap at the 66th character at that font size.

Line height

Use unitless values for your line-height declarations. This ensures that the line height is relative to the font-size.

Don't

line-height: 24px;

Do

line-height: 1.5 /*will be 1.5 times to font size.*/

Font loading

You can request that browsers start downloading a font file as soon as possible. Add a link element to the head fo your document that references your web font file. A rel attribute with a vlaue of preload tells the browser to prioritize that file. An as attribute with a value of font tells the browser what kind of file this is. The type attribute allows you to be even more specific.

<link href="/fonts/roboto-regular.woff2" type="font/woff2" rel="preload" as="font" crossorigin>

You need to include the crossorigin attribute even if you are hosting the font files yourself.

Use the CSS ==font-display== property to tell the browser how to manage the switchover from a system font to a web font. You could choose to show no text at all until the web font is loaded. You could choose to display the system font immediately and then switch over to the web font once it loads. Both startegies have their downsides. If you wait until the web font is downloaded before showing any text, users may find themselves staring at a blank page for a frustratingly long time. If you show the text in a system font first and then switch over to the web font, users may experience a jarring shifting of content on the page.

Variable fonts

If you are using lots of different weight or styles of the same typeface, you may end up using lots of separate font files - a separate font file for each weight or style.

Variable fonts solve this problem by using one file. A variable font file is responsive. It contains all the information it needs to be displayed across a spectrum of weights or styles.

FOIT vs FOUT

Anatomy of Variable font