✏️ Typography tools — how words look
Typography decides how your words feel as much as what they say. Font choice, kerning, leading, and alignment shift the same sentence between trustworthy and chaotic. PXLTool's typography category covers font preview/pairing, Lorem Ipsum generation, CSS text effects (shadow, gradient, glitch), unicode fancy fonts, em/rem/px unit conversion — the full web typography toolkit.
📐 Recommended workflow (brand typography system)
- Decide tone — sans-serif (modern), serif (classic/trust), slab (impact), display (personality).
- Choose body font — Inter, Roboto, Source Sans, or Pretendard Variable for multilingual.
- Pair display font — Font Pair finds natural display+body combinations.
- Type scale — em·rem·px Converter builds a 1.25× (Major Third) scale: 12/14/16/18/24/32/48px.
- Kerning + leading — Body 0%, display -1% to -3%. Line-height 1.6 body, 1.2 display.
- CSS effects — Gradient Text and Text Shadow for accent elements.
- Readability check — Mobile body text 16px+ (iOS auto-zooms below). Line length 50-75 chars.
🛠 All typography tools
💡 Typography best practices
- Use Variable Fonts. One Inter Variable file delivers weights 100-900. Faster page load.
- Two fonts per page max. Display + body. Three+ reads as undesigned.
- Match x-height when mixing languages. Latin + CJK pairs need similar x-height and stroke weight.
- Body 16px minimum. iOS form fields zoom in below 16. Body 17-18px is safest.
- Use locale-appropriate Lorem. Latin Lorem doesn't validate CJK kerning. Pick the right dummy text per language.