Uploaded byDr.Kridsanapong Lertbumroongchai
การจัดวางตัวอักษร (Typography)
Facebook : https://www.facebook.com/TouchPoint.in.th Website : http://touchpoint.in.th
การจัดวางตัวอักษร (Typography)
- 1.
- 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.
- 5. การจัดวางตัวอักษรกับการออกแบบ ส่วนประสานงานผู้ใช้ มีความสาคัญกับผู้ใช้เป็นอย่างมาก รวมถึงการออกแบบส่วน ประสานงานผู้ใช้ (UserInterface Design) ด้วย เพราะการ จัดวางตัวอักษร มีผลต่อผู้ใช้โดยตรง Typography and UI Design
- 6. บทบาทสาคัญของการจัดวางตัวอักษร The important ofTypography สร้างภาพลักษณ์ต่อผลิตภัณฑ์หรือบริการ เป็นกลยุทธ์การแย่งชิงพื้นที่การสื่อสาร สร้างแรงดึงดูดต่อข้อมูล เสริมพลังให้กับข้อมูล สร้างมูลค่าทางการตลาด
- 7. ปัญหาของการใช้ตัวอักษรที่ขาดการออกแบบ The problem ofTypography without Design ต้องใช้เวลามากในการเข้าถึงข้อมูล ผู้ใช้งานเกิดความยุ่งยากต่อการอ่าน ขาดพลังในการสื่อสาร ใช้พื้นที่มาก สิ้นเปลืองทรัพยากร ไม่เกิดมูลค่าทางการตลาด การสื่อสารไม่บรรลุผล
- 8. ปัญหาของการใช้ตัวอักษรที่ขาดการออกแบบ The problem ofTypography 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.
- 13.
- 14. อักษรแบบไม่มีฐาน San Serif เป็นตัวอักษรที่ไม่มีเชิงหรือไม่มีฐานตรงส่วนปลาย อ่านง่ายดูทันสมัยมากกว่าแบบอื่น ๆ เหมาะจะใช้ในงานที่ต้องการความทันสมัย ไม่เป็นทางการมากนัก Kridsanapong
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. ประเภทของตัวอักษรภาษาไทย Types of ThaiTypeface การแบ่งประเภทตัวอักษรภาษาไทย จัดตามรูปร่างทางกายภาพคล้ายกับภาษาอังกฤษ แบ่งออกเป็น 4 ประเภท ได้แก่ ตัวอักษรแบบมีหัว Headed Typeface ขข ตัวอักษรแบบไม่มีหัว Headless Typeface ขข ตัวอักษรแบบตัวเขียน Handwriting Typeface ขข ตัวอักษรแบบประดิษฐ์ Script Typeface ขข
- 24. ตัวอักษรแบบมีหัว Headed Typeface เป็นตัวอักษรที่อ่านง่าย เหมาะสาหรับการจัดวางในรูปแบบย่อหน้าหรือข้อความยาว ๆ กฤษณพงศ์
- 25.
- 26.
- 27. ตัวอักษรแบบไม่มีหัว Headless Typeface เป็นตัวอักษรที่หัวถูกปาดออก เหมาะสาหรับการจัดวางข้อความแบบสั้นหากนาไปจัดวางรูปแบบย่อหน้า หรือข้อความยาวมาก อาจทาให้อ่านยาก กฤษณพงศ์
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. หลักการจัดวางตัวอักษรให้ดูดี Principles for GoodTypography ลักษณะของตัวอักษร Font Style Abc การจัดลาดับความสาคัญ Prioritization การเลือกแบบอักษร Choosing Typeface การจัดตาแหน่งย่อหน้า Text Alignment การจบด้วยสีและความเปรียบต่าง Color & Contrast การปรับแต่งคุณสมบัติตัวอักษร Character Properties
- 37.
- 38.
- 39. ลักษณะของตัวอักษร Font Style เป็นลักษณะของตัวอักษรที่มีความแตกต่างกันในรูปแบบอักษร (TypeFace) เดียวกัน ได้แก่ Normal/Regular ตัวอักษรแบบตัวปกติ Abc Bold ตัวอักษรแบบตัวหนา Abc Italic ตัวอักษรแบบตัวเอียง Abc Bold Italic ตัวอักษรแบบตัวหนาและเอียงปกติ Abc Abc Light ตัวอักษรที่มีลักษณะบางเป็นพิเศษ Abc Extra/Black ตัวอักษรแบบตัวหนาพิเศษ
- 40. ลักษณะของตัวอักษร Font Style เป็นลักษณะของตัวอักษรที่มีความแตกต่างกันในรูปแบบอักษร (TypeFace) เดียวกัน ได้แก่ ABC All Caps ตัวอักษรที่เป็นตัวพิมพ์ใหญ่ทั้งหมด Outline ตัวอักษรที่มีลักษณะเป็นกรอบเส้นรอบนอก Abc Narrow/Condensed ตัวอักษรที่มีลักษณะแคบเป็นพิเศษ Abc Extended ตัวอักษรที่มีลักษณะกว้างเป็นพิเศษ
- 41.
- 42.
- 43. ระยะห่างระหว่างบรรทัด Leading คือ การปรับให้บรรทัดแต่ละบรรทัดห่างกันหรือใกล้กัน KRIDSANAPONG LERTBUMROONGCHAI KRIDSANAPONGLERTBUMROONGCHAI KRIDSANAPONG LERTBUMROONGCHAI Leading Leading KRIDSANAPONG LERTBUMROONGCHAI KRIDSANAPONG LERTBUMROONGCHAI KRIDSANAPONG LERTBUMROONGCHAI Leading Leading
- 44. ระยะห่างระหว่างตัวอักษร Tracking คือ การปรับความห่างของตัวอักษรระหว่างคาหรือกลุ่มของตัวอักษร KRIDSANAPONG LERTBUMROONGCHAI KR 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 คือ การปรับช่องว่างระหว่างตัวอักษรด้านซ้ายและขวา (ปรับทีละตัว) KRIDSANAPONGLERTBUMROONGCHAI 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.
- 49. จัดกึ่งกลาง Center เป็นการจัดที่ทาให้ข้อความดูโดดเด่น นิยมใช้บนหน้าเว็บไซต์ หน้าแอปพลิเคชันและบนป้ายแบนเนอร์ เป็นต้น
- 50. จัดชิดขวา Right เป็นค่ามาตรฐานของการจัดย่อหน้าสาหรับบางภาษาที่เขียนจากความมาซ้าย เช่น ภาษาฮิบรูหรือนิยมใช้กับตัวเลขที่ใช้คานวณ
- 51.
- 52. การจบด้วยสีและความเปรียบต่าง Color & Contrast มีผลต่อสายตาผู้ใช้งานตัวอักษรควรใช้สีที่มีความเปรียบต่างจากพื้นหลัง ทาให้อ่านง่าย โดดเด่น