Typography
Siza uses a three-font system with a major-third (1.25) modular scale. Base size: 16px.
Font Families
Outfit The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Inter The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
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.
Siza Brand Guide
10.24px leading: 1.6 Siza Brand Guide
12.8px leading: 1.6 Siza Brand Guide
16px leading: 1.6 Siza Brand Guide
20px leading: 1.5 Siza Brand Guide
25px leading: 1.3 Siza Brand Guide
31.25px leading: 1.3 Siza Brand Guide
39.06px leading: 1.2 Siza Brand Guide
48.83px leading: 1.2 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');