Typography Scale - Create Typography Scale Online

Create a typography system with standard proportions for the design

Install

Preview

xs5.24pxTypography
sm6.55pxTypography
base-sm8.19pxTypography
base10.24pxTypography
md12.8pxTypography
lg16pxTypography
xl20pxTypography
2xl25pxTypography
3xl31.25pxTypography
4xl39.06pxTypography
5xl48.83pxTypography

CSS Variables

:root {
 --font-xs: 5.24px;
 --font-sm: 6.55px;
 --font-base-sm: 8.19px;
 --font-base: 10.24px;
 --font-md: 12.8px;
 --font-lg: 16px;
 --font-xl: 20px;
 --font-2xl: 25px;
 --font-3xl: 31.25px;
 --font-4xl: 39.06px;
 --font-5xl: 48.83px;
}

Tailwind Config

fontSize: {
 'xs': '5.24px',
 'sm': '6.55px',
 'base-sm': '8.19px',
 'base': '10.24px',
 'md': '12.8px',
 'lg': '16px',
 'xl': '20px',
 '2xl': '25px',
 '3xl': '31.25px',
 '4xl': '39.06px',
 '5xl': '48.83px',
}

designs Typography Scale Generator - Create Standard Font Size System for Design

Tan Phat Digital's free online Typography Scale Generator tool helps you create a consistent and harmonious font size system for web and application design. Supports 8 standard typography ratios: Minor Second (1.067), Major Second (1.125), Minor Third (1.200), Major Third (1.250), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.500), and Golden Ratio (1.618). Visually preview each size with sample text. Export ready-to-use CSS Variables and Tailwind config code. Customize base size from 8px to 32px. Copy code with one click. Completely free for designers and developers.

Outstanding features

8 standard typography ratios from music and mathematics: Minor/Major Second, Minor/Major Third, Perfect Fourth/Fifth, Golden Ratio
Customize base size from 8px to 32px (default 16px - browser default)
Generate 11 font sizes from xs to 5xl with consistent proportions
Visually preview each size with sample text
,
,
,
,

Why is Typography Scale needed in design?

Typography scale is a system of font sizes calculated according to a certain mathematical ratio, creating harmony and consistency in design. Instead of choosing random font sizes (14px, 18px, 24px...), typography scale ensures that each size is proportional to another size. This creates a clear visual hierarchy, helping readers easily distinguish headings, subheadings, and body text. Ratios like the Golden Ratio (1.618) have been shown to create a natural sense of balance to the human eye - a ratio that has appeared in nature, art, and architecture for thousands of years. Using typography scale makes the design more professional, more consistent, and easier to maintain.

Benefits when used

  • •Create a clear visual hierarchy - readers can easily scan and understand the content structure
  • •Consistent design - all font sizes are mathematically related
  • •Save time - no need to guess font size, there is a built-in system
  • •Easy to maintain - changing the base size will automatically scale all other sizes
  • •Professional - use proven proportions in design
  • •Responsive-friendly - scale works well on all screen sizes
  • •Code ready - CSS Variables and Tailwind config copy and use immediately
  • •Learn - understand standard typography ratios in the industry

Detailed instructions for using Typography Scale Generator

  1. 1Select Base Size: Enter the base font size (usually 16px - browser default). This is the size for body text
  2. 2Select Scale Ratio: Select the ratio from the dropdown. Major Third (1,250) is suitable for most projects. Golden Ratio (1.618) gives stronger contrast
  3. 3View Preview: The right panel displays all generated font sizes with sample text. Scroll to see from xs to 5xl
  4. 4Check sizes: Each row displays the name (xs, sm, base...), pixel value, and preview text at that size
  5. 5Copy CSS Variables: Click the copy icon in the CSS Variables panel to copy the :root code with all --font-* variables
  6. 6Copy Tailwind Config: Click the copy icon in the Tailwind panel to copy the fontSize object for tailwind.config.js
  7. 7Paste into project: Paste the CSS into the stylesheet or Tailwind config into the

Cooperate immediately with Mavis Digital

We not only design websites, but also help businesses build strong digital brands. Providing comprehensive website design services from design to SEO optimization. Please contact Mavis Digital immediately to create breakthrough, effective and sustainable technology solutions for your business in Ho Chi Minh.

Tools Design Tools related

Border Radius Generator

Create custom border-radius.

CSS Filter Generator

Create CSS filter effects.

Glassmorphism Generator

Create a CSS frosted glass effect.

Neumorphism Generator

Create Soft UI effect.

Text Shadow Generator

Create text-shadow CSS.

Brand Color Generator

Create a brand color palette.