ฟอนต์ฟอรั่ม

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

(http://img3.f0nt.com/13/fb844f31f64cf3af300ab3154dac6257.jpg)

เพิ่มเติมให้นะครับ
(http://img3.f0nt.com/13/eeb07b770f84e23f2fa1ae2aca73151c.jpg)

ตัวอักษรเรียงตาม Glyph ใน Illustrator
(http://img3.f0nt.com/13/cc898d25e86d02a755b61214acce1a71.jpg)

ของเทพมาแล้ว :25:

รอดูแบบชัดๆ ครับ :12:

สวยยยย :25: :25: :25:

โอววว  สวยยยย  :25: :25:


ปล ผมติดที่สระแอ ครับ ดูรวมๆมันเป็นปื้นๆ สะดุดตาไปนิดครับ  :46:

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

*หากท่านอื่นมีความเห็นอย่างไร บอกไว้ได้นะครับ เพื่อประโยชน์จะได้นำ font นี้ไปใช้ด้วยกัน

อยากดู Latin ทั้งชุดครับผม ตัวไทยเรียบง่ายดีฮะ

คุณ rootEngineer หมายถึง ตัวอักษรทั้งหมดเลยรึเปล่าครับ ในภาพสุดท้าย จะมีทั้งหมดแล้วครับ หรือถ้าผมเข้าใจผิด บอกนะครับ ว่า Latin ที่ว่าหมายถึงอะไร

หมายถึงตัวอักษรละติน (อังกิดและอื่นๆ ที่มีเค้าเดียวกัน) ทั้งหมดครับ ที่ผมดูรวมๆ แล้วขัดหูขัดตาคือ
- ผมเห็นแค่ œ แต่ไม่เห็น Œ นะครับ
- í î Í Î มันติดกันจนมองแทบไม่ออกแฮะครับ แต่ยังไงพิมพ์เป็นคำคงไม่พิมพ์ติดสองตัวกันอยู่แล้ว
- æ เห็นมีหางของ a เล็กๆ แล้วมันดูแปลกๆ ฮะ (ไม่รู้ว่าผมรู้สึกไปคนเดียวหรือเปล่า?)
- ทำ × ÷ ไหมครับ อยากเห็นเมื่อจัดอยู่กับตัวเลข

ก็ว่าดูแบบกันจากไหน ที่ไหนได้คุณดำรงใส่ภาพเพิ่มไว้ข้างบนนี่เอง :3005:

เรื่องความสูงของตัวอักษรไทย-ละติน อย่าได้ซีเรียสครับ เอาที่ใช้แล้วสะดวกเลย
มาตรฐานที่ออกมานั้นเขาทำไว้เพื่อความสะดวกในบางอย่างครับ แต่ดีไซเนอร์สามารถกำนดวิถีของฟอนต์ได้เอง

เดี๋ยวรอดูเรื่อยๆ นะครับ งานสวยมาก :12:

ปรับมาให้ดูอีกครั้ง ตามที่สรุปไว้คราวก่อน
(http://img3.f0nt.com/17/8c0e9cb4069e1d30df02c933d92f3ea5.jpg)

สวยงามเลย พวกสระบนยังติดอยู่อีกนี้ดครับ ยกขึ้นไหวไหมครับ :12:

สระอะ มันชิดกันไปหน่อยไหมครับ น่าจับมันถ่าง บน-ล่าง อีกซักกะนิด

สวดยวดเลยครับ  :25: :25: :25:

ปรับตามที่แนะนำกันอีกครั้งครับ
(http://img3.f0nt.com/18/a28ac8c47cc7713e3147ed34720ffb51.jpg)

อร่อยขึ้นมาก :25:

ถ้าดูน่าอร่อยแล้ว ผมปิดการขายน้ำหนัก Light ที่เท่านี้ เพื่อไปลองปรุง Medium และ Bold... ระหว่างนี้ ก็มีฟอนต์อื่นให้ช่วยกันอีกที่กระทู้ใหม่ครับ ขอเรียนเชิญ

:25: เย้

เคาะสระแอ ออกอีกมันสวยยยงาม เลิศ เพอเฟคและมากกๆ อะไรอีกดี ...

ขอบคุณครับคุณ Maxx เดี๋ยวจัดการปรุงให้ครับ (ชอบให้หย่อนคำแนะนำกันไว้ จะ font นี้ font อื่นด้วยก็ดีครับ เพราะทำเอง มึนเอง)

 :10:

สำหรับฟอนต์นี้กำลังขยายน้ำหนักแรก จาก Light > Regular ระหว่างขยายแบบงูๆ ปลาๆ ก็ค่อยๆ เจอจุดที่ไม่สมบูรณ์เรื่อยๆ ทำให้ต้องแก้ Light ไปพร้อมกัน... รู้สึกถูกดึงพลังอย่างหนัก ไม่คิดว่าการขยายน้ำหนักจะสาหัส (แผนที่วางไว้คือ จะมี Bold ด้วย คงต้องจิบเก๊กฮวย ไม่ก็หันไปเติมพลังกับตัวอื่นสักพัก)

:30:

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

(http://img3.f0nt.com/29/0029a19564c3263b6eb917224965292d.jpg)

แต่ก็ทำเร็วยังกะจรวด :59:

ด้วยเหตุนี้แหละครับ จึงควรทำน้ำหนักแรกให้นิ่งที่สุดก่อนแล้วจึงขยายน้ำหนักครับ ไม่งั้นตามแก้กันไม่จบไม่สิ้นเลยแหละครับ  :12:

ทำการทดสอบเสมือนจริง ด้วยการจัดหน้า Headline ด้วยน้ำหนัก Light ส่วน Body ใช้ Regular และ Bold แทรกอยู่ด้วยกัน... (รู้สึกยังมี DRvoyage ที่ตั้งใจขยายน้ำหนัก คงต้องจิบน้ำขิงกันละทีนี้)

(http://img3.f0nt.com/29/be65a109ca72e1c62e292b3ce8517037.jpg)

:4605: แจ่มมาก

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

(http://img3.f0nt.com/31/df7d14b758b125d3d127d73cd9cfda0e.jpg)

โอ๋ยยย สุดติ่งเลยครับ   :12: :12:

หลังจากนี้ถ้าจะเก็บเนี้ยบก็คงดูพวกเส้นโค้งหลอกตาล่ะครับ
เช่นคำว่า หนา และหนากว่า ลองสังเดตจะเห็นว่าท้อง น.หนูมันย้วยลงมากว่าปกติ อะไรแบบนี้ ฯลฯ

ยังคงตามไล่แก้เก็บเนี๊ยบอย่างที่แนะนำ ลุกลามไปหลายส่วน แก้เอง งอนตัวเอง ง้อตัวเอง แล้วก็ลงมือทำต่อ

(http://img3.f0nt.com/03/91af2f6d2c926930b6d93f86c58f5143.jpg)

:12:

น่าจะมีปัญหาเรื่องช่องไฟนะครับ


พวกอักษรที่ด้านขวาเป็นเส้นดิ่ง พอเจอกับตัวที่ด้านซ้ายเป็นเส้นดิ่งเหมือนกัน
พอมองแล้วชิดจนน่ากลัวครับ


เช่นตัว ย เจอ ท ตรงคำว่า เจดีย์ที่สร้าง
หรือคำว่า กระนี้หรือ  ตรง น เจอ ห

ลองเทียบกับระยะของตัวที่มีส่วนเว้าส่วนโค้งดูนะครับ
ต้องหลอกตานิดหน่อยจะงามแหล่ม

ขอบคุณในคำชี้แนะนำครับ คุณ Layiji
- ผมควรหลอกตาเพิ่มช่องไฟเฉพาะด้านขวาเส้นดิ่งอย่างเดียว หรือควรทำด้านซ้ายแนวดิ่งด้วยครับ?

ผมไม่รู้วิธีจัดช่องไฟของฟอนต์มาตรฐานพวกนี้นะครับ ว่าเค้ามีสูตรอะไรยังไง

แต่เท่าที่ทำฟอนต์มวยวัดมา ผมใช้วิธีนี้ครับ

(http://img3.f0nt.com/04/c890f20eb29f34e9044d76790ca2d47d.jpg)

:12:


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

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

การจัดช่องไฟสำหรับผมคือการเฉลี่ย *พื้นที่ว่างสีขาว* ระหว่างตัวอักษร เน้นคำว่า *พื้นที่* เพราะมันไม่ใช่แค่การเฉลี่ยระยะห่างเนื่องจากตัวอักษรต่างรูปทรงก็ใช้พื้นที่ว่างต่างกัน อย่าง o กับ v เป็นต้น เราสามารถวางแผนและออกแบบพื้นที่ว่างได้ตั้งแต่ต้น เพราะถ้าไม่วางแผน มันอาจจะโหดร้ายไม่แพ้การวาดตัวอักษรเลยทีเดียว (บางทีใช้เวลานานกว่าการวาดด้วยซ้ำ เพราะตัวอักษรเรียงต่อเป็นคำได้ไม่รู้จบ)

(http://img3.f0nt.com/04/14cd3634c1e7d70ffcf915b886dbc301.png)

วิธีของผมคือ ทำฟอนต์น้ำหนักหนาสุดก่อนแล้วใช้ความกว้างระหว่างขาสองข้างของตัว n หรือ u มาอ้างอิง ในกรณีตัวไทยแบบไม่มีหัวก็ใช้ตัว น (แท่งสี่เหลี่ยมสีฟ้าตรงกลาง น) เพื่อกำหนดระยะห่างระหว่างตัวอักษรที่เส้นแนวตั้งมาประชิดกัน ในรูปตัวอย่างก็คือแท่งสี่เหลี่ยมสีเขียวระหว่าง น กับ ม จะกว้างใกล้เคียงกับระยะห่างขาสองข้างของ น แต่ไม่จำเป็นต้องอิงกับตัว น นะครับ อย่าง DRsmart Heavy อาจอิงความกว้างตัว ข ที่แคบกว่าก็ได้ เพราวางตัวอักษรไว้ค่อนข้างชิดกัน ส่วนน้ำหนักอื่นๆ ก็ว่ากันไปตามสัดส่วนที่เราเห็นเหมาะสม ไอเดียสำคัญคือมีพื้นที่ว่างอ้างอิงเพื่อเฉลี่ยช่องไฟสำหรับตัวอักษรอื่นๆ ให้ดูกลมกลืนกัน

พอดีผมเป็นพวกทำฟอนต์ด้วยตัวเลข ตัวเลขที่มุมซ้ายล่างของรูป ตัว น คือ uni0E19 และ ตัว ม คือ uni0E21 ผมจะกำหนดระยะห่างของ น - ม ที่ 110em (Rbearing ของ น + LBearing ของ ม) คือใกล้เคียงกับระยะขาของ น (120em) แล้วใช้ความกว้างประมาณ 110-120em นี้ไปกำหนดระยะห่างของตัวอักษรอื่นๆ ที่มีรูปทรงใกล้เคียง ในกรณีนี้คือมีเส้นแนวตั้ง เช่น ระยะห่างของสระเอ 2 ตัวที่รวมเป็น สระแอ เป็นต้น

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

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

(http://img3.f0nt.com/04/363e8cfad8d8974d3cd79eb59b894393.png)

แต่ที่ว่ามาไม่ได้หมายความว่าวิธีนี้ใช้ได้กับฟอนต์ทุกแบบนะครับ มันเป็นแค่วิธีทำฟอนต์ sans-serif ของผม คนอื่นก็คงมีวิธีอื่นที่เวิร์คสำหรับเขาในการเฉลี่ยพื้นที่สีขาว ส่วนทางเลือกสุดท้ายคือ Kerning สำหรับคู่ตัวอักษรที่แก้ปัญหาด้วยวิธีอื่นไม่ได้ ส่วนใหญ่จะเป็นตัวละติน อย่าง A-T, L-V, X-O เป็นต้น

:12: โอ้ว สุดยอดครับ

แจ่มจริงๆ กับหลายเทคนิค ขอบคุณทุกความรู้คำแนะหลายๆ นะครับ (จากไม่รู้อะไรเลย)... เรียนรู้ ทดลอง ผสมเทคนิค ลุยต่อ (แต่ขอตั้งสติอีกหน่อย เพราะอึ้งไปสามสี่วิ เหมือนจะต้องไล่แก้ทั้งหมด)

กลับไปเลียแผลใจ หลังจากปรับนั่นนี่ตามคำแนะนำแล้วพังยกเซท เอาใหม่ๆ ผมลองปรับมาให้ดูกันอีกครั้งครับ

(http://img3.f0nt.com/20/14e77aabd5216a49f11be3c41978131f.jpg)

:25:




ช่องไฟ เ แ ยังแน่นไปนิดนึงครับ
เช่นเดียวกับสระบนยังติดหัวตัวอักษร ทำให้ระยะอากาศของทั้งชุดมันไม่ค่อยเท่ากันครับ

สบายตัวขึ้นมั๊ย

(http://img3.f0nt.com/22/31259bdae36ef967bd0268a88ade32b5.jpg)

ลื่นเลยครับ :25:

หนามาอีกนิด ด้วยน้ำหนัก Book... แฮ่กๆ ไม่รู้จะ Bold ต่อไหวมั๊ย

(http://img3.f0nt.com/13/b5370d5f22a1945f5321bf09ec5f0694.jpg)

โอ๊ย สวยอินเตอร์มว้ากกก :07:

เอ๊ะทำไมภาพมันไม่ค่อยคมครับ  :09:

นั่นสิ เดี๋ยวพรุ่งนี้ลองเซฟแล้วแก้ไขใหม่ให้นะครับ

อีกที

(http://img3.f0nt.com/14/2cdf0dbe92284429424502aabcb65100.jpg)

:12: