Typography

Principles

• Choose a role, not a size. A role sets size, line height, and tracking together, so text reads the same everywhere.
• Set the heading level and the role separately. The HTML level sets the outline and size sets the look, so the outline survives any design.
• Use two weights. Headings, buttons, links, and emphasis take 500, and everything else takes 400.
• Keep reading lines short. Long lines make the next line hard to find, so reading text keeps to a set measure.
• Let text grow. Role sizes are in rem and wrapping text keeps room between lines, so zoom and wider text spacing never break a layout.

Typefaces

Each script takes its own face. Set lang on a block in another language so its glyphs come from that face.

Get the files from Google Fonts and each typeface's package. Check each license before you redistribute a font.

Type roles

Pick a role by what the text does. Display and title grow with the screen; every other role keeps one size.

In the samples below, the subhead, the emphasis, and the button take 500.

Put surf-typography on body so dialogs, menus, and other portals take the roles too.

import '@surflane/design-tokens/tokens.css'
import '@surflane/css/foundations.css'
import '@surflane/css/typography.css'
// Load the actual font files once in the application entry.
<body className='surf-typography'>{application}</body>

<Heading level={3} variant='subsection'>
  Card subhead
</Heading>
<Text variant='caption'>400 / Manrope / +0.01em</Text>
<Text variant='mono'>400 / JetBrains Mono / 0</Text>

Line length and line height

Reading text stops at --surf-layout-reading-measure (54ch), about 70 Latin or 50 Hangul characters per line. Prose and Markdown apply it to paragraphs and lists; tables, code, and images keep the full width.

Wrapping text keeps a line height of 1.5 or more, and headings tighten from 1.4 to 1.2 as they grow. Layouts hold at 200% text and with wider text spacing (WCAG 1.4.4, 1.4.12).

Korean text

Set lang='ko' on Korean text so these rules apply.

• Lines break between words (word-break: keep-all). Only a word longer than the line breaks inside.
• Word spaces widen by --surf-type-hangul-word-spacing (0.05em) to match Pretendard's space.
• Hangul has no italic. Emphasize with weight 500 instead.

Related

• Layout — Sets containers, grids, spacing, and component sizes.
• Color — Defines color roles, contrast minimums, and how palettes are built.
• Content and localization — Sets interface wording and the formats of numbers and dates.
• Documentation page — Organizes body text, table of contents, code, callouts, and language switching.