Initial commit
This commit is contained in:
Zhongwei Li
609
references/typography.md
Normal file
609
references/typography.md
Normal file
@@ -0,0 +1,609 @@
|
||||
# Netresearch Typography Reference
|
||||
|
||||
Complete typography system with font specifications, hierarchy, and implementation guidelines.
|
||||
|
||||
## Font Family Overview
|
||||
|
||||
| Context | Typeface | Purpose |
|
||||
|---------|----------|---------|
|
||||
| Web Headlines | **Raleway** | Digital headers, navigation, buttons |
|
||||
| Web Body Text | **Open Sans** | Digital body copy, captions, lists |
|
||||
| Documents | **Calibri** | Word, PowerPoint, Excel, email |
|
||||
| Print | **Raleway + Open Sans** | Brochures, flyers, business cards |
|
||||
|
||||
---
|
||||
|
||||
## Raleway (Headlines & Display)
|
||||
|
||||
### Font Specifications
|
||||
|
||||
**Family:** Raleway
|
||||
**Designer:** Matt McInerney, Pablo Impallari, Rodrigo Fuenzalida
|
||||
**License:** Open Font License (free for commercial use)
|
||||
**Classification:** Sans-serif, Geometric
|
||||
|
||||
**Recommended Weights for Netresearch:**
|
||||
- **Regular (400)** - Secondary headlines, navigation
|
||||
- **Semi-Bold (600)** - Buttons, emphasized text
|
||||
- **Bold (700)** - Primary headlines, h1-h2
|
||||
|
||||
### Web Font Loading
|
||||
|
||||
**Google Fonts CDN:**
|
||||
```html
|
||||
<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=Raleway:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
```
|
||||
|
||||
**CSS @import:**
|
||||
```css
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap');
|
||||
```
|
||||
|
||||
**Self-Hosted (Recommended for Performance):**
|
||||
```css
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('/fonts/raleway-regular.woff2') format('woff2'),
|
||||
url('/fonts/raleway-regular.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('/fonts/raleway-semibold.woff2') format('woff2'),
|
||||
url('/fonts/raleway-semibold.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('/fonts/raleway-bold.woff2') format('woff2'),
|
||||
url('/fonts/raleway-bold.woff') format('woff');
|
||||
}
|
||||
```
|
||||
|
||||
### Usage Guidelines
|
||||
|
||||
**Use Raleway For:**
|
||||
- ✅ Page headlines (h1, h2, h3)
|
||||
- ✅ Navigation menu items
|
||||
- ✅ Button labels
|
||||
- ✅ Section headers
|
||||
- ✅ Pull quotes and callouts
|
||||
- ✅ Hero text and taglines
|
||||
|
||||
**Do Not Use Raleway For:**
|
||||
- ❌ Body paragraphs (use Open Sans)
|
||||
- ❌ Long-form content (readability issues)
|
||||
- ❌ Small text below 14px (legibility)
|
||||
- ❌ Dense information tables
|
||||
|
||||
---
|
||||
|
||||
## Open Sans (Body Text)
|
||||
|
||||
### Font Specifications
|
||||
|
||||
**Family:** Open Sans
|
||||
**Designer:** Steve Matteson
|
||||
**License:** Apache License 2.0 (free for commercial use)
|
||||
**Classification:** Sans-serif, Humanist
|
||||
|
||||
**Recommended Weights for Netresearch:**
|
||||
- **Regular (400)** - Body text, lists, captions
|
||||
- **Semi-Bold (600)** - Emphasized body text, labels
|
||||
- **Bold (700)** - Strong emphasis, sub-headers
|
||||
|
||||
### Web Font Loading
|
||||
|
||||
**Google Fonts CDN:**
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
```
|
||||
|
||||
**CSS @import:**
|
||||
```css
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
|
||||
```
|
||||
|
||||
**Self-Hosted:**
|
||||
```css
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('/fonts/opensans-regular.woff2') format('woff2'),
|
||||
url('/fonts/opensans-regular.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('/fonts/opensans-semibold.woff2') format('woff2'),
|
||||
url('/fonts/opensans-semibold.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('/fonts/opensans-bold.woff2') format('woff2'),
|
||||
url('/fonts/opensans-bold.woff') format('woff');
|
||||
}
|
||||
```
|
||||
|
||||
### Usage Guidelines
|
||||
|
||||
**Use Open Sans For:**
|
||||
- ✅ All body copy and paragraphs
|
||||
- ✅ Lists (ordered and unordered)
|
||||
- ✅ Form input text
|
||||
- ✅ Captions and metadata
|
||||
- ✅ Table content
|
||||
- ✅ Footer text
|
||||
|
||||
**Do Not Use Open Sans For:**
|
||||
- ❌ Main page headlines (use Raleway)
|
||||
- ❌ Large display text above 48px (use Raleway)
|
||||
|
||||
---
|
||||
|
||||
## Calibri (Documents)
|
||||
|
||||
### Font Specifications
|
||||
|
||||
**Family:** Calibri
|
||||
**Designer:** Luc(as) de Groot
|
||||
**License:** Microsoft bundled (available on Windows/Office)
|
||||
**Classification:** Sans-serif, Humanist
|
||||
|
||||
**Weights Available:**
|
||||
- Regular (400)
|
||||
- Bold (700)
|
||||
- Italic (400)
|
||||
- Bold Italic (700)
|
||||
|
||||
### Usage Guidelines
|
||||
|
||||
**Use Calibri For:**
|
||||
- ✅ Microsoft Word documents
|
||||
- ✅ PowerPoint presentations
|
||||
- ✅ Excel spreadsheets
|
||||
- ✅ Outlook emails
|
||||
- ✅ Internal documentation
|
||||
|
||||
**Fallback for Non-Microsoft Platforms:**
|
||||
```css
|
||||
font-family: Calibri, 'Open Sans', Arial, sans-serif;
|
||||
```
|
||||
|
||||
**Document Templates:**
|
||||
- **Headings:** Calibri Bold, Turquoise (#2F99A4)
|
||||
- **Body Text:** Calibri Regular, Anthracite (#585961)
|
||||
- **Emphasis:** Calibri Bold or Calibri Italic
|
||||
|
||||
---
|
||||
|
||||
## Typography Scale
|
||||
|
||||
### Web Typography Hierarchy
|
||||
|
||||
```css
|
||||
/* h1 - Page Title */
|
||||
h1 {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #585961;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* h2 - Section Header */
|
||||
h2 {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: #585961;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* h3 - Subsection Header */
|
||||
h3 {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: #585961;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* h4 - Minor Header */
|
||||
h4 {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: #585961;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* h5 - Small Header */
|
||||
h5 {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: #585961;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* Body Text */
|
||||
body, p {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: #585961;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Small Text / Captions */
|
||||
.text-small, small {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: #585961;
|
||||
}
|
||||
|
||||
/* Lead Paragraph */
|
||||
.lead {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: #585961;
|
||||
}
|
||||
```
|
||||
|
||||
### Responsive Typography
|
||||
|
||||
```css
|
||||
/* Mobile First Approach */
|
||||
|
||||
/* Base (Mobile) */
|
||||
h1 { font-size: 32px; }
|
||||
h2 { font-size: 26px; }
|
||||
h3 { font-size: 22px; }
|
||||
h4 { font-size: 18px; }
|
||||
body, p { font-size: 16px; }
|
||||
|
||||
/* Tablet (768px+) */
|
||||
@media (min-width: 768px) {
|
||||
h1 { font-size: 40px; }
|
||||
h2 { font-size: 32px; }
|
||||
h3 { font-size: 26px; }
|
||||
h4 { font-size: 20px; }
|
||||
}
|
||||
|
||||
/* Desktop (1024px+) */
|
||||
@media (min-width: 1024px) {
|
||||
h1 { font-size: 48px; }
|
||||
h2 { font-size: 36px; }
|
||||
h3 { font-size: 28px; }
|
||||
h4 { font-size: 22px; }
|
||||
}
|
||||
|
||||
/* Large Desktop (1440px+) */
|
||||
@media (min-width: 1440px) {
|
||||
h1 { font-size: 56px; }
|
||||
h2 { font-size: 40px; }
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Line Height & Spacing
|
||||
|
||||
### Line Height Guidelines
|
||||
|
||||
```css
|
||||
/* Headlines - Tighter Leading */
|
||||
h1, h2, h3 {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Body Text - Comfortable Reading */
|
||||
p, li, td {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Small Text */
|
||||
small, .caption {
|
||||
line-height: 1.5;
|
||||
}
|
||||
```
|
||||
|
||||
### Vertical Rhythm
|
||||
|
||||
```css
|
||||
/* Consistent spacing system */
|
||||
:root {
|
||||
--spacing-xs: 8px;
|
||||
--spacing-sm: 12px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
--spacing-xxl: 48px;
|
||||
}
|
||||
|
||||
/* Apply to typography */
|
||||
h1 { margin-bottom: var(--spacing-lg); }
|
||||
h2 { margin-bottom: var(--spacing-lg); }
|
||||
h3 { margin-bottom: var(--spacing-md); }
|
||||
h4, h5 { margin-bottom: var(--spacing-sm); }
|
||||
p { margin-bottom: var(--spacing-md); }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Special Typography Elements
|
||||
|
||||
### Buttons
|
||||
|
||||
```css
|
||||
.btn {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
font-size: 14px;
|
||||
}
|
||||
```
|
||||
|
||||
### Navigation
|
||||
|
||||
```css
|
||||
.nav-link {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
```
|
||||
|
||||
### Blockquotes / Pull Quotes
|
||||
|
||||
```css
|
||||
blockquote {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
font-style: italic;
|
||||
color: #2F99A4;
|
||||
border-left: 4px solid #FF4D00;
|
||||
padding-left: 24px;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
color: #585961;
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
### Lists
|
||||
|
||||
```css
|
||||
ul, ol {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Custom bullet points using brand color */
|
||||
ul.branded {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ul.branded li::before {
|
||||
content: '●';
|
||||
color: #2F99A4;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-left: -1em;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Font Loading Strategy
|
||||
|
||||
### Performance Optimization
|
||||
|
||||
```html
|
||||
<!-- Critical CSS with system font fallback -->
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Preload critical fonts -->
|
||||
<link rel="preload"
|
||||
href="/fonts/raleway-bold.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossorigin>
|
||||
<link rel="preload"
|
||||
href="/fonts/opensans-regular.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossorigin>
|
||||
```
|
||||
|
||||
### Font Display Strategy
|
||||
|
||||
```css
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-display: swap; /* Show fallback immediately, swap when loaded */
|
||||
/* ... other properties */
|
||||
}
|
||||
```
|
||||
|
||||
### Fallback Stack
|
||||
|
||||
```css
|
||||
/* Complete fallback chain */
|
||||
--font-headlines: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, sans-serif;
|
||||
--font-documents: Calibri, 'Open Sans', Arial, sans-serif;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Considerations
|
||||
|
||||
### Minimum Font Sizes
|
||||
|
||||
- **Body text:** Never below 16px (1rem)
|
||||
- **Small text:** Never below 14px (0.875rem)
|
||||
- **Buttons:** Minimum 16px for touch targets
|
||||
|
||||
### Contrast Requirements
|
||||
|
||||
All text must meet WCAG AA:
|
||||
- **Normal text:** 4.5:1 contrast ratio
|
||||
- **Large text (≥18px):** 3:1 contrast ratio
|
||||
|
||||
### Readability
|
||||
|
||||
**Line Length:**
|
||||
- Optimal: 50-75 characters per line
|
||||
- Maximum: 90 characters per line
|
||||
|
||||
```css
|
||||
.content {
|
||||
max-width: 75ch; /* Character-based width */
|
||||
}
|
||||
```
|
||||
|
||||
**Paragraph Spacing:**
|
||||
```css
|
||||
p + p {
|
||||
margin-top: 16px; /* Clear paragraph separation */
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## CSS Custom Properties (Complete Set)
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Font Families */
|
||||
--font-headline: 'Raleway', sans-serif;
|
||||
--font-body: 'Open Sans', sans-serif;
|
||||
--font-document: Calibri, 'Open Sans', sans-serif;
|
||||
|
||||
/* Font Sizes */
|
||||
--font-size-xs: 12px;
|
||||
--font-size-sm: 14px;
|
||||
--font-size-base: 16px;
|
||||
--font-size-lg: 18px;
|
||||
--font-size-xl: 20px;
|
||||
--font-size-2xl: 24px;
|
||||
--font-size-3xl: 28px;
|
||||
--font-size-4xl: 36px;
|
||||
--font-size-5xl: 48px;
|
||||
--font-size-6xl: 56px;
|
||||
|
||||
/* Font Weights */
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* Line Heights */
|
||||
--line-height-tight: 1.2;
|
||||
--line-height-snug: 1.4;
|
||||
--line-height-normal: 1.6;
|
||||
--line-height-relaxed: 1.8;
|
||||
|
||||
/* Letter Spacing */
|
||||
--letter-spacing-tight: -0.5px;
|
||||
--letter-spacing-normal: 0;
|
||||
--letter-spacing-wide: 0.5px;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typography Testing Checklist
|
||||
|
||||
Before deploying:
|
||||
|
||||
- [ ] Fonts load correctly on all major browsers
|
||||
- [ ] Fallback fonts provide acceptable experience
|
||||
- [ ] All text meets WCAG AA contrast requirements
|
||||
- [ ] Font files optimized (woff2 format preferred)
|
||||
- [ ] Font-display: swap implemented
|
||||
- [ ] Line lengths within 50-90 character range
|
||||
- [ ] Responsive typography scales appropriately
|
||||
- [ ] No text smaller than 14px in production
|
||||
- [ ] Headlines use Raleway, body uses Open Sans
|
||||
- [ ] Documents use Calibri with proper fallbacks
|
||||
|
||||
---
|
||||
|
||||
*Last updated: 2025-10-18*
|
||||
*Maintained by: Netresearch DTT GmbH*
|
||||
Reference in New Issue
Block a user