zhongwei/gh-netresearch-claude-code-marketplace-skills-netresearch-branding

Fork 0

Files

Zhongwei Li a662a1824b Initial commit

2025-11-30 08:43:19 +08:00

12 KiB

Raw Permalink Blame History

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:

<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:

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap');

Self-Hosted (Recommended for Performance):

@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:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">

CSS @import:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

Self-Hosted:

@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:

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

/* 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

/* 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

/* 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

/* 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

.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;
}

.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

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

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

<!-- 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

@font-face {
  font-family: 'Raleway';
  font-display: swap; /* Show fallback immediately, swap when loaded */
  /* ... other properties */
}

Fallback Stack

/* 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

.content {
  max-width: 75ch; /* Character-based width */
}

Paragraph Spacing:

p + p {
  margin-top: 16px; /* Clear paragraph separation */
}

CSS Custom Properties (Complete Set)

: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

12 KiB Raw Permalink Blame History

Netresearch Typography Reference

Font Family Overview

Raleway (Headlines & Display)

Font Specifications

Web Font Loading

Usage Guidelines

Open Sans (Body Text)

Font Specifications

Web Font Loading

Usage Guidelines

Calibri (Documents)

Font Specifications

Usage Guidelines

Typography Scale

Web Typography Hierarchy

Responsive Typography

Line Height & Spacing

Line Height Guidelines

Vertical Rhythm

Special Typography Elements

Buttons

Navigation

Blockquotes / Pull Quotes

Lists

Font Loading Strategy

Performance Optimization

Font Display Strategy

Fallback Stack

Accessibility Considerations

Minimum Font Sizes

Contrast Requirements

Readability

CSS Custom Properties (Complete Set)

Typography Testing Checklist

12 KiB

Raw Permalink Blame History