1. การจัดวางตัวอักษร
Typography
Facebook.com/TouchPoint.in.th
TouchPoint.in.th
YouTube.com/c/TouchPointTH
ดร.กฤษณพงศ์ เลิศบารุงชัย

2. ตัวอักษร
เป็นงานออกแบบชนิดหนึ่งที่เน้นการสื่อสารด้วยตัวอักษร เช่น
การออกแบบโลโก้ การจัดหน้าเอกสาร การสร้างสื่ออินโฟ
กราฟิก การสร้างภาพกราฟิกเคลื่อนไหว และการออกแบบ
ส่วนประสานงานกับผู้ใช้
Character

3. Typeface กับ Font ต่างก็เกี่ยวข้องโดยตรงกับตัวอักษรกันทั้งคู่ มีความคล้ายกันมาก แต่กลับแตกแต่งต่างกันอย่างชัดเจน
Typeface
หมายถึง รูปแบบของตัวอักษร ที่ออกแบบมา
โดย “นักออกแบบตัวอักษร” หรือ
Typographer เช่น Calibri, Roboto,
THSarabunPSK, DB Helvetica, Kanit,
Prompt และอื่นๆ อีกมากมาย
Font
เป็นส่วนย่อยของ Typeface
เป็นเพียงรูปแบบหรือลักษณะหนึ่ง
ของ Typeface เช่น การทาตัวหนา
ตัวเอียง เป็นต้น
ความแตกต่างระหว่าง Typeface กับ Font
Difference Between Typeface and Font

4. ความหมายของการจัดวางตัวอักษร
เป็นการออกแบบและจัดวางตัวอักษรให้ดูมีความสวยงาม
เข้าใจได้ง่าย และเหมาะสมกับพื้นที่ว่างรวมถึงองค์ประกอบต่าง ๆ
ในงานออกแบบ
Typography Definition

5. การจัดวางตัวอักษรกับการออกแบบ
ส่วนประสานงานผู้ใช้
มีความสาคัญกับผู้ใช้เป็นอย่างมาก รวมถึงการออกแบบส่วน
ประสานงานผู้ใช้ (User Interface Design) ด้วย เพราะการ
จัดวางตัวอักษร มีผลต่อผู้ใช้โดยตรง
Typography and UI Design

6. บทบาทสาคัญของการจัดวางตัวอักษร
The important of Typography
สร้างภาพลักษณ์ต่อผลิตภัณฑ์หรือบริการ
เป็นกลยุทธ์การแย่งชิงพื้นที่การสื่อสาร
สร้างแรงดึงดูดต่อข้อมูล เสริมพลังให้กับข้อมูล สร้างมูลค่าทางการตลาด

7. ปัญหาของการใช้ตัวอักษรที่ขาดการออกแบบ
The problem of Typography without Design
ต้องใช้เวลามากในการเข้าถึงข้อมูล
ผู้ใช้งานเกิดความยุ่งยากต่อการอ่าน
ขาดพลังในการสื่อสาร ใช้พื้นที่มาก สิ้นเปลืองทรัพยากร
ไม่เกิดมูลค่าทางการตลาด การสื่อสารไม่บรรลุผล

8. ปัญหาของการใช้ตัวอักษรที่ขาดการออกแบบ
The problem of Typography without Design
การพัฒนาข้อมูล
Information Development
สุนทรียภาพและศิลปะ
Art and Aesthetics
ภาษาภาพ
Visual Language
ศาสตร์และศิลป์เกี่ยวกับตัวอักษร
Typography
เทคโนโลยีสาหรับการจัดวางตัวอักษร
Technology
รสนิยมในงานด้านตัวอักษร
Taste in Typography

9. หน้าที่ของนักออกแบบ UI กับ Typography
Duties of UI Designer with Typography
ทาให้ข้อมูลน่าสนใจ
ตีความข้อมูล
ปรับปรุงข้อมูลให้ดีขึ้น ทาให้ข้อมูลอ่านง่ายขึ้น
ทาให้เกิดความเข้าใจที่ดี จดจาง่าย ทาให้เกิดจุดเน้นของข้อมูล

10. ประเภทของตัวอักษร
Type of Typeface
การแบ่งประเภทตัวอักษร จัดตามรูปร่างทางกายภาพ แบ่งออกเป็น 4 ประเภท
อักษรแบบมีฐาน
Serif
Aa
อักษรแบบไม่มีฐาน
San Serif
Aa
อักษรประดิษฐ์โบราณ
Antique
Aa
อักษรตัวเขียน
Script
Aa

11. อักษรแบบมีฐาน
Serif
เป็นตัวอักษรแบบมีเชิงหรือมีฐานอยู่ตรงปลาย ดูเป็นระเบียบ เป็นทางการ
เหมาะจะใช้ในงานที่เป็นทางการ และต้องการความน่าเชื่อถือ
Kridsanapong

12. อักษรแบบมีฐาน
Serif

13. อักษรแบบมีฐาน
Serif

14. อักษรแบบไม่มีฐาน
San Serif
เป็นตัวอักษรที่ไม่มีเชิงหรือไม่มีฐานตรงส่วนปลาย อ่านง่าย ดูทันสมัยมากกว่าแบบอื่น ๆ
เหมาะจะใช้ในงานที่ต้องการความทันสมัย ไม่เป็นทางการมากนัก
Kridsanapong

15. อักษรแบบไม่มีฐาน
San Serif

16. อักษรแบบไม่มีฐาน
San Serif

17. อักษรประดิษฐ์โบราณ
Antique
เป็นตัวอักษรประดิษฐ์แบบโบราณ เหมาะกับงานที่ต้องการความชัดเจนของยุคสมัย
หรือต้องการอารมณ์ย้อนยุคนิดหน่อย
Kridsanapong

18. อักษรประดิษฐ์โบราณ
Antique

19. อักษรประดิษฐ์โบราณ
Antique

20. อักษรตัวเขียน
Script
เป็นตัวอักษรที่มีลักษณะเหมือนลายมือ เหมาะกับงานที่ไม่เป็นทางการ
ต้องการความเป็นกันเองและดูสนุกสนานมากกว่าแบบอื่น ๆ
Kridsanapong

21. อักษรตัวเขียน
Script

22. อักษรตัวเขียน
Script

23. ประเภทของตัวอักษรภาษาไทย
Types of Thai Typeface
การแบ่งประเภทตัวอักษรภาษาไทย จัดตามรูปร่างทางกายภาพคล้ายกับภาษาอังกฤษ
แบ่งออกเป็น 4 ประเภท ได้แก่
ตัวอักษรแบบมีหัว
Headed Typeface
ขข
ตัวอักษรแบบไม่มีหัว
Headless Typeface
ขข
ตัวอักษรแบบตัวเขียน
Handwriting Typeface
ขข
ตัวอักษรแบบประดิษฐ์
Script Typeface
ขข

24. ตัวอักษรแบบมีหัว
Headed Typeface
เป็นตัวอักษรที่อ่านง่าย เหมาะสาหรับการจัดวางในรูปแบบย่อหน้า หรือข้อความยาว ๆ
กฤษณพงศ์

25. ตัวอักษรแบบมีหัว
Headed Typeface

26. ตัวอักษรแบบมีหัว
Headed Typeface

27. ตัวอักษรแบบไม่มีหัว
Headless Typeface
เป็นตัวอักษรที่หัวถูกปาดออก เหมาะสาหรับการจัดวางข้อความแบบสั้น หากนาไปจัดวางรูปแบบย่อหน้า
หรือข้อความยาวมาก อาจทาให้อ่านยาก
กฤษณพงศ์

28. ตัวอักษรแบบไม่มีหัว
Headless Typeface

29. ตัวอักษรแบบไม่มีหัว
Headless Typeface

30. ตัวอักษรแบบตัวเขียน
Handwriting Typeface
เป็นตัวอักษรที่เลียนแบบลายมือเขียน เหมาะสาหรับการออกแบบที่ไม่เป็นทางการ
มีข้อความไม่ยาวมากนัก
กฤษณพงศ์

31. ตัวอักษรแบบตัวเขียน
Handwriting Typeface

32. ตัวอักษรแบบตัวเขียน
Handwriting Typeface

33. ตัวอักษรแบบประดิษฐ์
Script Typeface
เป็นตัวอักษรที่ออกแบบให้มีลักษณะโดดเด่นเป็นพิเศษ เหมาะสาหรับการพาดหัว
หรือข้อความสั้น
กฤษณพงศ์

34. ตัวอักษรแบบประดิษฐ์
Script Typeface

35. ตัวอักษรแบบประดิษฐ์
Script Typeface

36. หลักการจัดวางตัวอักษรให้ดูดี
Principles for Good Typography
ลักษณะของตัวอักษร
Font Style
Abc
การจัดลาดับความสาคัญ
Prioritization
การเลือกแบบอักษร
Choosing Typeface
การจัดตาแหน่งย่อหน้า
Text Alignment
การจบด้วยสีและความเปรียบต่าง
Color & Contrast
การปรับแต่งคุณสมบัติตัวอักษร
Character Properties

37. การจัดลาดับความสาคัญ
Prioritization
เป็นสิ่งแรกที่นักออกแบบต้องให้ความสาคัญ ว่าส่วนใดสาคัญมากที่สุดใช้ขนาดใหญ่
ส่วนใดสาคัญน้อยที่สุดใช้ขนาดเล็ก

38. การเลือกแบบอักษร
Choosing Typeface
ไม่มีกฎตายตัว นักออกแบบจะต้องเลือกให้เหมาะสมกับงาน
สามารถใช้แบบอักษรตามระบบปฏิบัติการถ้าเป็นไปได้

39. ลักษณะของตัวอักษร
Font Style
เป็นลักษณะของตัวอักษรที่มีความแตกต่างกันในรูปแบบอักษร (Type Face) เดียวกัน ได้แก่
Normal/Regular
ตัวอักษรแบบตัวปกติ
Abc
Bold
ตัวอักษรแบบตัวหนา
Abc
Italic
ตัวอักษรแบบตัวเอียง
Abc
Bold Italic
ตัวอักษรแบบตัวหนาและเอียงปกติ
Abc Abc
Light
ตัวอักษรที่มีลักษณะบางเป็นพิเศษ
Abc
Extra/Black
ตัวอักษรแบบตัวหนาพิเศษ

40. ลักษณะของตัวอักษร
Font Style
เป็นลักษณะของตัวอักษรที่มีความแตกต่างกันในรูปแบบอักษร (Type Face) เดียวกัน ได้แก่
ABC
All Caps
ตัวอักษรที่เป็นตัวพิมพ์ใหญ่ทั้งหมด
Outline
ตัวอักษรที่มีลักษณะเป็นกรอบเส้นรอบนอก
Abc
Narrow/Condensed
ตัวอักษรที่มีลักษณะแคบเป็นพิเศษ
Abc
Extended
ตัวอักษรที่มีลักษณะกว้างเป็นพิเศษ

41. ลักษณะของตัวอักษร
Font Style

42. ระยะห่างระหว่างตัวอักษร
Tracking
การปรับแต่งคุณสมบัติตัวอักษร
Character Properties
เป็นการกาหนดค่าที่เกี่ยวข้องกับการจัดการตัวอักษร ได้แก่
ระยะห่างระหว่างบรรทัด
Leading
ช่องว่างระหว่างตัวอักษรแต่ละตัว
Kerning

43. ระยะห่างระหว่างบรรทัด
Leading
คือ การปรับให้บรรทัดแต่ละบรรทัดห่างกันหรือใกล้กัน
KRIDSANAPONG LERTBUMROONGCHAI
KRIDSANAPONG LERTBUMROONGCHAI
KRIDSANAPONG LERTBUMROONGCHAI
Leading
Leading
KRIDSANAPONG LERTBUMROONGCHAI
KRIDSANAPONG LERTBUMROONGCHAI
KRIDSANAPONG LERTBUMROONGCHAI
Leading
Leading

44. ระยะห่างระหว่างตัวอักษร
Tracking
คือ การปรับความห่างของตัวอักษรระหว่างคาหรือกลุ่มของตัวอักษร
KRIDSANAPONG LERTBUMROONGCHAI
K R I D S A N A P O N G L E R T B U M R O O N G C H A I
Tracking

45. ช่องว่างระหว่างตัวอักษรแต่ละตัว
Kerning
คือ การปรับช่องว่างระหว่างตัวอักษรด้านซ้ายและขวา (ปรับทีละตัว)
KRIDSANAPONG LERTBUMROONGCHAI
K RI DSA NAP ONG LERTB U M R O O NGCH AI
Kerning

46. ใน Adobe Illustrator สามารถกด Ctrl + T เพื่อเปิดพาเนล Character ขึ้นมา
ใช้ปรับ Leading, Kerning และ Tracking ได้
A
B C
A >> Leading B >> Kerning C >> Tracking

47. การจัดตาแหน่งย่อหน้า
Alignment
ใช้ในกรณีจัดข้อความยาวหลายบรรทัด โดยทั่วไปในการออกแบบ จัดเป็น 4 รูปแบบ ได้แก่
จัดแบบชิดซ้าย
Left
จัดกึ่งกลาง
Center
จัดชิดขวา
Right
จัดชิดขอบ
Justify

48. จัดแบบชิดซ้าย
Left
เป็นค่ามาตรฐานของการจัดย่อหน้าสาหรับภาษาที่อ่านจากซ้ายไปขวา

49. จัดกึ่งกลาง
Center
เป็นการจัดที่ทาให้ข้อความดูโดดเด่น นิยมใช้บนหน้าเว็บไซต์ หน้าแอปพลิเคชัน และบนป้ายแบนเนอร์ เป็นต้น

50. จัดชิดขวา
Right
เป็นค่ามาตรฐานของการจัดย่อหน้าสาหรับบางภาษาที่เขียนจากความมาซ้าย เช่น ภาษาฮิบรู หรือนิยมใช้กับตัวเลขที่ใช้คานวณ

51. จัดชิดขอบ
Justify
เป็นการจัดข้อความที่เป็นระเบียบ นิยมใช้ในหน้าเอกสารที่มีหลายย่อหน้า

52. การจบด้วยสีและความเปรียบต่าง
Color & Contrast
มีผลต่อสายตาผู้ใช้งาน ตัวอักษรควรใช้สีที่มีความเปรียบต่างจากพื้นหลัง ทาให้อ่านง่าย โดดเด่น