The Art of Building
Type Reference
The type styles in use across the site, rendered live from the production stylesheets. Serif is Miller Display; sans is Univers Next Pro. Sizes listed are the desktop maximums — the larger styles scale down fluidly on smaller screens.
H1 — type-display
Miller Display Italic 300 — 48px, bronze, open leading + slight tracking
Used: Homepage headline statement; Field Notes headline statement; field note titles.
The Art of Building brings together architectural design and high-workmanship construction.
Setting Trusses
H2 — type-lead
Miller Display 300 — 36px, bronze
Used: Lead paragraphs; project page titles.
The Art of Building is a full-service design and construction company based in Rhinebeck, New York.
Northern Boulevard Farmhouse
H3 — type-card-title
Miller Display 300 — 28px, bronze (or white over images); cards add type-small-caps
Used: Card titles (projects and field notes, small caps); project meta values; Services hero copy.
Old Primrose Hill Pool
Body text style
Old Primrose Hill Pool
Body text style
H4 — type-section-title
Univers Next Pro 400 — 20px, bronze
Used: Service titles; team member names.
Planning and Design
Body text style
LABEL 1 — type-category-title
Miller Display Italic 300 — 28px, title case, bronze
Used: Category titles on the Projects page (“Houses & Barns”); project category archive titles.
Houses & Barns
LABEL 2 — type-eyebrow
Univers Next Pro 400 — 18px (14px on mobile, matching MENU), tracked, uppercase, black
Used: “Featured Projects”, “Other Projects”, “Field Notes”; category tags; hero eyebrows.
Featured Projects
Other Projects
NAV / PRIMARY BUTTON / SECONDARY BUTTON / CAPTION — type-nav-link · type-link-cta · type-button · type-caption
Univers Next Pro 500 — 14px, tracked, bronze
Used: Header and footer navigation; “View all …” links; bordered “View all …” buttons under each category on the Projects page (also the editor Button format); image captions (sentence case).
View all projects
Setting trusses at Round Lake, October 2024
BODY 0 — type-body-large
Univers Next Pro 300 — 23px, black
Used: Homepage statement body copy; field note intro body.
We approach every project as a technically pragmatic but creative endeavor that, above all else, should be an expression of each owner’s unique personality.
BODY 1 — type-body · prose
Univers Next Pro 300 — 18px, black
Used: All body copy, including WYSIWYG content.
We approach every project as a technically pragmatic but creative endeavor that, above all else, should be an expression of each owner’s unique personality. Regardless of project size, or scope, we believe in timeless, artistic, and contextually-sensitive design solutions that are durably and thoughtfully built.
Notes from the site
Last week’s weather was perfect for setting trusses at our Round Lake project.
Timeless, artistic, and contextually-sensitive design that can be durably and pragmatically built.
- Planning & Design
- New Construction
- Historic Restoration
BODY 1 (cards) — type-card-body
Univers Next Pro 300 — 18px, ramps to 14px on mobile with the H3
Used: Project card descriptors and field note card category labels — keeps the 28:18 title/body relationship at every width.
Violet Hill
Reworking Flow for a Historic Home
BODY 2 — type-small
Univers Next Pro 300 — 17px (14px × 120%), black
Used: Footer columns; Terms and Conditions.
The Art of Building
64 E Market Street
Rhinebeck, NY 12572
Terms and Conditions
Utilities
type-small-caps (OpenType small caps) · nums-oldstyle (descending figures)
Used: Inline treatments available in the editor.
Small Caps Treatment
Established 2013 — 0123456789