Surveys / State of CSS 2023
This survey closed on July 15, 2023. View Survey Results »

5/13Typography

  1. font-display
  2. line-clamp
  3. Variable Fonts
  4. font-palette
  5. text-wrap: balance

css 
@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format("woff");
  font-display: fallback;
}

css 
p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

css 
@font-face {
  font-family: "Fraunces";
  src: url("fraunces.woff2") format("woff2");
  font-weight: 200 700;
}

h2 {
  font-family: "Fraunces";
  font-variation-settings: "wght" 375, "SOFT" 100;
}

css 
@font-palette-values --PinkAndGray {
  font-family: bungee;
  override-colors:
    0 #c1cbed,
    1 #ff3a92;
}
.grays {
  font-family: bungee;
  font-palette: --PinkAndGray;
}

css 
.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}