Typography

Typography คืออะไร?

Typography หรือการจัดรูปแบบข้อความ คือศิลปะและเทคนิคในการจัดรูปแบบตัวอักษรให้สวยงาม อ่านง่าย และสื่อสารได้อย่างมีประสิทธิภาพ ในโลกของเว็บไซต์ Typography เป็นพื้นฐานที่สำคัญที่สุด เพราะข้อความคือหัวใจหลักที่ทำให้เว็บไซต์สามารถสื่อสารกับผู้ใช้ได้

ลองจินตนาการว่าเว็บไซต์ที่ไม่มีข้อความเลย จะเหลือเพียงรูปภาพและปุ่มต่างๆ ที่ผู้ใช้ไม่รู้ว่าทำอะไร การมี Typography ที่ดีจึงเป็นสิ่งจำเป็นสำหรับการสร้างประสบการณ์ที่ดีให้กับผู้ใช้

ทำไม Typography ถึงสำคัญ?

ข้อความคือองค์ประกอบหลักของเว็บ ในเว็บไซต์ส่วนใหญ่ ข้อความคิดเป็นสัดส่วนมากที่สุด ไม่ว่าจะเป็น:

เนื้อหาบทความ หัวข้อและรายละเอียด เมนูนำทาง ข้อความในปุ่มและฟอร์ม หากข้อความอ่านยาก ไม่สวยงาม หรือไม่เหมาะสม ผู้ใช้จะเกิดความรู้สึกไม่ดีต่อเว็บไซต์โดยรวม

สร้างอัตลักษณ์และบุคลิกภาพของแบรนด์ ฟอนต์และรูปแบบข้อความที่แตกต่างกันสามารถสื่อสารบุคลิกภาพที่แตกต่างกัน:

จากตัวอย่างข้างต้นจะเห็นได้ว่า:

บุคลิกภาพจริงจัง: ใช้ฟอนต์ serif ที่มีความเป็นทางการ สื่อถึงความน่าเชื่อถือและความเชี่ยวชาญ เหมาะสำหรับธุรกิจกฎหมาย การเงิน หรือองค์กรขนาดใหญ่
บุคลิกภาพสร้างสรรค์: ใช้ฟอนต์ sans-serif แบบเบา การจัดวางที่ไม่เป็นทางการ สื่อถึงความคิดสร้างสรรค์และนวัตกรรม
บุคลิกภาพเทคโนโลยี: ใช้ฟอนต์ monospace ที่เชื่อมโยงกับการเขียนโปรแกรม สื่อถึงความทันสมัยและความแม่นยำ
บุคลิกภาพสนุกสนาน: ใช้ฟอนต์ที่มีลักษณะเป็นมิตรและอบอุ่น สื่อถึงความสนุกสนานและความเป็นกันเอง

ปรับปรุงการอ่านและการเข้าถึง Typography ที่ดีช่วยให้:

Typography ที่ดีช่วยให้ผู้ใช้อ่านข้อความได้ง่ายและสบายตา ลดความเมื่อยล้าของสายตาเมื่ออ่านเนื้อหายาวๆ และที่สำคัญคือช่วยให้ผู้ที่มีความบกพร่องทางการมองเห็นหรือมีปัญหาในการอ่าน เช่น ดิสเล็กเซีย สามารถเข้าถึงเนื้อหาได้ดีขึ้น

การศึกษาทางจิตวิทยาการรับรู้พบว่า Typography ที่เหมาะสมสามารถเพิ่มความเร็วในการอ่านได้ถึง 20% และลดข้อผิดพลาดในการทำความเข้าใจเนื้อหาได้อย่างมีนัยสำคัญ

การจัดรูปแบบข้อความ

1. การเลือกและใช้ฟอนต์ (Font Family)

System Fonts vs Web Fonts

การเลือกใช้ฟอนต์เป็นขั้นตอนแรกและสำคัญที่สุดใน Typography System Fonts คือฟอนต์ที่ติดตั้งมากับระบบปฏิบัติการ เช่น Arial, Times New Roman, Helvetica ข้อดีคือโหลดเร็วและแสดงผลได้ทันที แต่ข้อเสียคือมีตัวเลือกจำกัดและอาจไม่สะท้อนอัตลักษณ์ของแบรนด์ได้ดี

Web Fonts คือฟอนต์ที่ดาวน์โหลดจากอินเทอร์เน็ต เช่น Google Fonts, Adobe Fonts ข้อดีคือมีตัวเลือกมากมายและสามารถสร้างอัตลักษณ์เฉพาะได้ แต่ข้อเสียคือต้องใช้เวลาในการโหลดและอาจส่งผลต่อประสิทธิภาพของเว็บไซต์

Loading...

Font Stack - การใช้ฟอนต์สำรอง

Font Stack เป็นกลไกสำคัญที่ช่วยให้เว็บไซต์แสดงผลได้ในทุกสถานการณ์ โดยการระบุฟอนต์หลายตัวเรียงลำดับไว้ เมื่อเบราว์เซอร์ไม่สามารถโหลดฟอนต์แรกได้ จะลองฟอนต์ถัดไปจนกว่าจะเจอฟอนต์ที่ใช้งานได้

การเขียน Font Stack ที่ดีควรเริ่มจากฟอนต์ที่เฉพาะเจาะจงที่สุด ไปหาฟอนต์ที่ทั่วไปที่สุด และควรจบด้วยประเภทฟอนต์ทั่วไป (generic family) เช่น serif, sans-serif, หรือ monospace

การทำงานของ Font Stack

index.html

<style>
  .example-1 {
      font-family: 'Inter';
      background-color: #fef2f2;
  }
  .example-2 {
      font-family: 'Inter', Arial, sans-serif;
      background-color: #fff7ed;
  }
  .example-3 {
      font-family: 'Inter', system-ui, -apple-system, Arial, Helvetica, sans-serif;
      background-color: #f0fdf4;
  }
</style>
<div class="font-examples">
  <div class="example-1">
    <h4>ฟอนต์เฉพาะ: Inter</h4>
    <p>
      หากไม่มี Inter
      จะใช้ฟอนต์เริ่มต้นของระบบ
    </p>
  </div>
  <div class="example-2">
    <h4>
      Font Stack: Inter → Arial →
      sans-serif
    </h4>
    <p>
      มีฟอนต์สำรองทำให้แสดงผลได้ในทุกระบบ
    </p>
  </div>
  <div class="example-3">
    <h4>Font Stack ที่ครบถ้วน</h4>
    <p>
      Inter → system-ui → Arial →
      Helvetica → sans-serif
    </p>
  </div>
</div>

<style>
  .example-1 {
      font-family: 'Inter';
      background-color: #fef2f2;
  }
  .example-2 {
      font-family: 'Inter', Arial, sans-serif;
      background-color: #fff7ed;
  }
  .example-3 {
      font-family: 'Inter', system-ui, -apple-system, Arial, Helvetica, sans-serif;
      background-color: #f0fdf4;
  }
</style>
<div class="font-examples">
  <div class="example-1">
    <h4>ฟอนต์เฉพาะ: Inter</h4>
    <p>
      หากไม่มี Inter
      จะใช้ฟอนต์เริ่มต้นของระบบ
    </p>
  </div>
  <div class="example-2">
    <h4>
      Font Stack: Inter → Arial →
      sans-serif
    </h4>
    <p>
      มีฟอนต์สำรองทำให้แสดงผลได้ในทุกระบบ
    </p>
  </div>
  <div class="example-3">
    <h4>Font Stack ที่ครบถ้วน</h4>
    <p>
      Inter → system-ui → Arial →
      Helvetica → sans-serif
    </p>
  </div>
</div>

Result

2. ขนาดและน้ำหนักของฟอนต์

Font Size - การกำหนดขนาดตัวอักษร

การกำหนดขนาดตัวอักษรเป็นปัจจัยสำคัญที่ส่งผลต่อการอ่านและการรับรู้ข้อมูล ขนาดที่เหมาะสมจะช่วยให้ผู้ใช้สามารถอ่านได้สะดวกโดยไม่ต้องซูม การศึกษาทางด้าน UX พบว่าขนาดฟอนต์ขั้นต่ำสำหรับข้อความเนื้อหาบนเว็บไซต์ควรอยู่ที่ 16px

หน่วยที่ใช้ในการกำหนดขนาด:

Pixel (px): หน่วยสัมบูรณ์ที่แน่นอน เหมาะสำหรับการควบคุมที่แม่นยำ
Rems (rem): หน่วยสัมพัทธ์ที่อ้างอิงจากขนาดฟอนต์ของ root element (โดยปกติ 16px)
Ems (em): หน่วยสัมพัทธ์ที่อ้างอิงจากขนาดฟอนต์ของ parent element
Percent (%): เปอร์เซ็นต์ของขนาดฟอนต์ parent element

สามารถดูรายละเอียดเนื้อหาของหน่วยต่างๆ ได้ที่ Units

การใช้ Font Size ในรูปแบบต่างๆ

<div class="size-examples">
  <h1>หัวข้อใหญ่ (2rem / 32px)</h1> 
  <h2>หัวข้อรอง (1.5rem / 24px)</h2> 
  <h3>หัวข้อย่อย (1.25rem / 20px)</h3> 
  <p class="body-text">ข้อความเนื้อหา (1rem / 16px)</p> 
  <p class="small-text">ข้อความเล็ก (0.875rem / 14px)</p> 
  <p class="caption">คำอธิบายภาพ (0.75rem / 12px)</p> 
</div>

<div class="size-examples">
  <h1>หัวข้อใหญ่ (2rem / 32px)</h1> 
  <h2>หัวข้อรอง (1.5rem / 24px)</h2> 
  <h3>หัวข้อย่อย (1.25rem / 20px)</h3> 
  <p class="body-text">ข้อความเนื้อหา (1rem / 16px)</p> 
  <p class="small-text">ข้อความเล็ก (0.875rem / 14px)</p> 
  <p class="caption">คำอธิบายภาพ (0.75rem / 12px)</p> 
</div>

Result

Font Weight - การกำหนดความหนาของตัวอักษร

Font Weight เป็นเครื่องมือสำคัญในการสร้างลำดับความสำคัญ (Visual Hierarchy) ในเนื้อหา ค่า font-weight สามารถระบุได้ทั้งแบบตัวเลข (100-900) หรือคำ (normal, bold) โดยค่าที่ใช้บ่อยคือ 400 (normal) และ 700 (bold)

ค่า Font Weight ที่ใช้บ่อย:

100-300: บาง (Thin, Light) - เหมาะสำหรับหัวข้อขนาดใหญ่หรือการออกแบบที่ต้องการความละเอียดอ่อน
400: ปกติ (Normal/Regular) - สำหรับข้อความเนื้อหาทั่วไป
500-600: กึ่งหนา (Medium, Semi-bold) - เหมาะสำหรับการเน้นที่ไม่หนักเกินไป
700: หนา (Bold) - สำหรับหัวข้อและการเน้นที่ชัดเจน
800-900: หนามาก (Extra Bold, Black) - สำหรับการออกแบบที่ต้องการความโดดเด่น

Font Weight ตั้งแต่บางไปหนา

<div class="weight-examples">
  <p class="weight-100">
    Font Weight 100 - Thin
  </p>
  <p class="weight-200">
    Font Weight 200 - Extra Light
  </p>
  <p class="weight-300">
    Font Weight 300 - Light
  </p>
  <p class="weight-400">
    Font Weight 400 - Normal
    (ค่าเริ่มต้น)
  </p>
  <p class="weight-500">
    Font Weight 500 - Medium
  </p>
  <p class="weight-600">
    Font Weight 600 - Semi Bold
  </p>
  <p class="weight-700">
    Font Weight 700 - Bold
  </p>
  <p class="weight-800">
    Font Weight 800 - Extra Bold
  </p>
  <p class="weight-900">
    Font Weight 900 - Black
  </p>
</div>

<div class="weight-examples">
  <p class="weight-100">
    Font Weight 100 - Thin
  </p>
  <p class="weight-200">
    Font Weight 200 - Extra Light
  </p>
  <p class="weight-300">
    Font Weight 300 - Light
  </p>
  <p class="weight-400">
    Font Weight 400 - Normal
    (ค่าเริ่มต้น)
  </p>
  <p class="weight-500">
    Font Weight 500 - Medium
  </p>
  <p class="weight-600">
    Font Weight 600 - Semi Bold
  </p>
  <p class="weight-700">
    Font Weight 700 - Bold
  </p>
  <p class="weight-800">
    Font Weight 800 - Extra Bold
  </p>
  <p class="weight-900">
    Font Weight 900 - Black
  </p>
</div>

Result

3. การจัดระยะห่างและความสูงของบรรทัด

Line Height - ความสูงของบรรทัด

Line Height เป็นปัจจัยสำคัญที่ส่งผลต่อการอ่านมากที่สุด ค่าที่เหมาะสมจะทำให้สายตาสามารถติดตามบรรทัดได้ง่าย ไม่สับสนระหว่างบรรทัด และลดความเมื่อยล้า การวิจัยด้าน Typography และ Accessibility พบว่า line-height ขั้นต่ำควรอยู่ที่ 1.5 สำหรับข้อความเนื้อหา

หลักการเลือก Line Height:

1.0-1.3: แน่นเกินไป ทำให้อ่านยาก
1.4-1.6: เหมาะสำหรับข้อความเนื้อหา (แนะนำ 1.5-1.6)
1.7-2.0: เหมาะสำหรับหัวข้อขนาดใหญ่หรือข้อความสั้นๆ
มากกว่า 2.0: ห่างเกินไป ทำให้เสียการเชื่อมโยงระหว่างบรรทัด

ผลของ Line Height ต่อการอ่าน

<div class="line-height-examples">
  <div class="tight">
    <h4>
      Line Height 1.0 (แน่นเกินไป)
    </h4>
    <p>
      Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Sed
      do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi
      ut aliquip ex ea commodo
      consequat.
    </p>
  </div>
  <div class="normal">
    <h4>
      Line Height 1.5
      (เหมาะสำหรับการอ่าน)
    </h4>
    <p>
      Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Sed
      do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi
      ut aliquip ex ea commodo
      consequat.
    </p>
  </div>
  <div class="loose">
    <h4>
      Line Height 2.0 (ห่างเกินไป)
    </h4>
    <p>
      Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Sed
      do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi
      ut aliquip ex ea commodo
      consequat.
    </p>
  </div>
</div>

<div class="line-height-examples">
  <div class="tight">
    <h4>
      Line Height 1.0 (แน่นเกินไป)
    </h4>
    <p>
      Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Sed
      do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi
      ut aliquip ex ea commodo
      consequat.
    </p>
  </div>
  <div class="normal">
    <h4>
      Line Height 1.5
      (เหมาะสำหรับการอ่าน)
    </h4>
    <p>
      Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Sed
      do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi
      ut aliquip ex ea commodo
      consequat.
    </p>
  </div>
  <div class="loose">
    <h4>
      Line Height 2.0 (ห่างเกินไป)
    </h4>
    <p>
      Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Sed
      do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi
      ut aliquip ex ea commodo
      consequat.
    </p>
  </div>
</div>

Result

4. การเน้นความสำคัญด้วย HTML และ CSS

การเน้นความสำคัญในข้อความมีสองแง่มุมที่ต้องพิจารณา: ความหมาย (Semantic) และ รูปแบบ (Visual) การใช้ HTML semantic tags ไม่เพียงช่วยให้ข้อความดูต่างออกไป แต่ยังสื่อสารความหมายให้กับ Screen Reader และเครื่องมือช่วยเหลือผู้พิการได้อีกด้วย

HTML Semantic Tags สำหรับการเน้นความสำคัญ

strong: แสดงความสำคัญสูง Screen Reader จะอ่านด้วยน้ำเสียงที่เน้นหนัก
en: แสดงการเน้นการออกเสียงหรือความสำคัญระดับกลาง
mark: ไฮไลท์ข้อความเพื่อดึงดูดความสนใจ
b: ตัวหนา (เฉพาะรูปแบบ ไม่มีความหมายพิเศษ)
i: ตัวเอียง (เฉพาะรูปแบบ ไม่มีความหมายพิเศษ)

การเน้นความสำคัญแบบต่างๆ

<div class="emphasis-examples">
  <div class="semantic">
    <h4>การใช้ HTML Semantic Tags</h4>
    <p>
      ข้อความนี้มี
      <strong>ความสำคัญสูง</strong>
      และส่วนนี้
      <em>เน้นการออกเสียง</em>
    </p>
    <p>
      เราต้อง
      <mark>ไฮไลท์ข้อความสำคัญ</mark>
      ในเอกสารนี้
    </p>
  </div>
  <div class="visual">
    <h4>การใช้ CSS เพื่อจัดรูปแบบ</h4>
    <p>
      ข้อความนี้
      <span class="important"
        >ดูเน้น</span
      >
      และส่วนนี้
      <span class="highlight"
        >มีสีต่าง</span
      >
    </p>
    <p>
      แต่สำหรับ Screen Reader
      จะไม่รู้ว่าต่างจากข้อความปกติ
    </p>
  </div>
  <div class="best-practice">
    <h4>
      Best Practice: รวมทั้งสองแบบ
    </h4>
    <p>
      ใช้
      <strong class="custom-strong"
        >HTML semantic + CSS
        styling</strong
      >
      เพื่อ
      <em class="custom-em"
        >ความหมายและรูปแบบ</em
      >
    </p>
  </div>
</div>

<div class="emphasis-examples">
  <div class="semantic">
    <h4>การใช้ HTML Semantic Tags</h4>
    <p>
      ข้อความนี้มี
      <strong>ความสำคัญสูง</strong>
      และส่วนนี้
      <em>เน้นการออกเสียง</em>
    </p>
    <p>
      เราต้อง
      <mark>ไฮไลท์ข้อความสำคัญ</mark>
      ในเอกสารนี้
    </p>
  </div>
  <div class="visual">
    <h4>การใช้ CSS เพื่อจัดรูปแบบ</h4>
    <p>
      ข้อความนี้
      <span class="important"
        >ดูเน้น</span
      >
      และส่วนนี้
      <span class="highlight"
        >มีสีต่าง</span
      >
    </p>
    <p>
      แต่สำหรับ Screen Reader
      จะไม่รู้ว่าต่างจากข้อความปกติ
    </p>
  </div>
  <div class="best-practice">
    <h4>
      Best Practice: รวมทั้งสองแบบ
    </h4>
    <p>
      ใช้
      <strong class="custom-strong"
        >HTML semantic + CSS
        styling</strong
      >
      เพื่อ
      <em class="custom-em"
        >ความหมายและรูปแบบ</em
      >
    </p>
  </div>
</div>

Result

5. การจัดตำแหน่งข้อความ

การจัดตำแหน่งข้อความส่งผลต่อการอ่านและความรู้สึกของผู้ใช้ การเลือกใช้การจัดตำแหน่งที่เหมาะสมจะช่วยเพิ่มประสิทธิภาพในการสื่อสาร

ประเภทการจัดตำแหน่ง:

Left (ชิดซ้าย): เป็นค่าเริ่มต้นและเหมาะสำหรับภาษาไทยและอังกฤษ ทำให้การอ่านเป็นธรรมชาติ
Center (กึ่งกลาง): เหมาะสำหรับหัวข้อ คำอธิบายสั้นๆ หรือเนื้อหาที่ต้องการเน้น
Right (ชิดขวา): เหมาะสำหรับตัวเลข ราคา วันที่ หรือภาษาที่เขียนจากขวาไปซ้าย
Justify (เต็มบรรทัด): ทำให้ข้อความชิดทั้งสองด้าน เหมาะสำหรับสิ่งพิมพ์ แต่ควรระวังในการใช้บนเว็บ

การจัดตำแหน่งข้อความแบบต่างๆ

<div class="alignment-examples">
  <div class="left">
    <h4>ชิดซ้าย (ค่าเริ่มต้น)</h4>
    <p>
      การจัดข้อความชิดซ้ายเป็นรูปแบบมาตรฐานที่ใช้กันทั่วไปในการเขียนภาษาไทยและภาษาอังกฤษ
      ทำให้การอ่านเป็นธรรมชาติและสบายตา
    </p>
  </div>
  <div class="center">
    <h4>กึ่งกลาง</h4>
    <p>
      การจัดข้อความกึ่งกลางเหมาะสำหรับหัวข้อ
      คำอธิบายสั้นๆ หรือการเน้นความสำคัญ
      แต่ไม่ควรใช้กับข้อความยาว
    </p>
  </div>
  <div class="right">
    <h4>ชิดขวา</h4>
    <p>
      การจัดข้อความชิดขวามักใช้ในการแสดงตัวเลข
      ราคา หรือวันที่ในตาราง
      หรือในภาษาที่เขียนจากขวาไปซ้าย
    </p>
  </div>
  <div class="justify">
    <h4>เต็มบรรทัด (Justify)</h4>
    <p>
      การจัดข้อความแบบเต็มบรรทัดทำให้ข้อความชิดทั้งซ้ายและขวา
      โดยปรับระยะห่างระหว่างคำ
      มักใช้ในหนังสือหรือนิตยสาร
      แต่อาจทำให้การอ่านบนหน้าจอยากขึ้น
    </p>
  </div>
</div>

<div class="alignment-examples">
  <div class="left">
    <h4>ชิดซ้าย (ค่าเริ่มต้น)</h4>
    <p>
      การจัดข้อความชิดซ้ายเป็นรูปแบบมาตรฐานที่ใช้กันทั่วไปในการเขียนภาษาไทยและภาษาอังกฤษ
      ทำให้การอ่านเป็นธรรมชาติและสบายตา
    </p>
  </div>
  <div class="center">
    <h4>กึ่งกลาง</h4>
    <p>
      การจัดข้อความกึ่งกลางเหมาะสำหรับหัวข้อ
      คำอธิบายสั้นๆ หรือการเน้นความสำคัญ
      แต่ไม่ควรใช้กับข้อความยาว
    </p>
  </div>
  <div class="right">
    <h4>ชิดขวา</h4>
    <p>
      การจัดข้อความชิดขวามักใช้ในการแสดงตัวเลข
      ราคา หรือวันที่ในตาราง
      หรือในภาษาที่เขียนจากขวาไปซ้าย
    </p>
  </div>
  <div class="justify">
    <h4>เต็มบรรทัด (Justify)</h4>
    <p>
      การจัดข้อความแบบเต็มบรรทัดทำให้ข้อความชิดทั้งซ้ายและขวา
      โดยปรับระยะห่างระหว่างคำ
      มักใช้ในหนังสือหรือนิตยสาร
      แต่อาจทำให้การอ่านบนหน้าจอยากขึ้น
    </p>
  </div>
</div>

Result

การใช้งาน Web Fonts

1. Google Fonts - วิธีที่ง่ายและนิยม

Google Fonts เป็นบริการฟอนต์ฟรีที่ใช้งานง่ายและมีฟอนต์คุณภาพสูงให้เลือกมากมาย ข้อดีคือไม่ต้องเสียค่าใช้จ่าย มีการอัปเดตและปรับปรุงอย่างสม่ำเสมอ และมี CDN ที่เร็วและเสถียร

Loading...

Loading...

2. การปรับปรุงประสิทธิภาพ Web Fonts

การใช้ Web Fonts อย่างมีประสิทธิภาพเป็นสิ่งสำคัญเพื่อไม่ให้กระทบต่อความเร็วในการโหลดเว็บไซต์ นี่คือเทคนิคต่างๆ ที่ควรรู้:

ใช้ preconnect เพื่อเตรียมการเชื่อมต่อ:

การใช้ preconnect จะทำให้เบราว์เซอร์เตรียมการเชื่อมต่อกับเซิร์ฟเวอร์ฟอนต์ล่วงหน้า ลดเวลาในการโหลด

Loading...

ใช้ font-display: swap เพื่อแสดงฟอนต์สำรองก่อน:

ผู้ใช้จะเห็นเนื้อหาทันทีด้วยฟอนต์สำรอง แล้วค่อยเปลี่ยนเป็นฟอนต์ที่ต้องการเมื่อโหลดเสร็จ

Loading...

เลือกใช้เฉพาะ font-weight ที่จำเป็น:

Loading...

ใช้ Local Fonts เมื่อเป็นไปได้:

Loading...

Typography ที่ดีสำหรับเว็บไซต์

การสร้าง Type Scale

Type Scale หรือระบบการไล่ระดับขนาดตัวอักษร เป็นหลักการสำคัญในการสร้าง Visual Hierarchy ที่ดี การมี Type Scale ที่สม่ำเสมอจะทำให้เว็บไซต์ดูเป็นระบบและช่วยให้ผู้ใช้เข้าใจลำดับความสำคัญของข้อมูลได้ง่าย

หลักการสร้าง Type Scale:

การสร้าง Type Scale ที่ดีควรใช้อัตราส่วนทางคณิตศาสตร์ เช่น Major Third (1.25), Perfect Fourth (1.33), หรือ Golden Ratio (1.618) เพื่อให้ได้ความกลมกลืนที่ดูธรรมชาติ

ตัวอย่าง Type Scale ที่ใช้งานได้จริง

<article class="type-scale-demo">
  <h1>หัวข้อหลัก - Hero Title</h1>
  <h2>หัวข้อใหญ่ - Section Title</h2>
  <h3>หัวข้อรอง - Subsection Title</h3>
  <h4>หัวข้อย่อย - Component Title</h4>
  <p class="lead">
    ย่อหน้าเปิด -
    ข้อความนำที่เน้นความสำคัญและดึงดูดความสนใจของผู้อ่าน
    เหมาะสำหรับการสรุปเนื้อหาหลักของบทความ
  </p>
  <p>
    ย่อหน้าปกติ -
    ข้อความเนื้อหาหลักที่ใช้สำหรับการอ่านทั่วไป
    ควรมีขนาดที่เหมาะสมและ line-height
    ที่ทำให้อ่านง่าย การจัด typography
    ที่ดีจะช่วยให้ผู้อ่านสามารถติดตามเนื้อหาได้อย่างสบาย
  </p>
  <p class="small">
    ข้อความเล็ก - ใช้สำหรับข้อมูลเสริม
    คำอธิบาย
    หรือรายละเอียดที่ไม่ใช่เนื้อหาหลัก
  </p>
  <p class="caption">
    Caption - คำอธิบายภาพ ข้อมูลอ้างอิง
    หรือหมายเหตุต่างๆ
  </p>
</article>

<article class="type-scale-demo">
  <h1>หัวข้อหลัก - Hero Title</h1>
  <h2>หัวข้อใหญ่ - Section Title</h2>
  <h3>หัวข้อรอง - Subsection Title</h3>
  <h4>หัวข้อย่อย - Component Title</h4>
  <p class="lead">
    ย่อหน้าเปิด -
    ข้อความนำที่เน้นความสำคัญและดึงดูดความสนใจของผู้อ่าน
    เหมาะสำหรับการสรุปเนื้อหาหลักของบทความ
  </p>
  <p>
    ย่อหน้าปกติ -
    ข้อความเนื้อหาหลักที่ใช้สำหรับการอ่านทั่วไป
    ควรมีขนาดที่เหมาะสมและ line-height
    ที่ทำให้อ่านง่าย การจัด typography
    ที่ดีจะช่วยให้ผู้อ่านสามารถติดตามเนื้อหาได้อย่างสบาย
  </p>
  <p class="small">
    ข้อความเล็ก - ใช้สำหรับข้อมูลเสริม
    คำอธิบาย
    หรือรายละเอียดที่ไม่ใช่เนื้อหาหลัก
  </p>
  <p class="caption">
    Caption - คำอธิบายภาพ ข้อมูลอ้างอิง
    หรือหมายเหตุต่างๆ
  </p>
</article>

Result