T

Type Scale

Thanks
px
Best For

Modern interfaces and clean designs

Usage

Excellent for both headings and body text

Pairs Well With

Source Sans Pro, Merriweather

Adjusts line spacing for better readability across all text sizes

Adjusts character spacing for different design styles

Round Values

Rounds font sizes to whole numbers instead of decimals

Fluid Typography

Generate CSS clamp() values for responsive typography that scales smoothly across viewports

Units:

Display Large

Size: 39.06pxLine Height: 1.55Letter Spacing: 0.015em
800
The quick brown fox jumps over the lazy dog.

Display Medium

Size: 34.94pxLine Height: 1.55Letter Spacing: 0.015em
800
The quick brown fox jumps over the lazy dog.

H1 - Heading 1

Size: 31.25pxLine Height: 1.55Letter Spacing: 0.02em
700
The quick brown fox jumps over the lazy dog.

H2 - Heading 2

Size: 25pxLine Height: 1.55Letter Spacing: 0.02em
600
The quick brown fox jumps over the lazy dog.

H3 - Heading 3

Size: 22.36pxLine Height: 1.6Letter Spacing: 0.025em
600
The quick brown fox jumps over the lazy dog.

H4 - Heading 4

Size: 20pxLine Height: 1.6Letter Spacing: 0.025em
500
The quick brown fox jumps over the lazy dog.

H5 - Heading 5

Size: 18.91pxLine Height: 1.6Letter Spacing: 0.03em
500
The quick brown fox jumps over the lazy dog.

H6 - Heading 6

Size: 17.89pxLine Height: 1.6Letter Spacing: 0.03em
500
The quick brown fox jumps over the lazy dog.

Body XL

Size: 16.92pxLine Height: 1.6Letter Spacing: 0.03em
400
The quick brown fox jumps over the lazy dog.

Body

Size: 16pxLine Height: 1.6Letter Spacing: 0.03em
400
The quick brown fox jumps over the lazy dog.

Body Small

Size: 15.13pxLine Height: 1.65Letter Spacing: 0.03em
400
The quick brown fox jumps over the lazy dog.

Caption Large

Size: 14.31pxLine Height: 1.65Letter Spacing: 0.03em
400
The quick brown fox jumps over the lazy dog.

Caption

Size: 13.53pxLine Height: 1.65Letter Spacing: 0.03em
400
The quick brown fox jumps over the lazy dog.

Caption Small

Size: 12.8pxLine Height: 1.65Letter Spacing: 0.03em
300
The quick brown fox jumps over the lazy dog.

Overline

Size: 12.11pxLine Height: 1.65Letter Spacing: 0.03em
500
The quick brown fox jumps over the lazy dog.