Typography
Text Styling
Tailwind មាន utility classes សម្រាប់រចនាអត្ថបទ។ Typography គឺជាសិល្បៈនៃការរៀបចំអត្ថបទ ដើម្បីឲ្យងាយអាន, ស្រស់ស្អាត និងទាក់ទាញ។
📐 Font Family System
Tailwind ផ្តល់ font families 3 យ៉ាង:
| Class | Font Stack | Use Case |
|---|---|---|
font-sans |
ui-sans-serif, system-ui, sans-serif | Body text, headings (default, most common) |
font-serif |
ui-serif, Georgia, serif | Formal content, articles, blogs |
font-mono |
ui-monospace, Courier, monospace | Code snippets, technical text |
📏 Font Size Scale
Tailwind ប្រើ size scale ដែលធ្វើឲ្យ hierarchy ច្បាស់លាស់:
| Class | Size (rem) | Size (px) | Common Use |
|---|---|---|---|
text-xs |
0.75rem | 12px | Small labels, captions |
text-sm |
0.875rem | 14px | Small body text, descriptions |
text-base |
1rem | 16px | Body text (default) |
text-lg |
1.125rem | 18px | Large body text, lead paragraphs |
text-xl |
1.25rem | 20px | Small headings, emphasized text |
text-2xl |
1.5rem | 24px | H3 headings |
text-3xl |
1.875rem | 30px | H2 headings |
text-4xl |
2.25rem | 36px | H1 headings |
text-5xl |
3rem | 48px | Page titles |
text-6xl |
3.75rem | 60px | Hero headings |
text-7xl |
4.5rem | 72px | Extra large hero |
text-8xl |
6rem | 96px | Display text |
text-9xl |
8rem | 128px | Ultra large display |
⚖️ Font Weight Scale
Font weight controls ទម្ងន់ អក្សរ (얼마나 bold):
| Class | Weight | Visual | Use Case |
|---|---|---|---|
font-thin |
100 | Very light | Decorative headings (rarely used) |
font-extralight |
200 | Extra light | Subtle decorative text |
font-light |
300 | Light | Elegant headings, captions |
font-normal |
400 | Normal | Body text (default) |
font-medium |
500 | Medium | Emphasized body, button text |
font-semibold |
600 | Semi-bold | Headings, important text |
font-bold |
700 | Bold | Primary headings |
font-extrabold |
800 | Extra bold | Hero headings, CTAs |
font-black |
900 | Black (heaviest) | Ultra bold display text |
📏 Line Height (Leading)
Line height controls ចម្ងាយរវាង lines of text:
| Class | Line Height | Use Case |
|---|---|---|
leading-3 |
0.75rem (12px) | Very tight (rarely used) |
leading-tight |
1.25 | Headings, titles (compact) |
leading-snug |
1.375 | Subheadings |
leading-normal |
1.5 | Body text (default, best readability) |
leading-relaxed |
1.625 | Comfortable reading for long articles |
leading-loose |
2 | Poetry, special formatting |
🔤 Letter Spacing (Tracking)
Letter spacing controls ចម្ងាយរវាង characters:
| Class | Spacing | Use Case |
|---|---|---|
tracking-tighter |
-0.05em | Compact headings |
tracking-tight |
-0.025em | Tight headings, logos |
tracking-normal |
0em | Default (body text) |
tracking-wide |
0.025em | Uppercase text, buttons |
tracking-wider |
0.05em | All caps headings |
tracking-widest |
0.1em | Spaced out CAPS (decorative) |
🎯 Typography Best Practices
| ✅ DO | ❌ DON'T |
|---|---|
| Use 16px (text-base) for body text | Use smaller than 14px for main content |
| Limit line length to 60-80 characters | Create lines longer than 100 characters |
| Use leading-relaxed for long articles | Use tight line-height for paragraphs |
| Pair sans-serif headings with serif body | Mix too many font families |
| Use font-bold (700) for headings | Use font-black everywhere (overused) |
| Add tracking-wide for all-caps text | Use all caps without spacing adjustment |
| Create visual hierarchy (size + weight) | Make all text the same size |
📱 Responsive Typography
Typography ត្រូវ adapt to screen size:
| Element | Mobile | Desktop | Class Example |
|---|---|---|---|
| Hero Heading | text-4xl | text-6xl | text-4xl md:text-6xl |
| Page Title | text-3xl | text-5xl | text-3xl md:text-5xl |
| Section Heading | text-2xl | text-3xl | text-2xl md:text-3xl |
| Body Text | text-base | text-lg | text-base md:text-lg |
📚 Common Typography Patterns
| Pattern | Classes | Purpose |
|---|---|---|
| Hero Heading | text-5xl font-extrabold leading-tight |
Landing page hero section |
| Article Title | text-4xl font-bold leading-tight |
Blog post, article headings |
| Section Heading | text-2xl font-semibold |
Section titles |
| Body Paragraph | text-base leading-relaxed |
Main content, long-form reading |
| Quote | text-lg italic font-serif |
Blockquotes, testimonials |
| Button Text | text-sm font-semibold uppercase tracking-wide |
Call-to-action buttons |
| Caption | text-xs text-gray-500 |
Image captions, metadata |
| Code | font-mono text-sm |
Inline code, code blocks |
♿ Typography Accessibility
| Guideline | Recommendation |
|---|---|
| Minimum Size | Use at least 16px (text-base) for body text |
| Line Length | Keep lines between 60-80 characters (use max-w-prose) |
| Line Height | Use 1.5 (leading-normal) or more for body text |
| Contrast | Ensure WCAG AA (4.5:1) for text-gray-600 and darker |
| ALL CAPS | Add tracking-wide for better readability |
| Italic Use | Avoid long passages in italic (harder to read) |
Font Size & Weight
ឧទាហរណ៍ font sizes និង font weights ទាំងអស់ ពី thin ដល់ black, និងពី xs ដល់ 9xl។
Text Alignment & Transform
ការតម្រឹម text (left, center, right, justify) និង text transform (uppercase, lowercase, capitalize)។