ในกระทู้นี้ผมอยากจะรวบรวมเรื่องราวของ แนวทางการออกแบบ และความรู้ทั่วไปของ โครงสร้างตัวอักษรไทย ไว้เผื่อเกิดประโยชน์ต่อการใช้อ้างอิงในการออกแบบนะครับ ถ้าหากใครที่มีอะไรอยากจะเสริม หรือแย้งก็เชิญได้เลยครับ
เพราะเห็น https://playtype.com/about/typefaces/glossary (https://playtype.com/about/typefaces/glossary) ตัวละตินเขามี Term เรียกองค์ประกอบต่างๆ ของตัวอักษรแล้ว
แต่ของบ้านเรายังไม่เห็นใครทำออกมาลักษณะแบบนี้เลย จึงอยากจะลองศึกษาแล้วเทียบดูครับ
(http://anhnguyen.gdnm.org/files/2013/04/anatomy-of-type.jpg)
เรื่องของปากตัวอักษร
อักษรไทยตัวแรก ก็บอกเอกลักษณ์ของพยัญชนะไทยได้แล้ว
อักษรไทยมีองค์ประกอบที่จำแนกได้ชัดเจน แค่ไม่กี่อย่าง
ซึ่งองค์ประกอบแรกที่จะกล่าวถึงคือ ปาก หรือ หยัก
เป็นคำถามสำหรับนักออกแบบตัวอักษรรุ่นใหม่ๆ ว่าควรจะใส่หยัก หรือไม่ใส่หยักดี บางคนก็อยากจะลดรูปให้มากที่สุด
เพื่อให้ตัวอักษรดูเรียบและสะอาดตา แต่ทั้งนี้ก็ต้องดูด้วยว่าการตัดปากของตัว ก ส่งผลกระทบต่อตัวอักษรอื่นๆ ที่สัมพันธ์กันด้วยหรือไม่
และจะเกิดคู่สับสนขึ้นด้วยหรือเปล่า เช่น ถ(ไร้ปาก/ไร้หัว) กับ ด(ไร้หัว) เป็นต้น มันอาจจะดูสวยเมื่อพิมพ์แค่คำสั้นๆ แต่เมื่อฟอนต์นั้นได้ถูกนำไปใช้
กับกลุ่มของข้อความที่มีขนาด Point ไม่มาก หรือ ใช้อ่านบนสกรีน (embedded font/web-font) จะทำให้อ่านได้ลำบาก เป็นต้น
หรือถ้าคุณอยากจะฉีกกฎเกณฑ์ สร้างเอกลักษณ์ของคุณเอง ทำตัวอักษรตระกูล ก ไม่มีปาก
แต่คนที่ใช้ฟอนต์ยังสามารถแยกแยะตัวอักษรต่างๆ ได้อย่างถูกต้อง และจัดวางแล้ว ยังสวยงามลงตัว อ่านได้ใจความ ก็สามารถทำได้ครับ
การออกแบบไม่มีกฎที่ตายตัว อาจจะมีเสียงของพวกหัวเก่าค้านบ้าง ก็ไม่เป็นไรครับ ผมถือว่ามันเป็นความท้าทายอย่างนึง
(http://img3.f0nt.com/01/f750839f870bc640660e8135da3ae4e4.png)
(http://www.waltons.co.uk/dynamiccontent/images/hen.jpg)
(http://img3.f0nt.com/01/88e219fcd38a5c232d45111ef4a94702.png)
ภาพ ปากของตัวอักษรทั้งชุด
(http://img3.f0nt.com/01/9653560866b4f1963c09ba7af34bd1f1.png)
(http://img3.f0nt.com/01/29d766402510ff0c41fce6bcadca7b7c.png)
ภาพ ตัวอักษรไม่มีปาก อาจทำให้เกิดคู่สับสน
ที่มา Slide อ.อนุทิน @งาน Granshan 2013
:12:
ขอบคุณมากครับ มีประโยชน์อีกแล้ว
เดี๋ยวเสร็จแล้วจะขอแชร์ + แปะไว้ในห้องสอนฟอนต์นะครับ
อ้างคำพูดจาก: iannnnn เมื่อ 01 ก.ย. 2013, 00:30 น.
:12:
ขอบคุณมากครับ มีประโยชน์อีกแล้ว
เดี๋ยวเสร็จแล้วจะขอแชร์ + แปะไว้ในห้องสอนฟอนต์นะครับ
ได้ครับ แต่ผมจะค่อยๆ ทะยอยเขียนนะครับ ขอไประลึกจากสิ่งที่ไปอ่าน กับที่ไปฟังสัมมนา ต่างๆ ก่อน เหมือนมันจะแน่นๆ
อยากให้คนอื่นได้อ่านบ้างครับ เผื่อจะได้เห็นฟอนต์คุณภาพเพิ่มขึ้น
มีหัว ไม่มีหัว
เรื่องหัวของพยัญชนะไทย (ยกเว้น ก และ ธ) เป็นสิ่งที่ฝ่ายอนุรักษ์ กับฝ่ายก้าวหน้า พยายามถกเถียงหาข้อสรุป
โดยฝ่ายอนุรักษ์ก็บอกว่า อักษรไม่มีหัว (loopless form) อ่านยาก ไม่เหมาะสำหรับเอามาจัดวางข้อความ
แต่ฝ่ายก้าวหน้าก็โต้ว่า อักษรไทยเปิดโอกาสให้เราเล่นสนุกกับมันได้มากมายกว่านั้น สามารถ Simplify เพื่อจัดการกับความสูง
เมื่อตัดหัวออกแล้ว ก็ต้องอ่านได้ง่ายด้วย แม้บนสกรีน กรณีล่าสุดคือการที่ Apple ทำการเปลี่ยนซิสเต็มฟอนต์ใน iOS 7
ให้เป็นตัวไม่มีหัว ก็สร้างความชื่นชอบให้กับคนส่วนมาก ในขณะที่บางส่วนก็ยังยึดมั่นว่า แบบเดิมมีหัว (ธนบุรี) อ่านง่ายกว่า
(http://www.macthai.com/2013/07/30/apple-update-thai-font-display-on-ios-7-beta4/ (http://www.macthai.com/2013/07/30/apple-update-thai-font-display-on-ios-7-beta4/))
(http://www.apple.com/th/iphone/ (http://www.apple.com/th/iphone/))
ทีนี้มาดูว่า หัวในอักษรไทย (The head of the letter/loop leadoff) มีแบบไหนบ้าง นะครับ
(http://img3.f0nt.com/01/abc75fd965c7c8f8bb344c01dccc954f.png)
หัวในอักษรไทย มี 3 แบบ ครับ คือ หัวเข้า (inner loop) และ หัวออก (outer loop) และหัวขมวด (loop with neck)
องค์ประกอบที่รองรับหัวขมวด สำหรับ ข ซ ช ฃ ก็มีส่วนของคอ (neck) และ หยัก (notch) นั่นเองครับ (ข ช สามารถทำเป็นแบบ outer loop ก็ได้)
ส่วนตัว ห ม น ฬ ฮ ก็จะมีส่วนขมวด (Knot) ครับ
*** หยักตรงกลาง ใน ฬพผฝฟ ขอเรียก ง่าม (crotch) ก็แล้วกันครับ
ว้าว จู๋ดีมีคุณภาพอีกแล้วครับท่านนน :25:
เชิง (Base) กับ ไส้ (Entrails)
(http://img3.f0nt.com/01/83f23e9aeb0a3aaeaccf38a328c9fb44.png)
เชิงกับไส้ เป็นจุดที่ท้าทายให้ดีไซเนอร์คิดหาวิธีใหม่ๆ ในการออกแบบ เพื่อให้ ฐ ญ ษ (2-stroke letter) มีบุคลิกที่โดดเด่น
โดยอาจจะสัมพันธ์ไปจนถึง เชิง ฎ ฏ ด้วย
(http://img3.f0nt.com/01/ee8d3f58269c638496782dd9c4c5dd28.png)
หาง (Tail)
หางของอักษรไทยมีอยู่สามกลุ่มใหญ่ๆ (ปริญญา, 2549)
1 ตัวอักษรกลุ่มหางตรง : ป ฝ ฟ (Ascender) ฤ ฦ ๅ (Descender)
(http://img3.f0nt.com/01/d023c58947b3befe570ad014653e0361.png)
2 ตัวอักษรกลุ่มหางเฉียง : ช ซ (Short-tail) ศ ส (Long-tail) ------> นักออกแบบที่ทำตัวอักษรไม่มีหัว มักจะเอา ฐ มาใช้กฎข้อนี้ด้วยโดยใช้ จ เป็นฐาน
3 ตัวอักษรกลุ่มหางขมวดตวัด (Loop Tail; Loop Terminal): ฬ ฮ ------> นักออกแบบที่ทำตัวอักษรไม่มีหัว มักจะเอาสองตัวนี้ไปใช้กฎตามข้อ 2
(http://img3.f0nt.com/01/f6021d7b49c4fd13d56fffd9c856d940.png)
ภาพประกอบสวยมากๆ ครับ :25:
คุณลีโอนี่เป็นสุดยอดนักสะสมจริงๆ
แหล่มเป็ดมาก ไว้จะมาแจมครับ :12:
:25: วิชาการเต็มๆ
3 ขั้นของการเปลี่ยนแปร .. 3 degrees of variation
การแปรรูปอักษร ทำให้เกิดแนวทางใหม่ของการออกแบบโครงสร้างอักษร
โดยอาจจะเรียบง่าย ซับซ้อน หรือ เปลี่ยนมุมมองไปเลย ทั้งนี้ นักออกแบบก็ต้องคำนึงถึง legibility ด้วย
การแปรรูปอักษร พอสรุปได้สามประการ คือ
ขั้นปฐมภูมิ ตัด
(http://img3.f0nt.com/01/46b4df0d0b75d90cf249564abf6cd40d.png)
การแปรรูปอักษรขั้นนี้ คือการ ตัดทอนรายละเอียดบางอย่าง แต่รักษาโครงสร้างเดิมมากที่สุด
เพื่อให้ตัวอักษรใช้กฎในการเดินเส้นลดลง อย่างเช่น บ ป ที่ใช้โครงสร้างของ U (ตัดหัว ตัดเหลี่ยม)
การเปลียนหัวกลมของตัวอักษรให้กลายเป็นเพียงแค่ stroke สั้นๆ (พวก inner loop หรือ knot เช่น อ น)
ขั้นทุติยภูมิ ปรับ
(http://img3.f0nt.com/01/70c31987a8bcb579ab1adfed01a1a972.png)
การแปรรูประดับนี้ เพื่อลดความซับซ้อนขององค์ประกอบย่อยให้น้อยลง เปลี่ยนแปลงจากรูปแบบดั้งเดิม
ในระดับปานกลาง แต่ยังง่ายต่อการมองและอ่าน ลดปัญหาคู่สับสน
ขั้นตติยภูมิ แผลง
(http://img3.f0nt.com/01/0372176c57ecbb88b8632cf9aa585467.png)(http://img3.f0nt.com/01/a491a46d8e900c3c182583eb2c77f593.png)(http://img3.f0nt.com/01/9e2ec69649fe847b95d733f53ae3f61f.png)
ขั้นนี้คือการเปลี่ยนการเดินเส้นให้แตกต่างจากโครงสร้างเดิมไปเลย โดยอาศัยฟอร์มของอักษรภาษาต่างๆ
รูปแบบอักษรโบราณ หรือออกแบบฉีกกฎเพื่อสร้างความท้าทายใหม่ๆ ให้กับผู้มองตัวอักษร
เช่น ร เป็น S , ห เป็น K , ห ท ที่เอารูปแบบตัวเขียนโบราณมาประยุกต์ เป็นต้น
:46: :25: :46:
เรียนแบบมีหลักการคือแบบนี้น่เอง :25: :05:
ทำฟอนต์ไม่เป็นยังอ่านสนุกเลย :25:
่อ่านสนุกจริงด้วย
ขอบคุณมากครับ :25: :25:
อ่านเพลินจริงเชียว :12: :25:
ของเค้าดีจริงๆ :56:
การขยาย Style และการรักษาเจตนาเดิมของแบบ
อันนี้เป็นเรื่องที่ไปฟังมานะครับ พูดถึงการออกแบบฟอนต์ในเชิงพาณิชย์ของไทย
โดยส่วนมากมักจะออกแบบมาแค่ ธรรมดา หนา เอน หนาเอน (เอารองรับแค่โปรแกรม Word Processor พื้นฐาน)
แล้ว ถ้าอยากจะได้ หนา หรือ บาง กว่านั้นอีกล่ะ ???? ทำไงดี ????
ในปัจจุบัน การออกแบบฟอนต์ ต้องมีการคำนึงถึงเรื่องของสไตล์ที่จะมีการต่อขยายในอนาคตด้วย (น้ำหนัก + ความกว้าง + เอียง)
เพื่อรองรับความต้องการต่างๆ ในการใช้งาน เพราะการออกแบบสิ่งพิมพ์สมัยใหม่ การใช้น้ำหนักต่างๆ ของแต่ละแบบตัวพิมพ์จะทำให้การจัดหน้าสวยงาม
สามารถสื่ออารมณ์ความหนักแน่นของข้อความ และความเหมาะสมกับสถานการณ์ต่างๆ ภายใต้เงื่อนไขของความสอดคล้อง (ลดการใช้ฟอนต์จับฉ่าย)
เช่น นำเอาความหนาต่างๆ ไปใช้จัด Style เป็น Head / Sub-head / Body / List / Caption / Display ... ในงานออกแบบจัดหน้าอย่างเหมาะสม
(http://www.enfocus.com/manuals/ReferenceGuide/PP/10/enUS/assets/5794.gif)(http://img3.f0nt.com/21/b7cf05df714cd55a14ea7d59f3a81d51.png)
ภาพ: Multiple Master
ความท้าของการออกแบบฟอนต์ไทยให้มีน้ำหนักหลากหลาย คือ ฟอนต์ที่มีหัว ยิ่งทำหนามากๆ ก็จะยากในการจัดการกับรูปทรงของมัน
ให้สวยงามและยังอ่านออก ในงาน Granshan 2013 อ.อนุทิน ได้ยกตัวอย่างฟอนต์ ทองหล่อ
(http://img3.f0nt.com/21/a061ce02c6f4412302da58d2948aedda.png)
ที่มา: Twitter อ.อนุทิน
สุขุมวิท ตัดใหม่
ตัวนี้ ในความคิดของผมคิดว่า มันเป็นฟอนต์ที่ น้ำหนักเยอะที่สุดในประเทศไทยแล้ว ตอนนี้ 555555
(http://img3.f0nt.com/21/02ed74a683bb5f758b43c24c6f2f933a.png)
ที่มา: แค็ปมาจาก Specimen ของ คสดม ซึ่งอาจจะสะกดพลาดนิดหน่อยครับ
http://cadsondemak.com/cadsonwp/wp-content/uploads/2013/09/SukhumvitSet.pdf (http://cadsondemak.com/cadsonwp/wp-content/uploads/2013/09/SukhumvitSet.pdf)
ฟอนต์ไทยที่เล่นกับน้ำหนักมีแล้ว แต่ตอนนี้ ยังขาดฟอนต์ไทยที่เล่นกับความกว้างอยู่นะครับ :56: :56:
-- แก้ไข // มี Helvethaica Family ครับ
เอาชนะข้อจำกัดทางพื้นที่ อย่าให้ที่แคบ บีบเรา
อันนี้เป็น ไอเดียในการเอาชนะด้วยการออกแบบครับ ไม่ว่าที่จะแคบหรือกว้าง ถ้าเราออกแบบฟอนต์ที่ช่วยแก้ปัญหาได้
คนใช้ฟอนต์ก็มีทางเลือกเพิ่มขึ้น สามารถแก้ปัญหาได้โดยไม่ต้องไปยืด หรือ บีบ ให้เสียเจตนาของฟอนต์
ปัญหา
(http://img3.f0nt.com/21/a1f7c4fd4ce5f370306a2e170f8d7069.png)
(http://img3.f0nt.com/21/20f4f7eb23617f65dcf44ceed2cf4000.png)
การออกแบบเพื่อแก้ปัญหา
(http://img3.f0nt.com/21/70f3412596cd41653bca0e14b3f8432f.png)
ที่มา: Granshan 2013
(http://img3.f0nt.com/21/9f30848dcc9c21b3064cb11a1e7fd829.png)
ที่มา: Stawix - Facebook / Type: Super Label Condensed
เลขไทยและพัฒนาการทางการออกแบบ
(http://upload.wikimedia.org/wikipedia/th/thumb/0/08/%E0%B9%90%E0%B9%91%E0%B9%92%E0%B9%93%E0%B9%94%E0%B9%95%E0%B9%96%E0%B9%97%E0%B9%98%E0%B9%99.GIF/400px-%E0%B9%90%E0%B9%91%E0%B9%92%E0%B9%93%E0%B9%94%E0%B9%95%E0%B9%96%E0%B9%97%E0%B9%98%E0%B9%99.GIF)
(http://img3.f0nt.com/02/cfdf40bee77dc422947411980bfa685d.jpg)
การออกแบบเลขไทย เป็นสิ่งที่นักออกแบบฟอนต์ไม่ค่อยปลื้มเท่าไร (จากการสอบถามเพื่อนนักออกแบบฟอนต์)
เลขไทยมีรหัส Unicode ของตัวเองชัดเจนใน Range อักขระไทย มีแป้นให้กด แต่ในเชิงการประยุกต์ใช้งานค่อนข้างลำบาก เนื่องด้วยข้อจำกัด เช่น
ไม่มีใครนิยมเอาไปทำปฏิบัติการเชิงคณิตศาสตร์ ไม่รองรับการคำนวณ ไม่รองรับการทำเลขหน้า ดัชนี ฯลฯ
และปัญหาความกลมกลืนเมื่อใช้ร่วมกับตัวละติน เลขไทยในฟอนต์เก่าๆ จะตัวเล็กกว่าความสูงอักษรไทยมาก ทำให้อ่านยาก และไม่น่าใช้งาน
ดังนั้นแนวทางในการแก้ไขคือการปรับสัดส่วนของชุดเลขไทยกับความสูงเฉลี่ยของอักษรละตินกับอักษรไทย
และใส่สคริปท์ Opentype ทำให้มันเป็น Alternate อีกเซ็ตของเลขอารบิก ก็พอช่วยได้ในระดับหนึ่ง จนกว่าซอฟท์แวร์ต่างๆ จะรองรับระบบเลขไทย 100% (ชาติไหน :38: :38:)
(http://img3.f0nt.com/21/f20441c0c95ed876854b94da6662590d.png)
ภาพ: ใส่คริปท์ให้เลขไทย เป็น Alt ของอารบิก เพื่อการประยุกต์ใช้
(http://img3.f0nt.com/21/4339f129b64e5d2fe7f396cff15efe64.jpg)
ภาพ: iOS รองรับเลขไทย
โห เท่มากครับ :25:
ส่วนเรื่องน้ำหนักฟอนต์นี่ผมว่า DB HelvethaicaX ยังเยอะมากๆ อยู่เลยแฮะ
อ้างคำพูดจาก: iannnnn เมื่อ 22 ก.ย. 2013, 08:11 น.
โห เท่มากครับ :25:
ส่วนเรื่องน้ำหนักฟอนต์นี่ผมว่า DB HelvethaicaX ยังเยอะมากๆ อยู่เลยแฮะ
เออ จริงๆ ด้วยแฮะ ลืมไปได้ยังไงว่าเขามี Rounded ด้วย
มีแคบ มีกว้าง ครบเลย T_T จริงๆ ด้วยเนาะ
:46: :12:
ขอบคุณมากค่ะ เป็นกระทู้ที่อ่านสนุกดีค่ะ อยากให้มาแบ่งปันอีกจัง แต่ดูเหมือนเราเข้ามาช้าไปรึเปล่าเนี่ย
ตอนเรียนอาจารย์เคยสอนเรื่องพยัญชนะแต่ละตัวกับการกระทบต่อความรู้สึกหรือชี้นำความคิด
ที่จำได้คือ ป.ปลา
ตัว ป มีนัยยะหมายถึง ทำให้...
เช่น
ปลุก ทำให้ลุก
เปลี่ยน ทำให้เลื่อน
ปรับ ทำให้รับ(กับสิ่งใดสิ่งหนึ่ง)
ปลูก ทำให้ออกลูกออกหลาน
ปล้ำ ทำให้ล้ำเข้าไป เป็นต้น
ไม่เกี่ยวกับกระทู้แต่เล่าให้ฟังสนุก ตอนแทนกระทู้ดีๆค่ะ
ตอนนี้งงกับโปรแกรมทำฟ้อนต์มาก ปวดตาละ ไปนอนดีกว่า(มือใหม่สุด ไม่มีพื้นฐานเลย ฮ่าๆ)
:12: อ่านเรื่อยๆ ครับ มีสนุกๆ อีกเยอะ