The State of CSS 2019: Typography

English

Typography

Typography is probably the most important building block of the web, and it's great to see CSS is still improving its already-good support for typograhical features.

Variable fonts are the hot new thing here, and while we're still waiting for true responsive type, the constant progress on this front is definitely worth keeping an eye on.

Usage Overview

The size of the outer circle corresponds to the total number of users who know about a feature, while the inner one represents those who have actually used it.

Hover on each node to view detailed data along with an overlay representing the total number of survey respondents.

Usage by Years Of Experience

The “overall” column shows overall usage for each feature (respondents who selected “have used it”), while the following columns show the usage ratio for each “years of experience” bracket.

A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.

Years of Experience

@font-face

88.43%

70.04%

82.45%

90.28%

95.68%

97.81%

94.35%

Line Breaking Properties

81.6%

57.27%

72%

86.96%

90.66%

91.91%

90.82%

initial-letter

26.67%

14.1%

14.63%

21.83%

28.7%

37.24%

43.53%

Variable Fonts

26.42%

27.75%

31.35%

29.3%

25.68%

20.89%

23.53%

font-variant

23.44%

15.42%

12.64%

19.03%

24.07%

31.59%

37.88%

Difference from overall usage:

-20%-10%0+10%+20%

@font-face

Completion Percentage: 99.4% (11249)

Percents%CountΣ

Have used it92.84%

Know what it is, but haven't used it4.83%

Never heard of it/Not sure what it is1.72%

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.

Learn More

Variable Fonts

Completion Percentage: 99.43% (11252)

Percents%CountΣ

Have used it25.68%

Know what it is, but haven't used it43.92%

Never heard of it/Not sure what it is29.83%

Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single @font-face reference. This article will give you all you need to know to get you started using variable fonts.

Learn More

Line Breaking Properties

Completion Percentage: 99.47% (11257)

Percents%CountΣ

Have used it87.48%

Know what it is, but haven't used it8.36%

Never heard of it/Not sure what it is3.63%

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

Learn More

font-variant

Completion Percentage: 99.21% (11228)

Percents%CountΣ

Have used it24.15%

Know what it is, but haven't used it28.36%

Never heard of it/Not sure what it is46.7%

The font-variant CSS property is a shorthand for the longhand properties font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian. You can also set the CSS Level 2 (Revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand.

Learn More

initial-letter

Completion Percentage: 99.38% (11247)

Percents%CountΣ

Have used it28.21%

Know what it is, but haven't used it35.48%

Never heard of it/Not sure what it is35.69%

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

Learn More

Recommended Resources

Learn Responsive Web Typography

Learn how to implement web fonts and create a modern, scalable typographic system to give the best reading experience for desktop and mobile devices

Thanks to our partners for supporting us! Learn more.

« Previous: Interactions Next: Animations & Transforms »