dragoon0x/everything-design-taste
type-rendering
Font rendering across platforms, hinting, subpixel rendering, and font loading optimization.
First seen Jul 18, 2026
Installation
$
npx skills add dragoon0x/everything-design-taste --skill type-rendering
SKILL.md
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
<!-- 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
- WOFF2 format only (best compression, broadest support)
- Subset fonts (only include characters you use)
- Preload above-fold fonts
font-display: swap for body, optional for decorative
- System font stack as fallback with matching metrics
- Test on Windows with ClearType (thin weights may be unreadable)
- Variable fonts: one file for all weights (better performance)