type.ck71

Modern Type Scale Generator

Type Scale Configuration

Base Settings

Font size in pixels (typically 16px)

Musical interval ratio for scale

Number of heading levels (h1-h6 = 6 steps)

Round font sizes to 4px increments for design consistency

Typography

Quick presets for common font combinations

Font for body text and paragraphs

Font for headings (h1-h6)

Live Preview

BASE16px / 1rem
The quick brown fox jumps over the lazy dog
H120px / 1.25rem
Heading Text
H224px / 1.5rem
Heading Text
H332px / 2rem
Heading Text
H440px / 2.5rem
Heading Text
H548px / 3rem
Heading Text
H660px / 3.75rem
Heading Text

Example Content

Display Heading
Section Heading
Subsection Heading
Small Heading
Label Heading
Tiny Heading

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.

Test Page Preview

The Art of Typography

A comprehensive guide to creating beautiful and readable text

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, and letter-spacing.

Good typography is invisible. Bad typography is everywhere. The goal is to communicate effectively without drawing attention to the type itself. When done well, typography enhances the message and creates a harmonious reading experience.

Understanding Type Scales

A type scale is a set of harmonious font sizes that work together in a design. It creates visual hierarchy and rhythm throughout your design. Common type scales use mathematical ratios to generate sizes that feel naturally related.

Common Scale Ratios

  • Minor Second: 1.067 - Subtle and elegant
  • Major Second: 1.125 - Balanced and versatile
  • Minor Third: 1.2 - Clear hierarchy
  • Major Third: 1.25 - Strong contrast
  • Perfect Fourth: 1.333 - Musical and harmonious
  • Golden Ratio: 1.618 - Classic and natural

Best Practices

When choosing a type scale, consider your content, audience, and medium. A scale that works well for print might be too large or too small for digital screens. Test your scale at different sizes and on different devices.

Readability First

Always prioritize readability. The most beautiful type scale is useless if readers can't comfortably read your content. Ensure adequate contrast, appropriate line height, and sufficient spacing.

Consistency is Key

Use your type scale consistently throughout your design. Establish clear rules for when to use each size level. This creates a cohesive visual language that users can learn and navigate intuitively.

"Typography is what language looks like."
— Ellen Lupton

This is small text, often used for captions, footnotes, or supplementary information.

Export

Tailwind v4 Theme Output
/**
 * type.ck71 Generated Theme
 * Base: 16px | Ratio: 1.25 (Custom)
 * Generated: 2025-12-27
 */

@import "tailwindcss";

@theme {
  /* Typography Scale */
  --font-size-base: 1.000rem; /* 16px */
  --font-size-h1: 1.250rem; /* 20px */
  --font-size-h2: 1.500rem; /* 24px */
  --font-size-h3: 2.000rem; /* 32px */
  --font-size-h4: 2.500rem; /* 40px */
  --font-size-h5: 3.000rem; /* 48px */
  --font-size-h6: 3.750rem; /* 60px */

  /* Line Heights */
  --line-height-normal: 1.5;
  --line-height-tight: 1.2;

  /* Letter Spacing */
  --letter-spacing-normal: 0em;
  --letter-spacing-tight: -0.02em;

  /* Font Families */
  --font-family-body: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  --font-family-heading: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;

  /* Font Weights */
  --font-weight-body: 400;
  --font-weight-heading: 700;
}

@source "../components/**/*.{vue,js,ts}";
@source "../pages/**/*.vue";