Foundations
Typography
A clear and consistent typography system that works effortlessly across all kinds of content.
Title / H1 Title
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 56px
Line Height: 64px
Letter Spacing: -1%
Title / H2 Title
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 48px
Line Height: 56px
Letter Spacing: -1%
Title / H3 Title
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 40px
Line Height: 48px
Letter Spacing: -1%
Title / H4 Title
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 32px
Line Height: 40px
Letter Spacing: -0.5%
Title / H5 Title
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 24px
Line Height: 32px
Letter Spacing: 0%
Title / H6 Title
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 20px
Line Height: 28px
Letter Spacing: 0%
Label / X-Large
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 24px
Line Height: 32px
Letter Spacing: -1.5%
Label / Large
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 18px
Line Height: 24px
Letter Spacing: -1.5%
Label / Medium
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 16px
Line Height: 24px
Letter Spacing: -1.1%
Label / Small
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 14px
Line Height: 20px
Letter Spacing: -0.6%
Label / X-Small
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 12px
Line Height: 16px
Letter Spacing: 0%
Paragraph / X-Large
The quick brown fox jumps over the lazy dog.
Weight: Regular / 400
Font Size: 24px
Line Height: 32px
Letter Spacing: -1.5%
Paragraph / Large
The quick brown fox jumps over the lazy dog.
Weight: Regular / 400
Font Size: 18px
Line Height: 24px
Letter Spacing: -1.5%
Paragraph / Medium
The quick brown fox jumps over the lazy dog.
Weight: Regular / 400
Font Size: 16px
Line Height: 24px
Letter Spacing: -1.1%
Paragraph / Small
The quick brown fox jumps over the lazy dog.
Weight: Regular / 400
Font Size: 14px
Line Height: 20px
Letter Spacing: -0.6%
Paragraph / X-Small
The quick brown fox jumps over the lazy dog.
Weight: Regular / 400
Font Size: 12px
Line Height: 16px
Letter Spacing: 0%
Subheading / Medium
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 16px
Line Height: 24px
Letter Spacing: 6%
Subheading / Small
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 14px
Line Height: 20px
Letter Spacing: 6%
Subheading / X-Small
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 12px
Line Height: 16px
Letter Spacing: 4%
Subheading / 2X-Small
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 11px
Line Height: 12px
Letter Spacing: 2%
Doc / Label
The quick brown fox jumps over the lazy dog.
Weight: Medium / 500
Font Size: 18px
Line Height: 32px
Letter Spacing: -1.5%
Doc / Paragraph
The quick brown fox jumps over the lazy dog.
Weight: Regular / 400
Font Size: 18px
Line Height: 32px
Letter Spacing: -1.5%
© 2024 AlignUI Design System. All rights reserved.