Articulink

Typography

Our typefaces are friendly, clear, and professional.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

-«+»!?.*\/()£€$¥¢+-±×÷=≠≈<>≤

ćðđłĵğƒþŧřßŋąŀēıőķůỳ

League Spartan

Our headline typeface. Use only for headlines and titles. Bold, geometric letterforms that convey confidence and clarity.

font-display

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

-«+»!?.*\/()£€$¥¢+-±×÷=≠≈<>≤

ćðđłĵğƒþŧřßŋąŀēıőķůỳ

Poppins

Our primary typeface for everything except headlines. Body text, UI elements, buttons, labels, and navigation. Geometric with excellent legibility at all sizes.

font-sans

Font Weights

400

Aa

Regular

500

Aa

Medium

600

Aa

Semi Bold

700

Aa

Bold

800

Aa

Extra Bold

Type Scale

60pxDisplay
36pxHeading 1
24pxHeading 2
20pxHeading 3
16pxBody
14pxSmall
12pxCaption

Hierarchy

Our Services

Speech Therapy for Every Child

We provide personalized speech therapy services designed to help your child communicate with confidence.

Font Usage

Aa

League Spartan

Use only for headlines. Its bold geometric forms create impact and establish visual hierarchy. Never use for body text or UI elements.

Page titlesSection headingsCard titlesHero text
Aa

Poppins

Use for everything else. Body text, UI elements, buttons, labels, navigation, and any text that isn't a headline. Its geometric design pairs perfectly with League Spartan.

Body textButtonsForm labelsNavigationCaptionsLogo wordmark

Line Height

Tight1.1 – 1.2

Headlines and display text use tight leading.

Use for headlines, hero text, and large display typography.

Normal1.5 – 1.6

Body text uses normal line height for comfortable reading at standard sizes.

Use for paragraphs, descriptions, and UI text.

Relaxed1.7 – 1.8

Small text and captions benefit from extra breathing room to maintain readability.

Use for small text, captions, and dense content.

Letter Spacing

Headlines-0.02em to 0

Tight tracking for impact

Large headlines can use slightly tighter tracking for a more cohesive appearance.

Body Text0 (default)

Standard tracking for readability

Body text should use default letter spacing for optimal legibility.

Small Caps / Labels0.05em to 0.1em

Wider tracking for labels

Uppercase text and small labels benefit from increased letter spacing.

Buttons0.02em to 0.04em

Slightly wider for buttons

Button text can use subtle tracking to improve tap target clarity.

Accessibility

Minimum Sizes

  • Body text: 16px minimum for comfortable reading
  • Secondary text: 14px minimum for labels and captions
  • Small text: 12px only for non-essential info

Color Contrast

  • Normal text: 4.5:1 contrast ratio minimum
  • Large text (18px+): 3:1 contrast ratio minimum
  • Abyss on Cloud: 15.6:1 ratio (excellent)

Best Practices

Avoid justified text alignment
Limit line length to 65-75 characters
Support text resizing up to 200%
Never rely on color alone for meaning
Use semantic HTML headings (h1-h6)
Avoid all-caps for long text

Do's and Don'ts

Do
  • • Use League Spartan only for headlines
  • • Use Poppins for everything else
  • • Maintain clear visual hierarchy with size and weight
  • • Keep body text at 16px or larger
  • • Use bold weights sparingly for emphasis
  • • Pair bold headings with regular body text
  • • Allow sufficient line height for readability
Don't
  • • Use League Spartan for anything other than headlines
  • • Mix more than 2-3 font weights on a page
  • • Set text smaller than 12px
  • • Use light weights (300 or below)
  • • Stretch, skew, or artificially style fonts
  • • Use long passages of uppercase text
  • • Ignore contrast requirements