Typography ពណ៌ និង Background

មាតិកា

1. Typography គឺជាភាគច្រើននៃការរចនា
2. Font និង Font Stack
3. Web Font រួមទាំងខ្មែរ
4. ទំហំ ទម្ងន់ និងគម្លាត
5. ទម្រង់ពណ៌
6. Contrast
7. Background ស្រមោល និង Transition
8. Custom Property
9. Dark Mode
10. សាកល្បងដោយខ្លួនឯង

1. Typography គឺជាភាគច្រើននៃការរចនា

ទំព័រ web ភាគច្រើនគឺជាអត្ថបទ ដូច្នេះអ្វីដែលធ្វើឲ្យទំព័រមើលទៅល្អ (ឬអាក្រក់) ភាគច្រើនគឺរបៀបដែលអត្ថបទត្រូវបានរៀបចំ។ មុនពេលប្រើ gradient ឬ effect សូមធ្វើឲ្យបួនយ៉ាងត្រឹមត្រូវសិន៖ font, ទំហំ, គម្លាតបន្ទាត់ និង contrast។ ទំព័រដែលមាន typography ល្អ និងពណ៌ធម្មតា ឈ្នះទំព័រពណ៌ចម្រុះដែលមាន typography អាក្រក់ជានិច្ច។

2. Font និង Font Stack

font-family ទទួល stack — បញ្ជីតាមលំដាប់នៃអាទិភាព។ Browser ប្រើ font ដំបូងដែលបានដំឡើង ហើយធ្លាក់ទៅបន្តបន្ទាប់តាមបញ្ជី៖

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

ធាតុចុងក្រោយគួរតែជា generic family ជានិច្ច៖

system-ui ជាជម្រើសរហ័ស និងឥតគិតថ្លៃ៖ វា load ភ្លាមៗ ព្រោះ font មាននៅលើឧបករណ៍រួចហើយ ហើយវាមើលទៅដូចជា native នៅលើគ្រប់ platform។ ឈ្មោះដែលមានដកឃ្លាត្រូវដាក់ក្នុងសញ្ញាអញ្ញប្បកាស។

3. Web Font រួមទាំងខ្មែរ

ដើម្បីប្រើ font ដែលមនុស្សមិនបានដំឡើង អ្នកត្រូវ load វាពី web។ វិធីងាយបំផុតគឺ Google Fonts ដែលបម្រើ font ពី CDN ដូចក្នុង Caching, CDN និងល្បឿន។ សូមជ្រើសរើស font មួយ ចម្លង tag <link> ដែលវាផ្តល់ឲ្យទៅក្នុង <head> មុន stylesheet របស់អ្នក ហើយប្រើឈ្មោះនោះក្នុង font-family៖

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+Khmer:wght@400;700&display=swap"
  rel="stylesheet">

body {
  font-family: "Inter", "Noto Sans Khmer", system-ui, sans-serif;
}

ហេតុអ្វីបានជាដាក់ពីរ? Font មួយមានតែតួអក្សរដែលអ្នករចនារបស់វាបានគូរប៉ុណ្ណោះ។ Inter មិនមាន glyph ខ្មែរទេ ដូច្នេះពេល browser ជួបអក្សរខ្មែរ វាបន្តទៅ font បន្ទាប់ក្នុង stack គឺ Noto Sans Khmer។ សូមដាក់ font មួយសម្រាប់ គ្រប់ script ដែលអ្នកត្រូវការ ហើយអក្សរឡាតាំង និងអក្សរខ្មែរនឹងលាយគ្នាយ៉ាងរលូនក្នុងទំព័រតែមួយ។ Web font ខ្មែរផ្សេងទៀតមាន Battambang, Hanuman និង Kantumruy Pro។

គន្លឹះមួយចំនួន៖

• ផ្នែក display=swap បង្ហាញអត្ថបទភ្លាមៗដោយប្រើ font បម្រុង រួចប្តូរទៅ web font។ បើគ្មានវា អត្ថបទអាចមើលមិនឃើញពេល font កំពុងទាញយក។
• រាល់ font និងទម្ងន់នីមួយៗគឺជាការទាញយក។ សូមប្រើ មួយ ឬពីរ family និងតែទម្ងន់ដែលអ្នកត្រូវការ (ជាធម្មតា 400 និង 700)។
• ការ self-host file font ពី folder ផ្ទាល់ខ្លួនជៀសវាង request ទៅភាគីទីបី ជាថ្លៃនៃការរៀបចំបន្ថែមបន្តិច (@font-face)។

4. ទំហំ ទម្ងន់ និងគម្លាត

body {
  font-size: 1rem;      /* 16px by default; leave it alone */
  line-height: 1.6;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }

property សំខាន់ៗ៖

Heading ត្រូវការគម្លាតបន្ទាត់តឹងជាងអត្ថបទ body — line-height: 1.2 មើលទៅល្អជាង។ Type scale ដែលទំហំ heading នីមួយៗកើនឡើងជាជំហានស្មើគ្នា ធ្វើឲ្យទំព័រមើលទៅមានផែនការ៖ ឧទាហរណ៍ 1.25 ដងនៃទំហំមុន (1rem, 1.25rem, 1.56rem, 1.95rem)។

សម្រាប់ទំព័រអត្ថបទវែងដូចជា blog post ការផ្លាស់ប្តូរតែមួយដែលល្អបំផុតគឺ៖

p {
  max-width: 65ch;
}

5. ទម្រង់ពណ៌

CSS ផ្តល់វិធីជាច្រើនក្នុងការសរសេរពណ៌។ ទាំងអស់អាចពណ៌នាតម្លៃតែមួយ៖

hsl() ងាយស្រួលកែដោយដៃបំផុត៖ រក្សា hue ហើយប្តូរ lightness ដើម្បីបានកំណែស្រាល ឬខ្មៅជាងនៃពណ៌តែមួយ។ Hex ល្អសម្រាប់ចម្លងពណ៌ពីឧបករណ៍រចនា។

h1 {
  color: hsl(26 91% 37%);
  background-color: hsl(26 91% 95%);
}

ពណ៌ដែលគួរដឹង៖ color គឺជាពណ៌ អត្ថបទ, background-color គឺជាពណ៌ផ្ទៃ, border-color គឺជាពណ៌ border។ Keyword currentColor មានន័យថា "ពណ៌អត្ថបទបច្ចុប្បន្ន" មានប្រយោជន៍សម្រាប់ border និង icon ដែលគួរត្រូវគ្នា។

6. Contrast

អត្ថបទត្រូវតែអានបាន។ Contrast ratio ប្រៀបធៀបភាពភ្លឺនៃអត្ថបទ និង background របស់វា ចាប់ពី 1:1 (មើលមិនឃើញ) ដល់ 21:1 (ខ្មៅលើសរ)។ គោលការណ៍ណែនាំ accessibility (WCAG AA) តម្រូវឲ្យមាន៖

• 4.5:1 សម្រាប់អត្ថបទធម្មតា
• 3:1 សម្រាប់អត្ថបទធំ (18px+ ដិត ឬ 24px+) និងសមាសភាគ UI

អត្ថបទប្រផេះស្រាលលើពណ៌សគឺជាការបរាជ័យទូទៅបំផុត។ អ្នកមិនចាំបាច់គណនាទេ៖ នៅក្នុង DevTools ចុចលើ swatch ពណ៌ក្បែរ color ហើយ picker បង្ហាញ contrast ratio ជាមួយ ✓ ឬ ✗។ Chrome ក៏មាន Lighthouse ហើយ Firefox មានផ្ទាំង Accessibility សម្រាប់រឿងនេះ។

ហើយកុំពឹងលើពណ៌ តែមួយមុខ ដើម្បីបញ្ជូនអត្ថន័យ — កំហុសដែលបង្ហាញតែជាពណ៌ក្រហម មិនអាចមើលឃើញដោយអ្នកពិបាកមើលពណ៌ទេ។ សូមបន្ថែម icon ឬអត្ថបទដូចជា "Error:"។

7. Background ស្រមោល និង Transition

Background ធ្វើបានច្រើនជាងពណ៌៖

.hero {
  background-color: #fef3c7;
  background-image: linear-gradient(135deg, #fef3c7, #fde68a);
}

.banner {
  background-image: url("images/banner.jpg");
  background-size: cover;      /* fill the box, crop if needed */
  background-position: center;
  background-repeat: no-repeat;
}

រូបភាព background គឺជាការតុបតែង។ ប្រសិនបើវាផ្ទុកមាតិកា សូមប្រើ <img> ជាមួយ alt ជំនួសវិញ ព្រោះ CSS background មិនមានអត្ថបទជំនួសទេ។

ការបញ្ចប់ស្អាតពីរបន្ថែមទៀត៖

.card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
  transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.15);
  transform: translateY(-2px);
}

box-shadow ទទួល offset ផ្ដេក, offset បញ្ឈរ, blur និងពណ៌។ transition ធ្វើឲ្យការផ្លាស់ប្តូររលូន។ សូមរក្សា effect ឲ្យស្រាល។ សូមគោរពអ្នកទស្សនាដែលមិនចូលចិត្តចលនា ដោយ៖

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

8. Custom Property

ឥឡូវនេះអ្នកបានវាយ #b45309 ច្រើនដង។ ប្រសិនបើអ្នកចង់បានពណ៌ម៉ាកផ្សេង អ្នកនឹងត្រូវរកវាទាំងអស់។ Custom property (ហៅថា CSS variable ផងដែរ) ដោះស្រាយបញ្ហានេះ។ កំណត់តែម្តង ដោយប្រើឈ្មោះដែលចាប់ផ្តើមដោយ -- បន្ទាប់មកអានដោយ var()៖

:root {
  --color-text: #292524;
  --color-bg: #fafaf9;
  --color-accent: #b45309;
  --color-border: #d6d3d1;
  --radius: 8px;
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

a {
  color: var(--color-accent);
}

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

:root គឺជា element <html> ដូច្នេះ variable ដែលកំណត់នៅទីនោះអាចប្រើបានគ្រប់ទីកន្លែង។ Custom property មានជីវិតនៅក្នុង browser៖ អ្នកអាចប្តូរវានៅក្នុង DevTools, override វាសម្រាប់ផ្នែកមួយ ឬ — ដូចដែលផ្នែកបន្ទាប់បង្ហាញ — ប្តូរវាសម្រាប់ theme ទាំងមូល។

សូមប្រើ variable សម្រាប់ពណ៌ ជំហានគម្លាត radius និង font។ មិនមែនសម្រាប់អ្វីៗទាំងអស់ទេ៖ តម្លៃដែលប្រើតែម្តងមិនត្រូវការឈ្មោះទេ។

9. Dark Mode

ប្រព័ន្ធប្រតិបត្តិការជាច្រើនមាន theme ងងឹត ហើយ browser ប្រាប់អ្នកថាអ្នកប្រើចូលចិត្តមួយណាតាមរយៈ media query៖

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e7e5e4;
    --color-bg: #1c1917;
    --color-accent: #fbbf24;
    --color-border: #44403c;
  }
}

ដោយសារគ្រប់ rule ប្រើ var(--…) ការកំណត់ variable ទាំងនោះឡើងវិញគឺគ្រប់គ្រាន់ហើយ។ ទំព័រទាំងមូលប្តូរដោយមិនចាំបាច់ផ្លាស់ប្តូរអ្វីផ្សេងទៀតសោះ។ នោះជាផលតបស្នងនៃទម្លាប់ក្នុងជំពូកទី 6 ក្នុងការរក្សា style នៅកន្លែងតែមួយ។

សូមចាំពិនិត្យ contrast ឡើងវិញក្នុង dark mode — ពណ៌ accent ដែលដំណើរការលើ background ពណ៌ក្រែម អាចមិនដំណើរការលើពណ៌ស្ទើរតែខ្មៅ។ ដើម្បីសាកល្បង សូមប្តូរ theme របស់ OS ឬនៅក្នុង Chrome DevTools បើកផ្ទាំង Rendering (Cmd/Ctrl+Shift+P → "Show Rendering") ហើយកំណត់ Emulate CSS media feature prefers-color-scheme។

សូមបន្ថែម <meta name="color-scheme" content="light dark"> នៅក្នុង <head> ដើម្បីឲ្យការគ្រប់គ្រងដែលមានស្រាប់ដូចជា form field និង scrollbar តាម theme ផងដែរ។

10. សាកល្បងដោយខ្លួនឯង

1. ជ្រើសរើស font។ បន្ថែម Inter (ឬ font ផ្សេងដែលអ្នកចូលចិត្ត) និង Noto Sans Khmer ពី Google Fonts។ ដាក់អត្ថបទខ្មែរមួយបន្ទាត់ក្នុងទំព័រ ហើយពិនិត្យនៅក្នុង DevTools → Computed → Rendered Fonts ថា font មួយណាគូរអត្ថបទមួយណា។
2. កំណត់អក្សរ។ ដាក់ line-height 1.6 ទៅ body, 1.2 ទៅ heading និង max-width: 65ch ទៅ paragraph។ ប្រៀបធៀបទំព័រមុន និងក្រោយ។
3. បំប្លែងទៅជា variable។ ជំនួសគ្រប់ពណ៌ដែលដដែលៗក្នុង style.css ដោយ custom property។ ប្តូរ --color-accent ហើយមើលទំព័រទាំងមូលធ្វើបច្ចុប្បន្នភាព។
4. ពិនិត្យ contrast។ ប្រើ color picker របស់ DevTools លើអត្ថបទ body, link និងអត្ថបទ button របស់អ្នក។ កែអ្វីដែលទាបជាង 4.5:1។
5. បន្ថែម dark mode។ បន្ថែមប្លុក prefers-color-scheme ហើយសាកល្បងវាជាមួយផ្ទាំង Rendering។ ពិនិត្យ form field និងតារាង។
6. បន្ថែមភាពរលោង។ ដាក់ស្រមោល និង hover transition ទៅ .card ព្រមទាំង rule reduced-motion។ Commit។

ឥឡូវនេះទំព័ររបស់អ្នកមានទាំងរចនាសម្ព័ន្ធ និង ស្ទីល។ ជំពូកពីរបន្ទាប់គឺអំពី layout — ការរៀប box ជាជួរដេក និង grid។