Wrikka Learn

Typography in Modern UI Design ​

Typography คือศิลปะและเทคนิคในการจัดเรียงตัวอักษรเพื่อการสื่อสารที่มีประสิทธิภาพและสวยงาม

องค์ประกอบสำคัญของ Typography ​

1. Font Family ​

css
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
  • ตัวอักษรที่ใช้
  • ควรเลือกให้เหมาะสมกับเนื้อหา
  • ใช้ System Fonts เป็น Fallback

2. Font Size ​

css
:root {
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-sm: 14px;
}
  • ขนาดตัวอักษร
  • ใช้ Relative Units (rem, em)
  • ปรับขนาดตามอุปกรณ์

3. Line Height ​

css
body {
  line-height: 1.5;
}
  • ระยะห่างระหว่างบรรทัด
  • ค่าแนะนำอยู่ระหว่าง 1.4 - 1.6
  • ช่วยให้อ่านง่ายขึ้น

4. Letter Spacing ​

css
h1 {
  letter-spacing: -0.02em;
}

p {
  letter-spacing: 0.01em;
}
  • ระยะห่างระหว่างตัวอักษร
  • ใช้ em units
  • ช่วยเพิ่มความอ่านง่าย

หลักการเลือก Typography ​

1. Readability ​

css
body {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}
  • อ่านง่าย
  • ใช้ Contrast Ratio อย่างน้อย 4.5:1
  • หลีกเลี่ยงตัวอักษรที่อ่านยาก

2. Hierarchy ​

css
h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
}

p {
  font-size: 1rem;
  font-weight: 400;
}
  • สร้างลำดับความสำคัญ
  • ใช้ขนาดและน้ำหนักตัวอักษรที่ต่างกัน
  • ใช้ Heading Levels อย่างเหมาะสม

3. Consistency ​

css
:root {
  --font-family: 'Inter', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
}
  • ใช้รูปแบบเดียวกันทั้งระบบ
  • ใช้ CSS Variables
  • ช่วยให้ผู้ใช้เรียนรู้ได้เร็ว

4. Accessibility ​

css
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}
  • ตัวอักษรที่อ่านง่ายสำหรับทุกคน
  • ใช้ Font Size ที่เหมาะสม
  • ทดสอบกับ Screen Readers

Best Practices ​

  • ใช้ Web Fonts ที่เหมาะสม
  • จำกัดจำนวน Font Families
  • ใช้ Typographic Scale
  • ทดสอบกับผู้ใช้จริง

เครื่องมือช่วยสร้าง Typography ​

1. Font Pairing Tools ​

2. Typography Generators ​

3. Accessibility Checkers ​

ทรัพยากรเพิ่มเติม ​

"Typography is the craft of endowing human language with a durable visual form." - Robert Bringhurst