Everything to do with fonts

typography

Declarations that specify font characteristics.

Essential font settings:

  • font
  • font-family
  • font-size
  • font-style
  • font-weight
  • font-stretch
  • color

Remotely retrieved custom fonts:

  • @font-face

Enable/disable font file features:

  • font-size-adjust
  • font-kerning
  • font-optical-sizing
  • font-synthesis

font

All in one spec

Provide all of these properties in one setting: font-family, font-size, font-weight, font-style, font-variant, font-stretch and line-height.
css, style, typography, font

font-family

The font stack

Specify the "font stack" for the element, informing the browser which fonts are preferred and which are acceptable replacements.
font stack, css, style, typography, font-family

font-size

Text size

Specify how large or small the text should be.
points, rem, em, css, style, typography, font-size

font-style

Italic/oblique

Specify whether an italic or oblique font variant should be used.
italic, oblique, css, style, typography, font-style

font-weight

Thick/thin

Specify whether a thick or thin font variant should be used.
css, style, typography, font-weight

font-stretch

Condensed/expanded

Specify whether a condensed or expanded font variant should be used.
condensed, expanded, css, style, typography, font-stretch

color

Text color

Specify which color to use for the element's text.
css, style, typography, color

@font-face

Custom fonts

Describe a custom font's characteristics and specify the location where the browser should look for it.
css, style, typography, @font-face

font-size-adjust

Use lowercase letter sizing?

Use the height of the lowercase letter "x" to determine the font size rather than the size of the uppercase letter "X".
css, style, typography, font-size-adjust

font-kerning

Use kerning?

Override the browser's default rule for kerning pairs of adjacent characters.
css, style, typography, font-kerning

font-optical-sizing

Use optical rendering?

Disable the automatic optical resizing of strokes and serifs for very small and very large fonts.
css, style, typography, font-optical-sizing

font-synthesis

Use imitation italic or bold?

Instruct the browser in how to handle fonts that don't have proper italic and bold variants.
css, style, typography, font-synthesis
0

style > typography Everything to do with fonts

🔗 🔎