Using the Type Scale Generator
A typographic scale is a system of font sizes that relate to each other through a consistent ratio. Using a scale creates harmony and visual hierarchy in your designs, making them more readable and professional.
- Set a Base Size. This is the font size for your main body text (for example, text in the
<p>tag). It is the foundation of your scale. - Choose a Scale Ratio. This ratio determines how much larger each subsequent heading level will be. Ratios with common names like "Major Third" or "Perfect Fourth" are derived from musical scales and are known to create pleasing visual results.
- Select Heading Levels. Choose how many heading levels you need for your project (from H1 down to H6).
- Copy the CSS. The tool generates modern, fluid CSS using the
clamp()function. This makes your font sizes responsive, smoothly scaling between a minimum and maximum size based on the viewport width.
Understanding Fluid Typography with clamp()
This generator uses the powerful CSS clamp() function to create fluid typography. This is a significant improvement over using media queries to switch between fixed font sizes at different breakpoints.
The syntax is clamp(MIN, PREFERRED, MAX).
MIN. The absolute smallest size the font is allowed to be.PREFERRED. The ideal size. This value typically includes viewport width units (vw), allowing it to grow and shrink with the screen size.MAX. The absolute largest size the font is allowed to be.
This approach provides perfect responsiveness, ensuring text is always readable without wrapping awkwardly or becoming too large or small on different devices.
Why Use rem Units?
The generated code uses rem units. A rem is a relative unit that is equal to the font size of the root element (the <html> tag), which is typically 16px by default in most browsers.
Using rem units for font sizes is an accessibility best practice. If a user has configured their browser to use a larger default font size for readability, all text sized with rem units on your website will scale up accordingly, respecting their preference.
Common Scale Ratios
The choice of ratio has a significant impact on the "feel" of your design. A smaller ratio creates a more subtle and dense hierarchy, while a larger ratio creates a more dramatic and spacious design.
| Ratio | Name | Description |
|---|---|---|
| 1.200 | Major Second | Creates a gentle, understated scale. Good for content-heavy sites. |
| 1.250 | Major Third | A very common and versatile ratio that provides clear hierarchy. |
| 1.333 | Perfect Fourth | Offers a stronger contrast between sizes. Good for designs that need more impact. |
| 1.414 | Augmented Fourth | A more dramatic and expressive scale. |
| 1.500 | Perfect Fifth | Creates significant contrast. Often used in marketing or headline-driven designs. |
| 1.618 | Golden Ratio | A classic ratio found in nature and art, known for its balanced and organic feel. |