Type Scale Editor

Configuration

Load

Base Size (px)

Scale Ratio

Display Font

Body Font

Baseline Grid (px)

Type Styles

Preview

Show two lines

h1Paragraph

The quick brown fox jumps over 17 lazy dogs

Font size: 41px, Line height: 46px, Font family: Poppins

h2Paragraph

The quick brown fox jumps over 17 lazy dogs

Font size: 32px, Line height: 36px, Font family: Poppins

h3Paragraph

The quick brown fox jumps over 17 lazy dogs

Font size: 26px, Line height: 32px, Font family: Poppins

h4Paragraph

The quick brown fox jumps over 17 lazy dogs

Font size: 23px, Line height: 28px, Font family: Poppins

h5Paragraph

The quick brown fox jumps over 17 lazy dogs

Font size: 20px, Line height: 26px, Font family: Poppins

h6Paragraph

The quick brown fox jumps over 17 lazy dogs

Font size: 18px, Line height: 24px, Font family: Poppins

bodyParagraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font size: 16px, Line height: 24px, Font family: Figtree

captionParagraph

The quick brown fox jumps over 17 lazy dogs

Font size: 14px, Line height: 14px, Font family: Figtree, Letter spacing: 5%

Code Export

Fluid TypographyUses CSS clamp() for responsive scaling

:root {
  /* Font families */
  --font-family-display: "Poppins";
  --font-family-body: "Figtree";
  
  /* Base configuration */
  --base-font-size: 16px;
  --scale-ratio: 1.125;
  --baseline-grid: 2px;
  
  /* Type scale definitions */
  
  /* h1 */
  --h1-font-family: var(--font-family-display);
  --h1-font-size: 2.5625rem;
  --h1-font-weight: 600;
  --h1-letter-spacing: 0;
  --h1-line-height: 2.875rem;
  --h1-text-transform: none;
  
  /* h2 */
  --h2-font-family: var(--font-family-display);
  --h2-font-size: 2rem;
  --h2-font-weight: 600;
  --h2-letter-spacing: 0;
  --h2-line-height: 2.25rem;
  --h2-text-transform: none;
  
  /* h3 */
  --h3-font-family: var(--font-family-display);
  --h3-font-size: 1.625rem;
  --h3-font-weight: 600;
  --h3-letter-spacing: 0;
  --h3-line-height: 2rem;
  --h3-text-transform: none;
  
  /* h4 */
  --h4-font-family: var(--font-family-display);
  --h4-font-size: 1.4375rem;
  --h4-font-weight: 600;
  --h4-letter-spacing: 0;
  --h4-line-height: 1.75rem;
  --h4-text-transform: none;
  
  /* h5 */
  --h5-font-family: var(--font-family-display);
  --h5-font-size: 1.25rem;
  --h5-font-weight: 600;
  --h5-letter-spacing: 0;
  --h5-line-height: 1.625rem;
  --h5-text-transform: none;
  
  /* h6 */
  --h6-font-family: var(--font-family-display);
  --h6-font-size: 1.125rem;
  --h6-font-weight: 600;
  --h6-letter-spacing: 0;
  --h6-line-height: 1.5rem;
  --h6-text-transform: none;
  
  /* body */
  --body-font-family: var(--font-family-body);
  --body-font-size: 1rem;
  --body-font-weight: 400;
  --body-letter-spacing: 0;
  --body-line-height: 1.5rem;
  --body-text-transform: none;
  
  /* caption */
  --caption-font-family: var(--font-family-body);
  --caption-font-size: 0.875rem;
  --caption-font-weight: 400;
  --caption-letter-spacing: 0.7px;
  --caption-line-height: 0.875rem;
  --caption-text-transform: none;
  
}

/* Utility classes */

.h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  letter-spacing: var(--h1-letter-spacing);
  line-height: var(--h1-line-height);
  text-transform: var(--h1-text-transform);
}

.h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
  text-transform: var(--h2-text-transform);
}

.h3 {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
  text-transform: var(--h3-text-transform);
}

.h4 {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  letter-spacing: var(--h4-letter-spacing);
  line-height: var(--h4-line-height);
  text-transform: var(--h4-text-transform);
}

.h5 {
  font-family: var(--h5-font-family);
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  letter-spacing: var(--h5-letter-spacing);
  line-height: var(--h5-line-height);
  text-transform: var(--h5-text-transform);
}

.h6 {
  font-family: var(--h6-font-family);
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight);
  letter-spacing: var(--h6-letter-spacing);
  line-height: var(--h6-line-height);
  text-transform: var(--h6-text-transform);
}

.body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  text-transform: var(--body-text-transform);
}

.caption {
  font-family: var(--caption-font-family);
  font-size: var(--caption-font-size);
  font-weight: var(--caption-font-weight);
  letter-spacing: var(--caption-letter-spacing);
  line-height: var(--caption-line-height);
  text-transform: var(--caption-text-transform);
}