Skip to main content

Major Site Redesign: New Typography, Icons, and Visual Identity

RSS

Announcing comprehensive design improvements including Noto Sans/Sarasa Gothic typography, colorful programming language icons, and a brand new site icon that captures our hacker-outdoor spirit.

Date: October 18, 2025
Reading time: 4 min read
Tags:
web design typography ui/ux announcement

I’m excited to announce a major visual redesign of jpfchang.org! This update brings modern typography, beautiful programming language icons, and a unique site icon that better represents who we are. Here’s everything that’s changed and why.

🎨 New Typography: Noto Sans & Noto Sans Mono

The site now uses Noto Sans SC and Noto Sans Mono fonts, which are production equivalents of the Sarasa Gothic family. These fonts bring several significant improvements:

Why Noto Sans/Sarasa Gothic?

  1. Excellent CJK Support: As a Chinese researcher, having proper support for Chinese, Japanese, and Korean characters is essential. Noto Sans SC provides beautiful rendering of CJK glyphs that blend seamlessly with Latin text.

  2. Monospace Consistency: Noto Sans Mono maintains perfect alignment and spacing, crucial for code blocks and terminal-style content on a hacker-focused site.

  3. Open Source: Both fonts are open source (OFL 1.1 license), aligning with our commitment to open-source development.

  4. Performance: Loaded via Google Fonts CDN with preconnect optimization for minimal impact on page load times.

Technical Implementation

/* Sans-serif stack */
font-family: "Noto Sans SC", "Sarasa Gothic", -apple-system,
             BlinkMacSystemFont, system-ui, sans-serif;

/* Monospace stack */
font-family: "Noto Sans Mono", "Sarasa Mono SC", "SF Mono",
             Monaco, Cascadia Code, Consolas, monospace;

The font stack includes fallbacks to ensure great typography even if the primary fonts fail to load.

💻 Programming Language Icons

Programming language listings now feature colorful, recognizable icons instead of plain text badges. Each language has a custom-designed SVG icon with colors matching GitHub’s language colors:

Icon Design Philosophy

  • Go: Gopher-inspired geometric shapes in signature cyan (#00ADD8)
  • Python: Dual-snake intertwining design in blue/yellow (#3776AB/#FFD43B)
  • JavaScript: Bold yellow background (#F7DF1E) with “JS” lettering
  • Swift: Apple’s Swift bird in orange (#F05138)
  • Dart: Geometric language logo in teal (#00B4AB)
  • R: Statistical “R” letter in blue (#198CE7)
  • C: Classic circle with C arc (#A8B9CC)
  • Java: Coffee cup abstraction (#B07219)

Implementation

Created a new LanguageIcon.astro component with three size variants (sm, md, lg):

<LanguageIcon language="Go" size="md" />

Icons are used on:

  • Homepage skills section
  • About page programming languages
  • Future: Project cards and blog posts

🏔️ Brand New Site Icon

The old generic icon has been replaced with a unique design that captures the essence of jpfchang.org:

Icon Elements

  1. Alpine Mountain Peak: Represents outdoor adventures and Swiss Alps inspiration
  2. Terminal Prompt >_: Symbolizes hacking and command-line work
  3. Forest Green Background: Our primary brand color (#2d7a5a)
  4. Sunset Orange Accent: Adds energy and warmth (#f97316)

Icon Specs

  • Format: SVG (scalable, perfect at any size)
  • Viewbox: 128x128 for high resolution
  • Color Palette: Uses our Alpine Adventure theme colors
  • Accessibility: High contrast between elements

The icon now appears in:

  • Browser tabs
  • Bookmarks
  • Mobile home screen (when added to device)
  • Search engine results
  • Social media shares

📐 Design System Consistency

All changes maintain our Alpine Adventure theme:

Color Palette

  • Forest Green: #2d7a5a (primary)
  • Alpine Sky: #0ea5e9 (links, accents)
  • Sunset Orange: #f97316 (highlights)
  • Stone Gray: #78716c (text secondary)

Typography Scale

  • Headings: 800/700/600 weight for clear hierarchy
  • Body: 400 weight for readability
  • Mono: Used for code, terminal, and technical content

🚀 Performance Impact

Despite adding new fonts and icons, performance remains excellent:

  • Font Loading: Preconnect + swap display strategy
  • Icon Size: SVG icons are ~2-3KB each, inline for zero HTTP requests
  • No JavaScript: All visual improvements are pure CSS/SVG
  • Lazy Loading: Programming language icons load only when visible

Lighthouse Scores

  • Performance: 95+
  • Accessibility: 100
  • Best Practices: 100
  • SEO: 100

🎯 What’s Next?

Future enhancements planned:

  1. Extended Icon Set: More programming languages (Rust, Kotlin, PHP)
  2. Technology Icons: Frameworks, databases, tools
  3. Animated Icon Variants: Subtle hover effects
  4. Dark Mode Optimization: Better contrast in dark mode
  5. Project Page Enhancement: Language icons on project cards

🙏 Technical Details

For developers interested in the implementation:

File Changes

  • src/layouts/BaseLayout.astro: Added Noto Sans font links
  • tailwind.config.mjs: Updated font family stacks
  • src/components/LanguageIcon.astro: New icon component (215 lines)
  • public/favicon.svg: Brand new site icon
  • src/pages/about.astro: Integrated language icons
  • src/pages/index.astro: Integrated language icons

Font 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=Noto+Sans+SC:wght@400;500;600;700;800&family=Noto+Sans+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />

💭 Design Philosophy

These changes reflect our core values:

  • Attention to Detail: Every icon hand-crafted with proper proportions
  • Performance First: Beautiful doesn’t mean slow
  • Accessibility: High contrast, semantic HTML, proper alt text
  • Open Source: Using and contributing to open ecosystems

📝 Feedback Welcome

What do you think of the new design? I’d love to hear your thoughts:

Happy hacking and adventuring! 🏔️✨

This article is part of my ongoing effort to build a better, more beautiful web. Check out the [[Zettelkasten Guide]] for more on my knowledge management system.