Digital Typography & Spacing

Typography

Breakdown of when to use each approved W&M font
Use Case	Typeface
wm.edu headings	Adelle (Adobe Typekit, licensed for wm.edu)
wm.edu body	Adelle Sans (Adobe Typekit, licensed for wm.edu)
Affiliate/external headings	Aleo (Google Fonts, free stand-in for Adelle)
Affiliate/external body	Roboto (Google Fonts, free stand-in for Adelle Sans)
Email headlines	Georgia
Email body	Arial
Last resort only	Georgia (serif), Arial (sans)

The Adobe Typekit license for Adelle and Adelle Sans covers wm.edu properties only. Affiliate portals, affiliate pages, and any external site outside wm.edu should use Aleo and Roboto, since the license doesn't extend to them.

Email should use Georgia and Arial because the more custom fonts do not load in some email clients, so emails need to fall back to system fonts rather than a web type.

Baskerville and Avenir belong to the logo only. Never use them for typesetting.

Type Scale

A type scale is the predefined scale of typographic sizes, weights and line heights that define a design system's typographic voice. Each style below is identical for viewports above 1080px (desktop, laptop, tablet) and scales down at 834px and below (small tablet, mobile). Rem values are based on a root font size of 16px.

H1

Breakdown of font properties for H1s
Property	Desktop / laptop / tablet (1080–1440px)	Small tablet / mobile (390–834px)
Size	68.66px	61.04px
Line height	80px	72px
Letter spacing	0	0
Paragraph spacing	0	0

H2

Breakdown of font properties for H2s
Property	Desktop / laptop / tablet (1080–1440px)	Small tablet / mobile (390–834px)
Size	54.93px	48.83px
Line height	64px	60px
Letter spacing	0	0
Paragraph spacing	0	0

H3

Breakdown of font properties for H3s
Property	Desktop / laptop / tablet (1080–1440px)	Small tablet / mobile (390–834px)
Size	43.95px	39.06px
Line height	52px	48px
Letter spacing	0	0
Paragraph spacing	0	0

H4

Breakdown of font properties for H4s
Property	Desktop / laptop / tablet (1080–1440px)	Small tablet / mobile (390–834px)
Size	35.16px	31.25px
Line height	44px	36px
Letter spacing	0	0
Paragraph spacing	0	0

H5

Breakdown of font properties for H5s
Property	Desktop / laptop / tablet (1080–1440px)	Small tablet / mobile (390–834px)
Size	28.13px	25px
Line height	32px	32px
Letter spacing	0	0
Paragraph spacing	0	0

H6

Breakdown of font properties for H6s
Property	Desktop / laptop / tablet (1080–1440px)	Small tablet / mobile (390–834px)
Size	22.5px	20px
Line height	28px	24px
Letter spacing	0	0
Paragraph spacing	0	0

Body

Breakdown of font properties for body text
Property	Desktop / laptop / tablet (1080–1440px)	Small tablet / mobile (390–834px)
Size	18px	16px
Line height	28px	24px
Letter spacing	-0.2	-0.2
Paragraph spacing	0	0

Photo Captions

Breakdown of font properties for caption text
Property	Desktop / laptop / tablet (1080–1440px)	Small tablet / mobile (390–834px)
Size	16px	14px
Line height	24px	20px
Letter spacing	-0.2	-0.2
Paragraph spacing	0	0

Large Eyebrow

Eyebrow text is a a short, distinct line of text placed directly above a main heading or title. Both eyebrow styles use Semibold weight.

Breakdown of font properties for large eyebrow text
Property	Desktop / laptop / tablet (1080–1440px)	Small tablet / mobile (390–834px)
Size	18px	16px
Line height	28px	24px
Letter spacing	3	3
Paragraph spacing	0	0

Small Eyebrow

Both eyebrow styles use Semibold weight. The small eyebrow does not change at any breakpoint.

Breakdown of font properties for small eyebrow text
Property	Any Breakpoint
Size	12px
Line height	12px
Letter spacing	1
Paragraph spacing	0

Labels

Labels are short, functional pieces of text used to identify, categorize, or provide context for content and interface elements. They help users quickly understand the purpose or meaning of an element without requiring additional explanation.

Labels are available in three sizes (small, medium, and large), all rendered at Regular weight. Label styles remain consistent across all breakpoints.

Breakdown of font properties for labels
Property	Small Label	Medium Label	Large Label
Size	12px	14px	16px
Line height	14px	16px	20px
Letter spacing	0	0	0
Paragraph spacing	0	0	0

Spacing & Layout

Viewport Breakpoints

Breakdown of viewport breakpoints for device type
Device	Width
Mobile	390px
Small tablet	834px
Tablet	1080px
Laptop	1280px
Desktop	1440px

Spacing Scale

Breakdown of spacing values for components
Sizing	Value
xxsmall	4px
x small	8px
small	16px
base	24px
medium small	32px
medium	48px
medium large	64px
large	72px
x large	88px
xx large	104px

Responsive Page Margins and Gutters

Breakdown of spacing values for page margins and gutters
Token	Desktop	Laptop	Tablet	Small Tablet	Mobile
Side margin	80px	64px	32px	32px	24px
Gutter	32px	24px	24px	24px	16px
Vertical margin (small)	24px	16px	12px	12px	12px
Vergical margin (medium)	40px	32px	16px	16px	20px
Vertical margin (large)	80px	64px	32px	32px	24px

�鶹�ƽ��