Cup Source — Typography

A comprehensive type scale, font usage, and styling guide for consistent digital, print, and brand communication.

Type Scale

2.5rem / 40px / 800 / 1.1

Heading 1: Premium Cupware Supply

2rem / 32px / 700 / 1.2

Heading 2: Eco-Friendly Packaging

1.5rem / 24px / 600 / 1.3

Heading 3: Custom Branding Options

1.25rem / 20px / 600 / 1.4

Heading 4: Wholesale Pricing Tiers

1.1rem / 17.6px / 600 / 1.4
Heading 5: Delivery & Fulfillment
1rem / 16px / 600 / 1.5
Heading 6: Quality Assurance Standards

Body & Base Typography

1rem / 16px / 400 / 1.6

Body text forms the foundation of all Cup Source communications. It uses a clean, highly legible sans-serif typeface with comfortable line height and ample paragraph spacing for extended reading. All body copy should maintain a character count of 45–75 characters per line for optimal readability across web and mobile platforms.


0.875rem / 14px / 400 / 1.5

Small text is used for captions, metadata, legal disclaimers, and secondary information. It should never be used for primary reading content. Maintain sufficient contrast ratios (WCAG AA minimum) when applying small text to colored or patterned backgrounds.

Font Families

Primary / Sans-Serif
Segoe UI, system-ui, -apple-system, sans-serif

Used for headings, UI elements, body copy, and navigation. Modern, neutral, and highly legible across all screen sizes and operating systems.


Secondary / Serif
Georgia, 'Times New Roman', serif

Reserved for editorial content, long-form articles, case studies, and premium product descriptions where a warmer, editorial tone is desired.


Monospace / Code
Courier New, Consolas, monospace

Used exclusively for code snippets, technical specifications, SKU formats, order tracking numbers, and data tables.

Weights & Styles

Regular 400 — Standard body text and default UI elements
Medium 500 — Subtle emphasis, buttons, labels, and badges
SemiBold 600 — Section headers, card titles, and navigation
Bold 700 — Primary headings, key metrics, and CTAs
ExtraBold 800 — Hero titles, promotional banners, and featured numbers
Italic Style — Quotes, product names, and editorial emphasis

Text Colors & Contrast

--text-dark: #2c1810 (Primary body)
--text-muted: #6b5b50 (Secondary/meta)
--text-light: #8a7b70 (Disabled/placeholders)
--accent: #e07b39 (Links, CTAs, highlights)
--gold: #d4a053 (Badges, accents, awards)
--white: #ffffff (Dark mode/hero text)

All text combinations must meet WCAG 2.1 AA standards (4.5:1 for normal text, 3:1 for large text). Use the color palette above to maintain consistent contrast ratios across all brand touchpoints.

Component Typography

Links & Buttons

Links use the accent color with underline offset. Buttons use 600 weight with rounded corners and hover states.

Primary Button Secondary Button

Badges & Labels

New Arrival Best Seller Eco-Friendly


Quotes & Blockquotes

"Cup Source sets the standard for wholesale beverage packaging. Their attention to detail and sustainable materials make them our top supplier for our expanding café network."

Lists

  • Double-wall insulated paper cups
  • Compostable PLA-lined food bowls
  • Custom full-color digital printing

Code & Data

Product SKUs follow the format: CS-CUP-12OZ-BLK. API responses and order tracking use monospace formatting for technical documentation.

Spacing & Layout Rules

  • Line Height: 1.6 for body, 1.1–1.3 for headings, 1.5 for lists & small text
  • Paragraph Spacing: 1.5rem margin-bottom between paragraphs
  • Max Width: 65ch for optimal reading length in articles and body copy
  • Letter Spacing: 0 for standard text, 1.5px uppercase for labels & badges
  • Responsive Scaling: Use clamp() or fluid type scales for cross-device consistency