Typography

Siza uses a three-font system with a major-third (1.25) modular scale. Base size: 16px.

Font Families

Heading Outfit

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Body Inter

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Monospace JetBrains Mono

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Type Scale

Major-third ratio (1.25) starting from 16px base.

xs

Siza Brand Guide

10.24px leading: 1.6
sm

Siza Brand Guide

12.8px leading: 1.6
base

Siza Brand Guide

16px leading: 1.6
lg

Siza Brand Guide

20px leading: 1.5
xl

Siza Brand Guide

25px leading: 1.3
2xl

Siza Brand Guide

31.25px leading: 1.3
3xl

Siza Brand Guide

39.06px leading: 1.2
4xl

Siza Brand Guide

48.83px leading: 1.2
5xl

Siza Brand Guide

61.04px leading: 1.2

Font Weights

400

Regular

Body text, descriptions

500

Medium

Labels, secondary headings

600

Semibold

Section headings, emphasis

700

Bold

Page titles, primary headings

800

Extrabold

Hero text, marketing

Usage

/* CSS Custom Properties */
font-family: var(--font-heading);  /* Outfit */
font-family: var(--font-body);     /* Inter */
font-family: var(--font-mono);     /* JetBrains Mono */

font-size: var(--text-xl);         /* 25px */
line-height: var(--leading-xl);    /* 1.3 */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@500;600;700;800&display=swap');