TYPOGRAPHY
SYSTEM.
The typography system uses Inter for hierarchy, Public Sans for readable body copy, and IBM Plex Mono for technical context. Scale and weight are fixed so content stays scannable across pages.
01. CORE TYPEFACES
// FONT_FAMILIESCode,
Micro-copy
02. VISUAL HIERARCHY
// SCALE_&_WEIGHTThe Quick Brown Fox
Jumps over the lazy dog.
Design is intelligence made visible.
Simplicity is the ultimate sophistication.
Secondary supporting copy for dense interfaces and annotations.
03. BODY COPY
// READABILITYGood design is innovative. Good design makes a product useful. Good design is aesthetic. Good design makes a product understandable. Good design is unobtrusive. Good design is honest. Good design is long-lasting. Good design is thorough down to the last detail.
Most people make the mistake of thinking design is what it looks like. People think it's this veneer – that the designers are handed this box and told, 'Make it look good!' That's not what we think design is. It's not just what it looks like and feels like. Design is how it works.
04. CODE & TECHNICAL
// SYNTAX_HIGHLIGHTINGconst TypographySystem = {
fontFamily: {
sans: ['Inter', 'sans-serif'],
body: ['Public Sans', 'sans-serif'],
mono: ['IBM Plex Mono', 'monospace'],
},
weights: {
regular: 400,
medium: 500,
bold: 700,
black: 900
}
};
// Initialise system
export default TypographySystem;