Typography

Setting and laying out text.

@font-face
Completion percentage: 85% (9773)
Completion percentage: 85% (9773)

Export
Percents%
CountΣ

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.

2019

2020

Have used it
Know about it
Never heard of it

Line Breaking Properties
Completion percentage: 85.4% (9817)
Completion percentage: 85.4% (9817)

Export
Percents%
CountΣ

The line-break CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.

2019

2020

Have used it
Know about it
Never heard of it

font-variant
Completion percentage: 85.2% (9796)
Completion percentage: 85.2% (9796)

Export
Percents%
CountΣ

The font-variant CSS shorthand property allows you to set all the font variants for a font.

2019

2020

Have used it
Know about it
Never heard of it
We asked members of the CSS community to share their “pick of the year”

My 2020 Pick: CSS IRL

This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.

We asked members of the CSS community to share their “pick of the year”

Andy Bell

Freelance designer & dev who runs piccalil.li

initial_letter
Completion percentage: 85.3% (9804)
Completion percentage: 85.3% (9804)

Export
Percents%
CountΣ

The initial-letter CSS property sets styling for dropped, raised, and sunken initial letters.

2019

2020

Have used it
Know about it
Never heard of it

font-variant-numeric
Completion percentage: 85.3% (9800)
Completion percentage: 85.3% (9800)

Export
Percents%
CountΣ

The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

2020

Have used it
Know about it
Never heard of it

font-display
Completion percentage: 85.4% (9811)
Completion percentage: 85.4% (9811)

Export
Percents%
CountΣ

The font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.

2020

Have used it
Know about it
Never heard of it

line-clamp
Completion percentage: 85.3% (9807)
Completion percentage: 85.3% (9807)

Export
Percents%
CountΣ

The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines.

2020

Have used it
Know about it
Never heard of it

Recommended Resources

Responsive Web Typography v2

In this course, Jason Pamental demonstrates type fundamentals to create better user experiences on mobile and desktop.
Thanks to our partners for supporting us! Learn more.