Quaff

Typography

Give every word its place. Add emphasis where it matters.

THE CITY, REIMAGINED

After
hours.

Open studios.
Unexpected discoveries. FRI
18—23

Usage

Build a Hierarchy
Choose a role and size: headline-large for a heading, body-large for reading, and label-medium for details. Add -emphasized for a heavier weight at the same size.
Emphasize the headline
FRIDAY EDIT · ART & CULTURE

A different side
of the city.

Step inside working studios, meet local makers, and follow the lights to your next discovery.

Friday, 18:00–23:00 The Dockside Quarter
Free entry · All welcome
<p class="label-medium">FRIDAY EDIT · ART & CULTURE</p>
<h2 class="headline-large-emphasized">A different side of the city.</h2>
<p class="body-large">Step inside working studios and meet local makers.</p>
Make a State Stand Out
Use emphasis for unread messages, selected items, or important actions. It is always opt-in, including in expressive mode. Select an update to mark it read or unread.
YOUR EVENING

The latest

2 unread
<span class={unread ? "title-medium-emphasized" : "title-medium"}>
  The studios are staying open
</span>
Explore the Scale
All 15 roles have an emphasized partner. Try your own words and compare them side by side.
BASELINE

Good things, after dark.

headline-large 32px / 40px · Weight 400
EMPHASIZED

Good things, after dark.

headline-large-emphasized 32px / 40px · Weight 500

Size / line height at a 16px root. Text follows the browser's font size.

<p class="headline-large">Good things, after dark.</p>
<p class="headline-large-emphasized">Good things, after dark.</p>
Classes and Tokens
Typography is included in Quaff's base CSS. Apply a class to the element that styles the text. Each role also has tokens for its font family, style, weight, size, line height, and tracking.
/* Change a font for this role. Load your font separately. */
:root {
  --typescale-headline-large-emphasized-font-family-name: "Your Brand", sans-serif;
}

Use semantic headings for page structure; classes control their appearance. See the Material type scale for the full guidance.

Privacy Policy