Why Typography Matters
What is typography used for? Typography is everywhere text plays a role—on websites, in documents, on social media, in presentations, on packaging, and in all communication materials. It doesn't just make content readable, but also conveys personality and mood. The right font choice creates hierarchy, directs attention, and helps communicate complex information clearly. Typography is the foundation on which your messages build.
Why is it so important? Type is more than just letters on a page—it's a powerful communication tool. The right typography makes the difference between "that looks professional" and "that looks carelessly thrown together". It influences how people perceive your content and whether they take the time to read it. Consistent typography builds trust, improves readability, and makes your brand recognizable. Bad typography can ruin even the best content.
What can you achieve with it? With professional typography, you improve the readability of your content and make it more accessible to your target audience. You create a visual hierarchy that guides people through your content and highlights important information. The right font choice conveys your brand personality and makes your communication consistent and trustworthy. Whether it's short headlines or long texts—good typography makes the difference between "forgotten" and "unforgettable".
Hanken Grotesk - Heading Font
The official brand font (Hausschrift) for kieks.me GbR. Used for headings, UI elements, and brand-specific typography.
The quick brown fox jumps over the lazy dog
Weight 300 - Light
The quick brown fox jumps over the lazy dog
Weight 400 - Regular
The quick brown fox jumps over the lazy dog
Weight 500 - Medium
The quick brown fox jumps over the lazy dog
Weight 700 - Bold
Usage
- Headings (H1-H6)
- UI elements and buttons
- Brand-specific typography
- Navigation menus
Source: Google Fonts
License: SIL Open Font License 1.1 | View License Details
Source Sans 3 - Body Font
Used for body text and long-form content. Optimized for readability.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Weight 400 - Regular, 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Weight 600 - Semi-Bold, 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Weight 400 - Regular, Italic, 18px
Usage
- Body text and paragraphs
- Long-form content
- Readable content blocks
- Descriptions and captions
Source: Google Fonts
License: SIL Open Font License 1.1 | View License Details
Typography Showcase
Hanken Grotesk - Heading Font
Weight 300 - Light
The quick brown fox jumps over the lazy dog
H1: 48px / 3rem, Light (300)
The quick brown fox jumps over the lazy dog
H2: 40px / 2.5rem, Light (300)
The quick brown fox jumps over the lazy dog
H3: 32px / 2rem, Light (300)
The quick brown fox jumps over the lazy dog
H3: 32px / 2rem, Light (300), Italic
Weight 400 - Regular
The quick brown fox jumps over the lazy dog
H1: 48px / 3rem, Regular (400)
The quick brown fox jumps over the lazy dog
H2: 40px / 2.5rem, Regular (400)
The quick brown fox jumps over the lazy dog
H3: 32px / 2rem, Regular (400), Italic
Weight 500 - Medium
The quick brown fox jumps over the lazy dog
H1: 48px / 3rem, Medium (500)
The quick brown fox jumps over the lazy dog
H2: 40px / 2.5rem, Medium (500)
The quick brown fox jumps over the lazy dog
H3: 32px / 2rem, Medium (500)
The quick brown fox jumps over the lazy dog
H4: 24px / 1.5rem, Medium (500)
The quick brown fox jumps over the lazy dog
H5: 20px / 1.25rem, Medium (500)
The quick brown fox jumps over the lazy dog
H6: 16px / 1rem, Medium (500)
The quick brown fox jumps over the lazy dog
H4: 24px / 1.5rem, Medium (500), Italic
Weight 700 - Bold
The quick brown fox jumps over the lazy dog
H1: 48px / 3rem, Bold (700)
The quick brown fox jumps over the lazy dog
H2: 40px / 2.5rem, Bold (700)
The quick brown fox jumps over the lazy dog
H3: 32px / 2rem, Bold (700), Italic
Source Sans 3 - Body Font
Weight 400 - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Body Large: 18px / 1.125rem, Regular (400), Line Height: 1.5-1.6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Body: 16px / 1rem, Regular (400), Line Height: 1.5-1.6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Body Small: 14px / 0.875rem, Regular (400), Line Height: 1.5-1.6
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Caption: 12px / 0.75rem, Regular (400), Line Height: 1.4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Body Large: 18px / 1.125rem, Regular (400), Italic
Weight 600 - Semi-Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Body Large: 18px / 1.125rem, Semi-Bold (600), Line Height: 1.5-1.6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Body: 16px / 1rem, Semi-Bold (600), Line Height: 1.5-1.6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Body Large: 18px / 1.125rem, Semi-Bold (600), Italic
Font Pairing
Use Hanken Grotesk for headings and Source Sans 3 for body text to maintain brand consistency.
Heading Example
This is how the fonts work together. The heading uses Hanken Grotesk in bold, while the body text uses Source Sans 3 for optimal readability. This combination creates a clear visual hierarchy and maintains brand consistency across all communications.
Subheading Example
Smaller headings use medium weight, while body text remains consistent. This pairing ensures readability and visual appeal across all screen sizes and contexts.
Usage Examples
CSS Variables
body {
font-family: var(--font-body);
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
}Google Fonts
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">Download Font Files
Download the complete font package including Hanken Grotesk and Source Sans 3 in all available weights and styles.
Font Licenses
Both fonts used in the kieks.me GbR brand identity are licensed under the SIL Open Font License 1.1 (OFL), which allows free use, modification, and distribution for both personal and commercial purposes.
Hanken Grotesk
Source Sans 3
License Information
For detailed license information, including permissions, limitations, and full license text, please refer to:
The SIL Open Font License allows commercial use, modification, and distribution. Fonts cannot be sold by themselves, and original copyright notices must be preserved.