LAB-0003 / Typography

Find the right weight.

Compare San Francisco, Segoe UI Variable, Roboto, and Roboto Flex side by side. Each font has its own controls for every token: match their visual weight, then export the settings.

One token. Four fonts.

Read across a row to compare the same text. Adjust each font independently; changing one column leaves the others alone.

On narrow screens, scroll each comparison horizontally. Font designs can be compared here; native rendering still varies by operating system.

Font sources and local files
San Francisco

Loading font…

Segoe UI Variable

Loading font…

Roboto

Loading Google font…

Roboto Flex

Loading Google font…

SF Pro · Segoe UI Variable · Roboto

Hero

--type-hero

San Francisco

Loading font…

Loading font…

Variable axes
Hero / San Francisco variable axes
Base font settings
Hero / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Hero / Segoe UI Variable variable axes
Base font settings
Hero / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Hero / Roboto variable axes
Base font settings
Hero / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Hero / Roboto Flex variable axes
Base font settings
Hero / Roboto Flex base font settings

Heading 1

--type-h1

San Francisco

Loading font…

Loading font…

Variable axes
Heading 1 / San Francisco variable axes
Base font settings
Heading 1 / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Heading 1 / Segoe UI Variable variable axes
Base font settings
Heading 1 / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Heading 1 / Roboto variable axes
Base font settings
Heading 1 / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Heading 1 / Roboto Flex variable axes
Base font settings
Heading 1 / Roboto Flex base font settings

Heading 2

--type-h2

San Francisco

Loading font…

Loading font…

Variable axes
Heading 2 / San Francisco variable axes
Base font settings
Heading 2 / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Heading 2 / Segoe UI Variable variable axes
Base font settings
Heading 2 / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Heading 2 / Roboto variable axes
Base font settings
Heading 2 / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Heading 2 / Roboto Flex variable axes
Base font settings
Heading 2 / Roboto Flex base font settings

Heading 3

--type-h3

San Francisco

Loading font…

Loading font…

Variable axes
Heading 3 / San Francisco variable axes
Base font settings
Heading 3 / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Heading 3 / Segoe UI Variable variable axes
Base font settings
Heading 3 / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Heading 3 / Roboto variable axes
Base font settings
Heading 3 / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Heading 3 / Roboto Flex variable axes
Base font settings
Heading 3 / Roboto Flex base font settings

Heading 4

--type-h4

San Francisco

Loading font…

Loading font…

Variable axes
Heading 4 / San Francisco variable axes
Base font settings
Heading 4 / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Heading 4 / Segoe UI Variable variable axes
Base font settings
Heading 4 / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Heading 4 / Roboto variable axes
Base font settings
Heading 4 / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Heading 4 / Roboto Flex variable axes
Base font settings
Heading 4 / Roboto Flex base font settings

Heading 5

--type-h5

San Francisco

Loading font…

Loading font…

Variable axes
Heading 5 / San Francisco variable axes
Base font settings
Heading 5 / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Heading 5 / Segoe UI Variable variable axes
Base font settings
Heading 5 / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Heading 5 / Roboto variable axes
Base font settings
Heading 5 / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Heading 5 / Roboto Flex variable axes
Base font settings
Heading 5 / Roboto Flex base font settings

Heading 6

--type-h6

San Francisco

Loading font…

Loading font…

Variable axes
Heading 6 / San Francisco variable axes
Base font settings
Heading 6 / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Heading 6 / Segoe UI Variable variable axes
Base font settings
Heading 6 / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Heading 6 / Roboto variable axes
Base font settings
Heading 6 / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Heading 6 / Roboto Flex variable axes
Base font settings
Heading 6 / Roboto Flex base font settings

Body

--type-body

San Francisco

Loading font…

Loading font…

Variable axes
Body / San Francisco variable axes
Base font settings
Body / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Body / Segoe UI Variable variable axes
Base font settings
Body / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Body / Roboto variable axes
Base font settings
Body / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Body / Roboto Flex variable axes
Base font settings
Body / Roboto Flex base font settings

Small

--type-small

San Francisco

Loading font…

Loading font…

Variable axes
Small / San Francisco variable axes
Base font settings
Small / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Small / Segoe UI Variable variable axes
Base font settings
Small / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Small / Roboto variable axes
Base font settings
Small / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Small / Roboto Flex variable axes
Base font settings
Small / Roboto Flex base font settings

Label

--type-label

San Francisco

Loading font…

Loading font…

Variable axes
Label / San Francisco variable axes
Base font settings
Label / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Label / Segoe UI Variable variable axes
Base font settings
Label / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Label / Roboto variable axes
Base font settings
Label / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Label / Roboto Flex variable axes
Base font settings
Label / Roboto Flex base font settings

Strong

--type-strong

San Francisco

Loading font…

Loading font…

Variable axes
Strong / San Francisco variable axes
Base font settings
Strong / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Strong / Segoe UI Variable variable axes
Base font settings
Strong / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Strong / Roboto variable axes
Base font settings
Strong / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Strong / Roboto Flex variable axes
Base font settings
Strong / Roboto Flex base font settings

Caption

--type-caption

San Francisco

Loading font…

Loading font…

Variable axes
Caption / San Francisco variable axes
Base font settings
Caption / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Caption / Segoe UI Variable variable axes
Base font settings
Caption / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Caption / Roboto variable axes
Base font settings
Caption / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Caption / Roboto Flex variable axes
Base font settings
Caption / Roboto Flex base font settings

Code / technical label

--type-code

San Francisco

Loading font…

Loading font…

Variable axes
Code / technical label / San Francisco variable axes
Base font settings
Code / technical label / San Francisco base font settings

Segoe UI Variable

Loading font…

Loading font…

Variable axes
Code / technical label / Segoe UI Variable variable axes
Base font settings
Code / technical label / Segoe UI Variable base font settings

Roboto

Loading Google font…

Loading font…

Variable axes
Code / technical label / Roboto variable axes
Base font settings
Code / technical label / Roboto base font settings

Roboto Flex

Loading Google font…

Loading font…

Variable axes
Code / technical label / Roboto Flex variable axes
Base font settings
Code / technical label / Roboto Flex base font settings

Take your type system with you.

Export a font’s complete calibration or the full system. JSON records all settings, inspected axes, and font sources. Exports don’t change the live site.

Full CSS includes loaded profiles only. Choose one using data-type-profile on the document root; apply classes such as type-body and type-h1. Export before leaving: adjustments stay in memory for this visit.