Font Size Visualizer
Create perfect typography scales with modular ratios. Visualize px/em/rem conversions and generate CSS for your design system.
Configuration
16
Major Third Scale(Ratio: 1.25)
Display XL
Hero sections
3.82rem
LH: 1.2
61.04px | 45.78pt
The Future of Design
Display L
Page titles
3.05rem
LH: 1.2
48.83px | 36.62pt
The Future of Design
Display M
Section headers
2.44rem
LH: 1.2
39.06px | 29.3pt
The Future of Design
Heading XL
Main headings
1.95rem
LH: 1.25
31.25px | 23.44pt
The Future of Design
Heading L
Sub headings
1.56rem
LH: 1.25
25px | 18.75pt
The Future of Design
Heading M
Card titles
1.25rem
LH: 1.3
20px | 15pt
The Future of Design
Body L
Large body text
1.12rem
LH: 1.4
17.89px | 13.42pt
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
Body M
Regular body text
1rem
LH: 1.4
16px | 12pt
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
Body S
Secondary text
0.89rem
LH: 1.4
14.31px | 10.73pt
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
Caption
Captions, labels
0.8rem
LH: 1.5
12.8px | 9.6pt
Figure 1: Typography hierarchy example
Small
Fine print
0.64rem
LH: 1.5
10.24px | 7.68pt
© 2024 All rights reserved. Terms and conditions apply.
Generated CSS
:root {
--font-base: 16px;
--font-display-xl: 3.82rem;
--line-height-display-xl: 1.2;
--font-display-l: 3.05rem;
--line-height-display-l: 1.2;
--font-display-m: 2.44rem;
--line-height-display-m: 1.2;
--font-heading-xl: 1.95rem;
--line-height-heading-xl: 1.25;
--font-heading-l: 1.56rem;
--line-height-heading-l: 1.25;
--font-heading-m: 1.25rem;
--line-height-heading-m: 1.3;
--font-body-l: 1.12rem;
--line-height-body-l: 1.4;
--font-body-m: 1rem;
--line-height-body-m: 1.4;
--font-body-s: 0.89rem;
--line-height-body-s: 1.4;
--font-caption: 0.8rem;
--line-height-caption: 1.5;
--font-small: 0.64rem;
--line-height-small: 1.5;
}
.text-display-xl {
font-size: var(--font-display-xl, 3.82rem);
line-height: var(--line-height-display-xl, 1.2);
}
.text-display-l {
font-size: var(--font-display-l, 3.05rem);
line-height: var(--line-height-display-l, 1.2);
}
.text-display-m {
font-size: var(--font-display-m, 2.44rem);
line-height: var(--line-height-display-m, 1.2);
}
.text-heading-xl {
font-size: var(--font-heading-xl, 1.95rem);
line-height: var(--line-height-heading-xl, 1.25);
}
.text-heading-l {
font-size: var(--font-heading-l, 1.56rem);
line-height: var(--line-height-heading-l, 1.25);
}
.text-heading-m {
font-size: var(--font-heading-m, 1.25rem);
line-height: var(--line-height-heading-m, 1.3);
}
.text-body-l {
font-size: var(--font-body-l, 1.12rem);
line-height: var(--line-height-body-l, 1.4);
}
.text-body-m {
font-size: var(--font-body-m, 1rem);
line-height: var(--line-height-body-m, 1.4);
}
.text-body-s {
font-size: var(--font-body-s, 0.89rem);
line-height: var(--line-height-body-s, 1.4);
}
.text-caption {
font-size: var(--font-caption, 0.8rem);
line-height: var(--line-height-caption, 1.5);
}
.text-small {
font-size: var(--font-small, 0.64rem);
line-height: var(--line-height-small, 1.5);
}
Usage Guide
Understanding Modular Scales
- • Golden Ratio (1.618): Creates harmonious, naturally pleasing proportions
- • Perfect Fifth (1.5): Bold contrast, great for headlines
- • Major Third (1.25): Balanced, versatile for most projects
- • Perfect Fourth (1.333): Moderate contrast, readable hierarchy
Best Practices
- • Use rem units for scalable, accessible typography
- • Maintain consistent line height ratios
- • Test your scale at different viewport sizes
- • Consider readability at all scale levels