Typography
Bootstrap Typography (អក្សរសិល្ប៍)
Bootstrap ផ្តល់នូវ classes សម្រាប់ធ្វើការទ្រង់ទ្រាយអត្ថបទបានងាយស្រួល។ រួមមាន headings, text utilities, colors, alignment, និងច្រើនទៀត។
📏 Heading Sizes & Display Headings
| Heading Type | Class/Tag | Font Size | Use Case |
|---|---|---|---|
| H1 Heading | <h1> or .h1 |
2.5rem (40px) | ចំណងជើងធំបំផុត - page title |
| H2 Heading | <h2> or .h2 |
2rem (32px) | Section headings |
| H3 Heading | <h3> or .h3 |
1.75rem (28px) | Subsection headings |
| H4 Heading | <h4> or .h4 |
1.5rem (24px) | Card titles, smaller sections |
| H5 Heading | <h5> or .h5 |
1.25rem (20px) | Minor headings |
| H6 Heading | <h6> or .h6 |
1rem (16px) | Smallest heading |
| Display 1 | .display-1 |
5rem (80px) | Hero sections - ធំពិសេសបំផុត |
| Display 2 | .display-2 |
4.5rem (72px) | Large landing page titles |
| Display 3 | .display-3 |
4rem (64px) | Major announcements |
| Display 4 | .display-4 |
3.5rem (56px) | Section intros |
| Display 5 | .display-5 |
3rem (48px) | Smaller displays |
| Display 6 | .display-6 |
2.5rem (40px) | Smallest display (same as h1) |
🎨 Font Weight & Style
| Class | CSS Value | Visual Effect | Use Case |
|---|---|---|---|
.fw-bold |
font-weight: 700 | អក្សរដិត (bold) | Emphasis, headings, important text |
.fw-bolder |
font-weight: bolder | ដិតជាង parent | Extra emphasis within bold text |
.fw-semibold |
font-weight: 600 | ពាក់កណ្តាលដិត | Subtle emphasis, labels |
.fw-medium |
font-weight: 500 | មធ្យម | Slightly emphasized text |
.fw-normal |
font-weight: 400 | ធម្មតា (default) | Body text, paragraphs |
.fw-light |
font-weight: 300 | ស្តើង (light) | Subtle text, secondary info |
.fw-lighter |
font-weight: lighter | ស្តើងជាង parent | De-emphasized text |
.fst-italic |
font-style: italic | អក្សរទ្រេត | Quotes, emphasis, foreign words |
.fst-normal |
font-style: normal | អក្សរធម្មតា | Reset italic text |
📝 Font Size Utilities
| Class | Size (rem) | Size (px) | Best For |
|---|---|---|---|
.fs-1 |
2.5rem | 40px | ទំហំធំបំផុត - large headings |
.fs-2 |
2rem | 32px | Section headings |
.fs-3 |
1.75rem | 28px | Subheadings |
.fs-4 |
1.5rem | 24px | Card titles, lead text |
.fs-5 |
1.25rem | 20px | Slightly larger body text |
.fs-6 |
1rem | 16px | ទំហំធម្មតា (default body text) |
🔤 Text Transform & Decoration
| Class | CSS Property | Effect | Example |
|---|---|---|---|
.text-lowercase |
text-transform: lowercase | អក្សរតូចទាំងអស់ | HELLO → hello |
.text-uppercase |
text-transform: uppercase | អក្សរធំទាំងអស់ | hello → HELLO |
.text-capitalize |
text-transform: capitalize | អក្សរដើមធំគ្រប់ពាក្យ | hello world → Hello World |
.text-decoration-underline |
text-decoration: underline | បន្ទាត់ពីក្រោម | Underlined text |
.text-decoration-line-through |
text-decoration: line-through | បន្ទាត់ឆ្លងកាត់ | |
.text-decoration-none |
text-decoration: none | គ្មានបន្ទាត់ (remove underline from links) | Clean link text |
📐 Text Alignment
| Class | Alignment | Responsive Variants |
|---|---|---|
.text-start |
តម្រឹមឆ្វេង (left align) | .text-sm-start, .text-md-start, etc. |
.text-center |
តម្រឹមកណ្តាល (center) | .text-sm-center, .text-md-center, etc. |
.text-end |
តម្រឹមស្តាំ (right align) | .text-sm-end, .text-md-end, etc. |
📄 Text Wrapping & Overflow
| Class | Behavior | Use Case |
|---|---|---|
.text-wrap |
អត្ថបទរុំទៅបន្ទាត់ក្រោម (wrap normally) | Long paragraphs, normal text flow |
.text-nowrap |
មិនរុំ (stay on one line) | Buttons, labels, short phrases |
.text-break |
បំបែកពាក្យវែងពេក (break long words) | URLs, long unbreakable strings |
.text-truncate |
កាត់ជា ... (ellipsis overflow) | Single-line truncated text, titles |
💬 Special Typography Elements
| Element/Class | Purpose | Styling |
|---|---|---|
.lead |
អត្ថបទសំខាន់ (introductory paragraph) | Larger font (1.25rem), lighter weight |
.blockquote |
សម្រង់ (quotations) | Left border, larger font, margin |
.blockquote-footer |
អ្នកនិពន្ធសម្រង់ (quote attribution) | Smaller, muted color |
.list-unstyled |
List គ្មាន bullets | Removes bullets and default padding |
.list-inline |
List ផ្តេក (horizontal list) | Items displayed inline |
.list-inline-item |
Item នៃ inline list | Horizontal spacing between items |
<small> or .small |
អត្ថបទតូច (secondary text) | 85% of parent font size |
<mark> or .mark |
អត្ថបទលេចធ្លោ (highlighted text) | Yellow background highlight |
✅ Typography Best Practices
| ❌ Avoid | ✅ Best Practice |
|---|---|
| Using display headings for regular content | Reserve .display-* for hero sections and landing pages only |
| Mixing too many font weights in one paragraph | Use 2-3 weights maximum for hierarchy (bold for emphasis, normal for body) |
| ALL CAPS TEXT EVERYWHERE (hard to read) | Use .text-uppercase sparingly for labels, buttons, short headings |
| Long paragraphs without .lead intro | Start articles/sections with .lead paragraph for better readability |
| Ignoring text hierarchy (all same size) | Use h1-h6 properly: h1 for page title, h2 for sections, h3 for subsections |
| Overusing italic (.fst-italic) | Use italic for quotes, emphasis, foreign words - not entire paragraphs |
| Centered text for long paragraphs | Use .text-center for headings/short text; left-align body paragraphs |
| Forgetting .text-muted for secondary info | Use .text-muted for timestamps, captions, less important text |