BuildUtilities

Font Ramp Generator – Free Online Tool

Build a complete typographic scale with Google Fonts. Pick heading and body fonts, choose a modular ratio, and export ready-to-use CSS.

✦ FreeNo SignupInstantCSSCSS Animations & Effects GuideTypography Scales & Font Pairing
h1The quick brown fox jumps
h2The quick brown fox jumps
h3The quick brown fox jumps
h4The quick brown fox jumps
h5The quick brown fox jumps
h6The quick brown fox jumps
bodyThe quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
smallSecondary text and captions
ElementFontSizeWeight
h1Playfair Display3.052rem (49px)700
h2Playfair Display2.441rem (39px)700
h3Playfair Display1.953rem (31px)600
h4Playfair Display1.563rem (25px)600
h5Playfair Display1.25rem (20px)500
h6Playfair Display1rem (16px)500
bodyInter1rem (16px)400
smallInter0.8rem (13px)400
/* Font Ramp, Major Third (1.25) */
/* Heading: Playfair Display | Body: Inter */

:root {
  --font-heading: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
  --base-size: 16px;
}

h1 {
  font-family: var(--font-heading);
  font-size: 3.052rem; /* 49px */
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-family: var(--font-heading);
  font-size: 2.441rem; /* 39px */
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  font-family: var(--font-heading);
  font-size: 1.953rem; /* 31px */
  font-weight: 600;
  line-height: 1.2;
}

h4 {
  font-family: var(--font-heading);
  font-size: 1.563rem; /* 25px */
  font-weight: 600;
  line-height: 1.2;
}

h5 {
  font-family: var(--font-heading);
  font-size: 1.25rem; /* 20px */
  font-weight: 500;
  line-height: 1.2;
}

h6 {
  font-family: var(--font-heading);
  font-size: 1rem; /* 16px */
  font-weight: 500;
  line-height: 1.2;
}

body, p {
  font-family: var(--font-body);
  font-size: 1rem; /* 16px */
  font-weight: 400;
  line-height: 1.6;
}

small, .text-sm {
  font-family: var(--font-body);
  font-size: 0.8rem; /* 13px */
  font-weight: 400;
  line-height: 1.5;
}

How to Use Font Ramp Generator

  1. 1

    Pick Fonts

    Choose a heading font and a body font from the dropdowns.

  2. 2

    Set Scale

    Select a modular ratio and base size.

  3. 3

    Preview

    See your complete type ramp rendered live.

  4. 4

    Copy CSS

    Copy the generated CSS with custom properties.

Common Use Cases

  • ✦Setting up typography for a new project
  • ✦Exploring font pairings visually
  • ✦Generating consistent heading/body scales
  • ✦Learning about modular type scales

Share

Share a link to this tool. Results can be passed via URL parameters.

https://buildutilities.com/share/font-ramp-generator

Frequently Asked Questions

More CSS Tools

Visual CSS generators with live preview and copy-paste output.

▢ CSS Box Shadow Generator▧ CSS Gradient Generator◆ CSS Mesh Gradient Generator⬚ CSS Flexbox Playground▦ CSS Grid Generator◰ CSS Border Radius Generator
View all CSS tools
Tip Jar