Big Shoulders + Work Sans
Industrial Strength
Built for the working class
Big Shoulders Display was designed for Chicago's signage. Bold, proud, and built to work. Work Sans lives up to its name, handling body text with no-nonsense reliability.
Industrial strength meets geometric warmth. Big Shoulders' Chicago-inspired boldness paired with Work Sans's friendly neutrality.
Typefaces Used
Big Shoulders Display
Condensed display inspired by Chicago industrial signage. Bold and urban.
Designed by Patric King
Released 2019
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Work Sans
Grotesque sans optimized for on-screen text. Friendly and highly readable.
Designed by Wei Huang
Released 2014
Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
Recommended Scale
Headline One
Big Shoulders Display · 800 · 58px · 1
Headline Two
Big Shoulders Display · 700 · 38px · 1.1
Headline Three
Work Sans · 600 · 22px · 1.25
Body text for paragraphs and long-form content.
Work Sans · 400 · 16px · 1.7
Caption and metadata text
Work Sans · 500 · 13px · 1.5
In Context
Industrial Strength
Built for the working class
Big Shoulders Display was designed for Chicago's signage. Bold, proud, and built to work. Work Sans lives up to its name, handling body text with no-nonsense reliability.
“Form follows function.”
Louis Sullivan
Developer Exports
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">h1 {
font-family: "Big Shoulders Display", sans-serif;
font-size: 58px;
font-weight: 800;
line-height: 1;
}
h2 {
font-family: "Big Shoulders Display", sans-serif;
font-size: 38px;
font-weight: 700;
line-height: 1.1;
}
h3 {
font-family: "Work Sans", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.25;
}
.body-text {
font-family: "Work Sans", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.caption {
font-family: "Work Sans", sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.5;
}// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
fontFamily: {
bigshouldersdisplay: [""Big Shoulders Display"", "sans-serif"],
worksans: [""Work Sans"", "sans-serif"],
},
fontSize: {
"h1": ["58px", { lineHeight: "1", fontWeight: "800" }],
"h2": ["38px", { lineHeight: "1.1", fontWeight: "700" }],
"h3": ["22px", { lineHeight: "1.25", fontWeight: "600" }],
"body": ["16px", { lineHeight: "1.7", fontWeight: "400" }],
"caption": ["13px", { lineHeight: "1.5", fontWeight: "500" }],
},
},
},
};
export default config;AI-Ready Exports
Copy these structured prompts to brief AI tools on your typography system. Paste directly into ChatGPT, Claude, or any LLM.
System Description
Explain this type system to an AI
Use this typographic system: Headings: Big Shoulders Display, 800 weight Used for H1–H3 Condensed display inspired by Chicago industrial signage. Bold and urban. Body: Work Sans, 400 weight Used for paragraphs and UI Grotesque sans optimized for on-screen text. Friendly and highly readable. Tone: bold, industrial, modern Industrial strength meets geometric warmth. Big Shoulders' Chicago-inspired boldness paired with Work Sans's friendly neutrality. Use this scale: H1 — 58px / 1 H2 — 38px / 1.1 H3 — 22px / 1.25 Body — 16px / 1.7 Caption — 13px / 1.5
UI Generation Prompt
Use when asking AI to generate code
When generating UI or HTML, use this typography system: H1 — Big Shoulders Display — 800 — 58px — line-height 1 H2 — Big Shoulders Display — 700 — 38px — line-height 1.1 H3 — Work Sans — 600 — 22px — line-height 1.25 Body — Work Sans — 400 — 16px — line-height 1.7 Caption — Work Sans — 500 — 13px — line-height 1.5 Headings should feel bold and industrial. Body text should feel readable and modern. Do NOT mix additional fonts. Maintain consistent hierarchy throughout.