# Type Rendering

> Font rendering across platforms, hinting, subpixel rendering, and font loading optimization.

- Skill: `dragoon0x/type-rendering` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/type-rendering`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/type-rendering/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/type-rendering

---


# Type Rendering

## Cross-Platform Differences
| Platform | Rendering | Impact |
|----------|-----------|--------|
| macOS | Smooth, slightly heavier | Looks good at all sizes |
| Windows (ClearType) | Sharper, thinner | Thin weights look bad |
| Linux | Varies by distro | Inconsistent |
| iOS | Same as macOS | Excellent |
| Android | Varies by device | Test on budget devices |

## Font Loading Strategy
```html
<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin>

<!-- Font display strategy -->
@font-face {
  font-family: 'BodyFont';
  src: url('/fonts/body.woff2') format('woff2');
  font-display: swap; /* Show fallback immediately, swap when loaded */
}
```

## Rules
1. WOFF2 format only (best compression, broadest support)
2. Subset fonts (only include characters you use)
3. Preload above-fold fonts
4. `font-display: swap` for body, `optional` for decorative
5. System font stack as fallback with matching metrics
6. Test on Windows with ClearType (thin weights may be unreadable)
7. Variable fonts: one file for all weights (better performance)