Typography

Scorton UI uses a multi-family stack (Protocol-style roles, CyberScor branding).

Typefaces

Role	Primary	Fallbacks	Use
Display / titles	Montserrat	Ark Sans, Scal, Soya	Hero, H1–H2
Headline	Ark Sans	Montserrat, Scal	Marketing headlines when licensed
UI	Roboto Neue	Roboto, Inter	Buttons, nav, forms
Body	Roboto	Roboto Neue, Inter	Paragraphs, FAQ
Accent wordmarks	Soya / Scal	Montserrat	Special brand moments

Web-safe delivery today loads Montserrat, Roboto, Roboto Flex (stand-in for Roboto Neue), and Inter. Ship Ark Sans / Scal / Soya via licensed @font-face when available — CSS variables already prefer them first.

Display · Montserrat

Assess Your Cybersecurity

AaBbCcDdEeFfGg 1234567890 · The quick brown fox jumps over the lazy dog.

Montserrat, 'Ark Sans', Scal, Soya, sans-serif

UI / Body · Roboto

Start Your CyberScor Assessment

AaBbCcDdEeFfGg 1234567890 · The quick brown fox jumps over the lazy dog.

Roboto, 'Roboto Flex', Inter, sans-serif

Accent · Soya → Scal → Montserrat

CyberScor by Scorton

AaBbCcDdEeFfGg 1234567890 · The quick brown fox jumps over the lazy dog.

Soya, Scal, Montserrat, sans-serif

Type scale

Protocol-inspired named steps mapped to CyberScor sizes:

Step	Token	Approx
Title 2XL	--text-title-2xl	clamp 2.5–4.5rem
Title XL	--text-title-xl	clamp 2–3.75rem
Title LG	--text-title-lg	clamp 1.75–2.25rem
Title MD	--text-title-md	1.5rem
Body LG	--text-body-lg	1.125rem
Body MD	--text-body-md	1rem
Body SM	--text-body-sm	0.875rem

Weights

• Titles: 600–700
• Buttons: 600
• Body: 400–500

Hero wave

<span class="scorton-hero-gradient">Cybersecurity</span>

Animated gradient text using --gradient-hero-dark. Respect prefers-reduced-motion.