Display / Hero 64px / 4rem Bold 700 Line-height 1.1 Tracking -0.03em
The quick brown fox
font: 700 4rem/1.1 'Roboto', sans-serif; letter-spacing: -0.03em; Roboto Type Scale
Complete font sizing spec for web. Based on a ~1.33 ratio (perfect fourth) with 16px base. Includes headings, body, UI elements, and special styles.
Family: Roboto Base: 16px Scale: 1.33 (Perfect Fourth) Weights: 300, 400, 500, 700
Headings
H1 48px / 3rem Bold 700 Line-height 1.15 Tracking -0.025em
The quick brown fox jumps over the lazy dog
font: 700 3rem/1.15 'Roboto', sans-serif; letter-spacing: -0.025em; H2 36px / 2.25rem Bold 700 Line-height 1.2 Tracking -0.02em
The quick brown fox jumps over the lazy dog
font: 700 2.25rem/1.2 'Roboto', sans-serif; letter-spacing: -0.02em; H3 28px / 1.75rem Bold 700 Line-height 1.25 Tracking -0.015em
The quick brown fox jumps over the lazy dog
font: 700 1.75rem/1.25 'Roboto', sans-serif; letter-spacing: -0.015em; H4 22px / 1.375rem Bold 700 Line-height 1.3 Tracking -0.01em
The quick brown fox jumps over the lazy dog
font: 700 1.375rem/1.3 'Roboto', sans-serif; letter-spacing: -0.01em; H5 18px / 1.125rem Bold 700 Line-height 1.35 Tracking -0.005em
The quick brown fox jumps over the lazy dog
font: 700 1.125rem/1.35 'Roboto', sans-serif; letter-spacing: -0.005em; H6 16px / 1rem Bold 700 Line-height 1.4 Tracking normal
The quick brown fox jumps over the lazy dog
font: 700 1rem/1.4 'Roboto', sans-serif; letter-spacing: normal; Body Text
Body Large / Lead 18px / 1.125rem Regular 400 Line-height 1.6 Tracking normal
The quick brown fox jumps over the lazy dog. Use for intro paragraphs, article leads, and any text that needs to feel slightly more prominent than standard body copy.
font: 400 1.125rem/1.6 'Roboto', sans-serif; letter-spacing: normal; Body 16px / 1rem Regular 400 Line-height 1.6 Tracking normal
The quick brown fox jumps over the lazy dog. This is your default paragraph style, the workhorse of all content. Keep line length between 65 and 75 characters for optimal readability.
font: 400 1rem/1.6 'Roboto', sans-serif; letter-spacing: normal; Small 14px / 0.875rem Regular 400 Line-height 1.5 Tracking normal
The quick brown fox jumps over the lazy dog. Use for secondary information, footnotes, and supplementary text that shouldn't compete with body copy.
font: 400 0.875rem/1.5 'Roboto', sans-serif; letter-spacing: normal; Caption 12px / 0.75rem Regular 400 Line-height 1.5 Tracking 0.01em
The quick brown fox jumps over the lazy dog. Use for timestamps, image captions, helper text, metadata, and legal fine print.
font: 400 0.75rem/1.5 'Roboto', sans-serif; letter-spacing: 0.01em; Blockquote 20px / 1.25rem Light Italic 300i Line-height 1.6 Tracking normal
“The quick brown fox jumps over the lazy dog.” Use for pull quotes, testimonials, and highlighted excerpts.
font: italic 300 1.25rem/1.6 'Roboto', sans-serif; letter-spacing: normal; UI Elements
Overline / Eyebrow 12px / 0.75rem Medium 500 Line-height 1.5 Tracking 0.08em
Featured Article · Category Label · Section Tag
font: 500 0.75rem/1.5 'Roboto', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; Button Large 16px / 1rem Medium 500 Line-height 1 Tracking 0.02em
font: 500 1rem/1 'Roboto', sans-serif; letter-spacing: 0.02em; Button Small 14px / 0.875rem Medium 500 Line-height 1 Tracking 0.02em
font: 500 0.875rem/1 'Roboto', sans-serif; letter-spacing: 0.02em; Nav Link 16px / 1rem Medium 500 Line-height 1 Tracking normal
Home About Services Contact
font: 500 1rem/1 'Roboto', sans-serif; letter-spacing: normal; Link (Inline) Inherits parent size Regular 400 Line-height Inherits line-height Tracking normal
Learn more about our design services and explore our recent case studies for details.
color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; Badge / Tag 11px / 0.6875rem Medium 500 Line-height 1 Tracking 0.02em
New Featured v2.1
font: 500 0.6875rem/1 'Roboto', sans-serif; letter-spacing: 0.02em; Forms
Form Label 14px / 0.875rem Medium 500 Line-height 1.4 Tracking 0.01em
Email Address [email protected]
font: 500 0.875rem/1.4 'Roboto', sans-serif; letter-spacing: 0.01em; Input Text 16px / 1rem Regular 400 Line-height 1.5 Tracking normal
Placeholder or typed text
font: 400 1rem/1.5 'Roboto', sans-serif; letter-spacing: normal; /* min 16px to prevent iOS zoom */ Usage Notes
- Buttons and nav use Medium 500, not Bold. This gives interactive elements a distinct feel without competing with headings.
- Overlines get positive tracking (+0.08em) because uppercase letters need breathing room to stay readable.
- Input text must stay at 16px minimum or iOS Safari will zoom the viewport on focus.
- Links inherit parent font size. Only color, decoration, and cursor change. This keeps them contextual.
- Headings use negative tracking because large text appears too loose at default spacing.
- Body line-height is 1.6; your vertical rhythm base unit is 25.6px (16 × 1.6). Use multiples for spacing.
- Cap body text at 65–75ch max-width for comfortable reading.
Roboto Type Scale Spec Sheet. Font family: Roboto (headings, body, UI). All sizes in rem, based on 16px root.