Home
Usage
Marketeers
Designers
Developers
Contribution
Pipelne
Foundations
Color
Typography
Actions
Structured Text
Images
Content
Voice and Tone
Mechanics, Grammar and Inclusivity
Patterns
Containers / Sections
In Page Navigation
Typographic patterns
Content and Media
Taxonomies
Images with Overlaid Text
Pagination
Social Share Buttons
Spinner
Agility Page Components
Styling Definitions
Text
Text and Media
Carousels
Accordion
Grid Content

Typography

Boystown uses 2 fonts families and has a variety of font sizes it can accomodate. In addition - the fonts are available in 2 weights - bold and normal.

The specified sizes auto shrink to smaller sizes when the viewport shrinks.


font-sans

Source Sans

The five boxing wizards jump quickly.
Jackdaws love my big sphinx of quartz.


font-serif

Roboto Slab

The five boxing wizards jump quickly.
Jackdaws love my big sphinx of quartz.

The following section outlines all the font labels used to indicate styling


base fontSize: 16px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


3xl fontSize: 28px lineHeight: 40px

Jackdaws love my big sphinx of quartz.


2xl fontSize: 24px lineHeight: 32px

Jackdaws love my big sphinx of quartz.


xl fontSize: 20px lineHeight: 28px

Jackdaws love my big sphinx of quartz.


lg fontSize: 18px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


md fontSize: 16px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


sm fontSize: 14px lineHeight: 20px

Jackdaws love my big sphinx of quartz.


xs fontSize: 12px lineHeight: 20px

Jackdaws love my big sphinx of quartz.


h-3xl fontSize: 64px lineHeight: 80px

Jackdaws love my big sphinx of quartz.


h-2xl fontSize: 48px lineHeight: 60px

Jackdaws love my big sphinx of quartz.


h-xl fontSize: 40px lineHeight: 48px

Jackdaws love my big sphinx of quartz.


h-lg fontSize: 32px lineHeight: 40px

Jackdaws love my big sphinx of quartz.


h-md fontSize: 24px lineHeight: 32px

Jackdaws love my big sphinx of quartz.


h-sm fontSize: 20px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


h-xs fontSize: 18px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


h-2xs fontSize: 16px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


h-3xs fontSize: 14px lineHeight: 20px

Jackdaws love my big sphinx of quartz.


base fontSize: 16px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


3xl fontSize: 28px lineHeight: 40px

Jackdaws love my big sphinx of quartz.


2xl fontSize: 24px lineHeight: 32px

Jackdaws love my big sphinx of quartz.


xl fontSize: 20px lineHeight: 28px

Jackdaws love my big sphinx of quartz.


lg fontSize: 18px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


md fontSize: 16px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


sm fontSize: 14px lineHeight: 20px

Jackdaws love my big sphinx of quartz.


xs fontSize: 12px lineHeight: 20px

Jackdaws love my big sphinx of quartz.


h-3xl fontSize: 64px lineHeight: 80px

Jackdaws love my big sphinx of quartz.


h-2xl fontSize: 48px lineHeight: 60px

Jackdaws love my big sphinx of quartz.


h-xl fontSize: 40px lineHeight: 48px

Jackdaws love my big sphinx of quartz.


h-lg fontSize: 32px lineHeight: 40px

Jackdaws love my big sphinx of quartz.


h-md fontSize: 24px lineHeight: 32px

Jackdaws love my big sphinx of quartz.


h-sm fontSize: 20px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


h-xs fontSize: 18px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


h-2xs fontSize: 16px lineHeight: 24px

Jackdaws love my big sphinx of quartz.


h-3xs fontSize: 14px lineHeight: 20px

Jackdaws love my big sphinx of quartz.