Responsive Typography Generator

Start with your mobile body font size. We generate a perfect modular scale for every device size using REM units.

px

Standard browser default is 16px (1rem).

💡 Industry Standards & Pro Tips

Not sure what value to pick? Here are the standard practices used by professional UI/UX designers:

Body Text (Paragraphs)

  • Standard Mobile Base 16px
  • Modern Blog/Article (Mobile) 17px - 18px
  • Dense Dashboards/Apps 14px - 15px
  • Desktop (Scaled) 16px - 20px

Headings (H1 - Scale)

  • Mobile H1 ~28px - 32px
  • Desktop H1 ~48px - 64px
  • Scale Ratio (Standard) 1.20 - 1.25
  • Scale Ratio (Bold/Creative) 1.33+

Calculated Scale

Scroll horizontally on mobile to see all devices.

Element Mobile
(≤ 480px)		 Tablet
(481-768px)		 Laptop
(769-1200px)		 Desktop
(> 1200px)

Live Preview

Resize your browser window to see how these headings adapt based on the generated breakpoints.

H1

Visual Hierarchy is Key

H2

Subheadings create structure

H3

Modular scales ensure harmony

H4

Low-level headings for sections

H5
Labels or complex list headers
H6
Smallest heading, often uppercase
Body

This is a standard paragraph. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking).

Small

This is smaller caption text, useful for metadata or helper text.

Why use REM and Modular Scales?

  • REM (Root EM): REM units are relative to the root html font-size. This ensures accessibility. If a user changes their browser's default font size for vision reasons, your site scales proportionally.
  • Modular Scale: Just like in music, visual harmony comes from mathematical ratios. We use a base size and multiply it by a ratio (like 1.2 or 1.25) to determine headings.
  • Responsive Logic: Mobile screens need smaller text to fit content. We increase the "Base Size" slightly for Tablet (1.05x), Laptop (1.1x), and Desktop (1.2x) to make better use of screen real estate without changing the code structure manually.