Typography & Font Showcase
Typography & Font Showcase#
This post demonstrates the new Nunito Sans typography for body text and headings, plus the Iosevka monospace font for code elements.
Nunito Sans Typography#
This body text is displayed in Nunito Sans, a clean and modern sans-serif font that provides excellent readability. The font supports multiple weights and styles:
- Regular weight for body text
- Bold weight for emphasis
- Italic style for subtle emphasis
- Bold italic for strong emphasis
Headings Hierarchy#
All headings from H1 to H6 use Nunito Sans with increased font weights:
Heading 1 - Main Title#
Heading 2 - Section Title#
Heading 3 - Subsection#
Heading 4 - Sub-subsection#
Heading 5 - Minor heading#
Heading 6 - Smallest heading#
Iosevka Code Font Showcase#
The following examples demonstrate the Iosevka monospace font with programming ligatures:
JavaScript Example#
|
|
Python Example#
|
|
CSS Example#
|
|
Rust Example#
|
|
Inline Code Examples#
When referencing code inline, such as const myVariable = 'value'
or function getName() { return 'Stefan'; }
, the Iosevka font provides excellent readability with proper ligatures.
Font Features#
Iosevka Ligatures#
The Iosevka font includes programming ligatures that combine multiple characters into single glyphs:
=>
becomes →>=
becomes ≥<=
becomes ≤!=
becomes ≠===
becomes a triple line->
becomes →<-
becomes ←
Typography Benefits#
Nunito Sans advantages:
- Excellent screen readability
- Multiple weights (300, 400, 600, 700, 800)
- Clean, modern appearance
- Good spacing and kerning
Iosevka advantages:
- Programming ligatures
- Consistent character width
- Clear distinction between similar characters (0/O, 1/l/I)
- Optimized for code readability
Color Scheme#
The site uses a clean color palette:
- Light theme: White background with dark blue text (#141c2b)
- Dark theme: Dark blue background with white text
- Automatic switching based on system preferences
This creates excellent contrast and readability in both light and dark environments.