Typography

Typography

Overview

WEC Design System uses Poppins as the primary font family for its modern, geometric sans-serif design, complemented by Telkomsel Batik for brand headlines. Our type scale ensures visual hierarchy and readability across all device sizes.

Font Families

Primary Font: Poppins

Weight	Font File	Font Weight	Usage
Thin	poppins-thin.woff2	100	Display, decorative
Light	poppins-light.woff2	300	Subheadings, emphasis
Regular	poppins-regular.woff2	400	Body text, default
Medium	poppins-medium.woff2	500	Emphasized text, labels
Bold	poppins-bold.woff2	700	Headings, strong emphasis
Extra Bold	poppins-extra-bold.woff2	800	Display headings

Brand Font: Telkomsel Batik

Weight	Font File	Font Weight	Usage
Regular	telkomsel-batik-regular.woff2	400	Brand headlines
Bold	telkomsel-batik-bold.woff2	700	Brand headlines (emphasis)

Note: Telkomsel Batik is used exclusively for brand headlines and hero sections to maintain brand identity.

Font Stack

/* Primary font stack */
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

/* Brand font stack */
font-family: 'Telkomsel Batik', 'Poppins', sans-serif;

Desktop Type Scale

Token	Size	Line Height	Font Weight	Usage
.text-desktop-h1	64px	72px	Bold/Extra Bold	Hero titles, main headings
.text-desktop-h2	56px	72px	Bold	Page titles
.text-desktop-h3	44px	56px	Bold/Medium	Section titles
.text-desktop-h4	32px	48px	Medium/Semi Bold	Subsection titles
.text-desktop-h5	24px	32px	Medium	Card titles
.text-desktop-h6	18px	24px	Medium	Small headings
.text-desktop-body2	18px	32px	Regular	Body text, paragraphs
.text-desktop-body3	15px	24px	Regular	Secondary text
.text-desktop-body4	13px	24px	Regular	Captions, labels

Mobile Type Scale

Token	Size	Line Height	Font Weight	Usage
.text-mobile-h1	32px	40px	Bold	Hero titles
.text-mobile-h2	32px	36px	Bold	Page titles
.text-mobile-h3	20px	24px	Medium	Section titles
.text-mobile-h4	16px	24px	Medium	Subsection titles
.text-mobile-body2	14px	24px	Regular	Body text
.text-mobile-body3	14px	16px	Regular	Secondary text
.text-mobile-body-small	12px	24px	Regular	Captions
.text-mobile-small	11px	16px	Regular	Tiny labels
.text-mobile-extra-small	8px	12px	Regular	Micro text

Typography Hierarchy

Hero / Display

<h1 className="text-desktop-h1 md:text-mobile-h1 font-bold">
  Build Consistent User Experiences
</h1>

Usage: Landing page heroes, main section headers

Page Title

<h2 className="text-desktop-h2 md:text-mobile-h2 font-bold">
  Package Details
</h2>

Usage: Page titles, modal titles

Section Title

<h3 className="text-desktop-h3 md:text-mobile-h3 font-medium">
  Choose Your Plan
</h3>

Usage: Section headers, card categories

Body Text

<p className="text-desktop-body2 md:text-mobile-body2 font-normal">
  WEC Design System provides accessible components for building modern web applications.
</p>

Usage: Paragraphs, descriptions, content

Caption / Label

<span className="text-desktop-body4 md:text-mobile-body-small">
  Optional field
</span>

Usage: Form labels, captions, hints

Brand Headlines

Use Telkomsel Batik for brand moments:

<h1 className="font-telkomsel-batik text-6xl">
  MyTelkomsel
</h1>

Usage:

• Application name/logo
• Hero section brand headlines
• Special campaign headers

Letter Spacing

Context	Letter Spacing	Usage
Headings (H1-H3)	-0.02em to -0.03em	Tighter spacing for large text
Body text	Normal (0)	Default readability
Small text (captions)	0.05em	Slightly expanded for clarity
All caps/Buttons	0.05em to 0.1em	Expanded for emphasis

/* Example letter spacing */
.heading-large {
  letter-spacing: -0.02em;
}

.button {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.caption {
  letter-spacing: 0.05em;
}

Font Weight Usage

Weight	When to Use	Examples
100 (Thin)	Display, decorative	Hero overlays, artistic headlines
300 (Light)	Subheadings	Secondary headings, labels
400 (Regular)	Body text default	Paragraphs, descriptions
500 (Medium)	Emphasis, labels	Form labels, card titles
700 (Bold)	Headings	All heading levels (H1-H6)
800 (Extra Bold)	Display headings	Hero titles, landing page headlines

Responsive Typography

Typography scales between mobile and desktop:

/* Mobile-first approach */
.heading {
  font-size: 20px;      /* Mobile */
  line-height: 24px;
}

@media (min-width: 768px) {
  .heading {
    font-size: 44px;    /* Desktop */
    line-height: 56px;
  }
}

Responsive Scale Reference

Element	Mobile	Desktop	Scale Factor
H1	32px	64px	2.0x
H2	32px	56px	1.75x
H3	20px	44px	2.2x
H4	16px	32px	2.0x
Body	14px	18px	1.28x
Caption	12px	13px	1.08x

Text Alignment

Alignment	When to Use
Left	Body text, most content (LTR languages)
Center	Headings, hero sections, CTAs
Right	Numbers, prices, data tables
Justify	Avoid - creates uneven word spacing

Text Transform

Transform	When to Use	Examples
None	Most text	Body text, headings
Uppercase	Buttons, badges, labels	”BUY NOW”, “NEW”
Capitalize	Names, titles	Proper nouns
Lowercase	URLs, email addresses	www.example.com

/* Examples */
.button-primary {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.brand-name {
  text-transform: capitalize;
}

.url {
  text-transform: lowercase;
}

Text Decoration

Type	When to Use
None	Most text (default)
Underline	Links only (on hover/focus)
Line-through	Deleted prices, completed tasks
No underline	Navigation, link buttons

/* Link styles */
a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

a:hover,
a:focus {
  border-bottom-color: currentColor;
}

Line Height Best Practices

Context	Line Height	Ratio
Headings (32px+)	1.1 - 1.2	Tighter for large text
Body text	1.6 - 1.8	Comfortable readability
Captions (12-14px)	1.4 - 1.5	Slightly tighter
Form inputs	1.4 - 1.5	Match input height

/* Line height examples */
.heading {
  font-size: 44px;
  line-height: 1.27; /* 56px */
}

.body {
  font-size: 18px;
  line-height: 1.78; /* 32px */
}

.caption {
  font-size: 13px;
  line-height: 1.85; /* 24px */
}

Common Patterns

Package Card Title

<h3 className="font-telkomsel-batik font-bold text-2xl md:text-3xl">
  Combo Internet 50GB
</h3>

Price Display

<div className="font-bold text-5xl md:text-7xl">
  Rp 50.000
</div>
<p className="text-grey-60 text-sm">/month</p>

Form Label

<label className="font-medium text-base md:text-lg">
  Email Address
</label>
<p className="text-grey-60 text-sm">We'll send confirmation to this email</p>

CTA Button

<button className="font-bold text-base uppercase tracking-wide">
  Continue
</button>

Accessibility

Font Size Minimum

• Body text: Minimum 14px on mobile, 16px on desktop
• Form inputs: Minimum 16px to prevent iOS zoom
• Touch targets: Text within buttons should be readable

Line Spacing

• Minimum 1.5x line height for body text
• Minimum 1.2x line height for headings
• Paragraph spacing: at least 1.5x font size

Color Contrast

• All text must meet WCAG 2.1 AA (4.5:1 for normal text)
• Large text (18px+): 3:1 contrast ratio minimum

Screen Readers

• Use semantic HTML (<h1>-<h6>, <p>, <strong>, <em>)
• Don’t rely on visual styling alone for emphasis
• Provide alt text for text in images

CSS Variables

:root {
  /* Font Families */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-brand: 'Telkomsel Batik', 'Poppins', sans-serif;

  /* Desktop Sizes */
  --text-desktop-h1: 64px;
  --text-desktop-h2: 56px;
  --text-desktop-h3: 44px;
  --text-desktop-h4: 32px;
  --text-desktop-h5: 24px;
  --text-desktop-h6: 18px;
  --text-desktop-body2: 18px;
  --text-desktop-body3: 15px;
  --text-desktop-body4: 13px;

  /* Mobile Sizes */
  --text-mobile-h1: 32px;
  --text-mobile-h2: 32px;
  --text-mobile-h3: 20px;
  --text-mobile-h4: 16px;
  --text-mobile-body2: 14px;
  --text-mobile-body3: 14px;
  --text-mobile-body-small: 12px;
  --text-mobile-small: 11px;
  --text-mobile-extra-small: 8px;

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

Best Practices

✅ Do	❌ Don’t
Use Poppins for most UI text	Use Telkomsel Batik for body text
Scale text proportionally (1.2-1.5x)	Jump between unrelated sizes
Use appropriate line heights	Use single line height for paragraphs
Respect mobile minimum (14px)	Use text smaller than 12px
Use font weights consistently	Use too many weight variations
Maintain visual hierarchy	Make everything the same size

Resources

• Poppins Font Specimen
• WCAG Text Contrast Requirements
• Typography Scale Calculator