Dynamic Text Hierarchy

Version 2 is a modular CSS typography system that replaces traditional element-based styling with customizable, class-based controls. It offers precise management of font sizes, weights, spacing, and responsive behavior through intuitive classes (.h1-.h6, .body-sm/md/lg) and CSS variables, ensuring perfect typographic rhythm across all devices.

Download v2.css

Introduction

Typescale v2 is a complete redesign of our typography system that:

Key Change in v2: Removed all root-level element styling (h1-h6, p tags). You must now use classes (.h1-.h6, .body-sm/.md/.lg) for consistent typography.

Core Concepts

Modular Scale

The system uses a modular scale based on:

  • --class-font-body: Base font size (default: 18px)
  • --class-scale-ratio: Scaling ratio (default: 1.2)

This creates harmonious relationships between all text elements.

Separate Controls

Independent control over:

  • Headings (.h1-.h6)
  • Body text (.body-sm, .body-md, .body-lg)

Each with their own size, weight, line-height, color and letter-spacing.

Customization Variables

Global Variables

Variable Default Description
--class-font-body 18px Base font size for body text
--class-scale-ratio 1.2 Multiplier for type scale

Heading Variables

Variable Default Description
--class-heading-font Arial, sans-serif Font family for all headings
--class-heading-weight 700 Font weight for all headings
--class-heading-leading 1.2 Line-height for headings
--class-heading-color inherit Text color for headings
--class-heading-tracking -0.02em Letter-spacing for headings

Body Text Variables

Variable Default Description
--class-body-font Arial, sans-serif Font family for all body text
--class-body-weight 400 Font weight for body text
--class-body-leading 1.6 Line-height for body text
--class-body-color inherit Text color for body text
--class-body-tracking 0 Letter-spacing for body text

Type Classes

Heading Classes

Heading 1

.h1

Heading 2

.h2

Heading 3

.h3

Heading 4

.h4
Heading 5
.h5
Heading 6
.h6

Body Text Classes

Large body text

.body-lg

Regular body text (default)

.body-md

Small body text

.body-sm

Implementation Examples

Customizing Variables

:root {
    /* Base settings */
    --class-font-body: 17px;
    --class-scale-ratio: 1.25;
    
    /* Heading settings */
    --class-heading-weight: 800;
    --class-heading-leading: 1.3;
    --class-heading-color: #2a2a2a;
    --class-heading-tracking: -0.03em;
    
    /* Body settings */
    --class-body-weight: 350;
    --class-body-leading: 1.7;
    --class-body-color: #444;
    --class-body-tracking: 0.01em;
}

Responsive Adjustments

@media (max-width: 1024px) {
    :root {
        --class-font-body: 16px;
        --class-scale-ratio: 1.2;
        --class-heading-leading: 1.25;
    }
}

@media (max-width: 768px) {
    :root {
        --class-font-body: 15px;
        --class-body-leading: 1.8;
        --class-heading-tracking: -0.01em;
    }
}