Typography

Typography is fundamental to the Happy Sasquatch brand identity. Our type system emphasizes clarity, hierarchy, and readability while maintaining a modern, approachable feel.

Font Families

Mona Sans (Primary Font)

Mona Sans is our primary typeface, used throughout the documentation site for both body text and headings. It's a variable font supporting weights from 200 to 900.

font-family: 'Mona Sans', system-ui, -apple-system, sans-serif;

Characteristics:

• Modern, geometric sans-serif
• Excellent readability at all sizes
• Variable weight support (200-900)
• Both regular and italic styles available

CSS Variables:

--ifm-font-family-base: 'Mona Sans', system-ui, -apple-system, sans-serif;
--ifm-heading-font-family: 'Mona Sans', system-ui, -apple-system, sans-serif;

Uxum (Heading Font - Main Website)

The main Happy Sasquatch website uses Uxum for headings at weight 800. This font may be added to the documentation site if stronger heading differentiation is desired.

Note: Currently, the docs site uses Mona Sans for both body and headings. Consider adding Uxum if you need to match the main website's heading style.

Type Scale

Our type scale uses responsive clamp() values to ensure optimal readability across all viewport sizes. Text scales smoothly between minimum and maximum values.

Heading Scale

Level	CSS Variable	Min Size	Max Size	Usage
H1	--h1	2.7648rem	4.2634rem	Page titles
H2	--h2	2.304rem	3.1984rem	Major sections
H3	--h3	1.92rem	2.3994rem	Subsections
H4	--h4	1.6rem	1.8rem	Minor headings
H5	--h5	1.3rem	1.3503rem	Small headings
H6	--h6	1.0130rem	1.2rem	Smallest headings

CSS Definitions:

--h1: clamp(2.7648rem, calc(1.489729092vw + 2.2284975269rem), 4.2634674666rem);
--h2: clamp(2.304rem, calc(0.8890658052vw + 1.9839363101rem), 3.1984002rem);
--h3: clamp(1.92rem, calc(0.4765407555vw + 1.748445328rem), 2.3994rem);
--h4: clamp(1.6rem, calc(0.1988071571vw + 1.5284294235rem), 1.8rem);
--h5: clamp(1.3rem, calc(0.0500373602vw + 1.2819865503rem), 1.3503375844rem);
--h6: clamp(1.2rem, calc(-0.1858782904vw + 1.2669161845rem), 1.0130064399rem);

Body Text Scale

Size	CSS Variable	Min Size	Max Size	Usage
XXL	--text-xxl	2.1082rem	2.7648rem	Lead paragraphs
XL	--text-xl	1.8691rem	2.304rem	Large text
L	--text-l	1.6552rem	1.92rem	Emphasized text
M	--text-m	1.4642rem	1.6rem	Standard body
S	--text-s	1.288rem	1.3333rem	Small text
XS	--text-xs	1.1111rem	1.2rem	Captions, footnotes

CSS Definitions:

--text-xxl: clamp(2.2813125rem, calc(0.4806038767vw + 2.1082951044rem), 2.7648rem);
--text-xl: clamp(1.98375rem, calc(0.3183399602vw + 1.8691476143rem), 2.304rem);
--text-l: clamp(1.725rem, calc(0.1938369781vw + 1.6552186879rem), 1.92rem);
--text-m: clamp(1.5rem, calc(0.0994035785vw + 1.4642147117rem), 1.6rem);
--text-s: clamp(1.3rem, calc(0.0331345262vw + 1.2880715706rem), 1.3333333333rem);
--text-xs: clamp(1.2rem, calc(-0.0883587365vw + 1.2318091451rem), 1.1111111111rem);

Line Height Guidelines

Proper line height ensures optimal readability. Follow these guidelines:

Element	Recommended Line Height	Notes
Headings	calc(4px + 2ex) (~1.3)	Tighter for visual impact
Body text	calc(6px + 2ex) (~1.4-1.5)	Comfortable reading
Long-form content	1.6-1.7	Enhanced readability
UI elements	1.2-1.4	Compact spacing

Font Weight Guidelines

Weight	Value	Usage
Light	300	Decorative, large display text
Regular	400	Body text, general content
Medium	500	Subtle emphasis
Semibold	600	Subheadings, navigation
Bold	700	Headings, strong emphasis
Extrabold	800	Display headings (Uxum style)

Code Font

For code blocks and inline code, use the system monospace stack:

--ifm-code-font-size: 95%;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

Typography Best Practices

Hierarchy

1. One H1 per page - Use for the main page title only
2. Logical nesting - Don't skip heading levels (H1 → H2 → H3)
3. Consistent styling - Use the defined type scale, don't create custom sizes

Readability

1. Line length - Aim for 50-75 characters per line
2. Paragraph spacing - Use adequate space between paragraphs
3. Contrast - Ensure sufficient color contrast (see Color System)

Emphasis

Method	Usage	Example
Bold	Important terms, key concepts	Important: This matters
Italic	Book titles, new terms	The component lifecycle
Code	Technical terms, file names	Use the config.js file

Loading Fonts

Mona Sans is configured as a variable font with the following @font-face declarations:

@font-face {
  font-family: 'Mona Sans';
  src: url('/fonts/MonaSans-VariableFont_wght.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mona Sans';
  src: url('/fonts/MonaSans-VariableFont_wght-italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

Required Font Files:

• /static/fonts/MonaSans-VariableFont_wght.woff2
• /static/fonts/MonaSans-VariableFont_wght-italic.woff2

CSS Usage Examples

/* Page title */
.page-title {
  font-size: var(--h1);
  font-weight: 700;
  line-height: calc(4px + 2ex);
}

/* Section heading */
.section-heading {
  font-size: var(--h2);
  font-weight: 600;
}

/* Body text */
.body-text {
  font-size: var(--text-m);
  line-height: 1.6;
}

/* Lead paragraph */
.lead {
  font-size: var(--text-xl);
  font-weight: 400;
}

/* Caption text */
.caption {
  font-size: var(--text-xs);
  color: var(--neutral-semi-dark);
}