Typography

Vanilla CSS Design System

Overview

Font families, sizes, weights, and line heights used in the system.

Font Family

System Font Stack
--font-family-base

Line Height

Base Line Height
--line-height-base

Font Sizes

Small Text (--text-size-sm)

Base Text (--text-weight-regular)

Large Text (--text-size-lg)

Font Weights

Light Weight (--text-weight-light)

Base Weight (--text-weight-regular)

Bold Weight (--text-weight-bold)

Font Family

System Font Stack

The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*()_+[]{};:'",/?

Set your font stack globally in the :root selector. 

:root {
	--font-family-base: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, 
		'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

Type Scale

A consistent type scale for text elements.

Size Variables

:root {
	--text-weight-regular: 1rem;	/* 16px */
	--text-size-sm: 0.875rem;	/* 14px */
	--text-size-lg: 1.25rem;	/* 20px */
}

Text Styles

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Basic Text Variations

Bold text - using <strong> or .text-weight-bold

Italic text - using <em> or .text-style-italic

Small text - using <small> or .text-size-sm

Strikethrough text - using <del>

Underlined text - using <u>

Highlighted text - using <mark>

Inline code - using <code>

Text Colors

Default text color

Muted text color

Primary text color

Success text color

Error text color

:root {
	--color-dark: #343a40;
	--color-muted: #6c757d;
	--color-primary: #6e0e50;
	--color-success: #1e7e34;
	--color-error: #dc3545;
}

Examples

Article Example

Article Title

Posted on

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.

This is a blockquote. It stands out from regular text and is commonly used for quotes or notable text.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Reference

Best Practices

  • Use semantic HTML elements (h1-h6, p, etc.)
  • Maintain consistent spacing between text elements
  • Use appropriate font weights for hierarchy
  • Consider line length for readability (50-75 characters)
  • Use color contrast that meets accessibility standards
  • Apply consistent line heights for readability

Variables Reference

/* variables.css - Design Tokens */
:root {
	/* Base font family */
	--font-family-base: "Public Sans", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
		roboto, oxygen, ubuntu, cantarell, sans-serif;

	/* Small text size */
	--text-size-sm: 0.875rem;

	/* Base text size */
	--text-size-base: 1rem;

	/* Large text size */
	--text-size-lg: 1.25rem;

	/* Light font weight */
	--text-weight-light: 200;

	/* Base font weight */
	--text-weight-regular: 400;

	/* Bold font weight */
	--text-weight-bold: 700;

	/* Base line height */
	--line-height-base: 1.5;
}