Skip to content

Typography

Setting and laying out text.

Customize Data
The font-variant CSS shorthand property allows you to set all the font variants for a font.
Never heard of it
Know about it
Have used it
2019
2020
2021
We asked members of the CSS community to share their “pick of the year”

My 2021 Pick: Lynn Fisher

I'd love to pick Lynn Fisher. She's consistently surprised and delighted the CSS community with her creative projects and experiments, and I love how much folks can learn from her!

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

Cassidy Williams

Developer advocate, educator, and startup advisor.

Customize Data
The initial-letter CSS property sets styling for dropped, raised, and sunken initial letters.
Never heard of it
Know about it
Have used it
2019
2020
2021

font-variant-numeric

Customize Data
The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
Never heard of it
Know about it
Have used it
2020
2021
Customize Data
The font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.
Never heard of it
Know about it
Have used it
2020
2021
Customize Data
The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines.
Never heard of it
Know about it
Have used it
2020
2021
Customize Data
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.
Never heard of it
Know about it
Have used it
2021

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.