ราชบัณฑิตยสถานแบ่งรูปแบบตัวพิมพ์ เป็น 3 แบบ คือ ตัวแบบหลัก , ตัวแบบเลือก และ ตัวแบบแปร (มาตรฐานโครงสร้างตัวอักษรไทย ฉบับราชบัณฑิตยสถาน.2540: 1-3)
1.1 ตัวแบบหลัก
เป็นตัวพิมพ์ที่มีหัวกลม ความหนักเบาของเส้นเสมอกันหมด นอกจากส่วนที่เป็นเส้นโค้ง เส้นหัก รวมทั้งส่วนต้นหรือปลายของตัวอักษรและเครื่องหมายต่าง ๆ บางตัว ขนาดของเส้นอาจหนาหรือบางกว่าได้บ้าง ซึ่งถือว่าเป็นรูปแบบที่ถูกต้องสมบูรณ์ตามหลักเกณฑ์ที่กำหนดไว้ ตัวพิมพ์แบบ เจเอสประสพลาภ JS Prasoplarpas มีลักษณะใกล้เคียงกับตัวแบบหลักมากที่
1.2 ตัวแบบเลือก
เป็นรูปแบบที่ต่างจากตัวแบบหลักเล็กน้อย เช่น มีเส้นกิ่ง เส้นลำตัวอาจมีหนักเบาแตกต่างกัน เป็นแบบที่ใช้กันทั่วไปและถือว่าเป็นแบบที่ถูกต้องเช่นเดียวกัน สิ่งพิมพ์ที่เป็นเอกสารและตำรา ส่วนมากนิยมใช้ ตัวแบบเลือก เพราะอ่านได้ลื่นไหลดี เช่นตัวแบบ โบรวาลเลียยูพีซี : BrowalliaUPC หรือ ตัวแบบ อังศนายูพีซี : AngsanaUPC เป็นต้น
1.3 ตัวแบบแปร
เป็นรูปแบบที่ใช้กันอยู่แต่ไม่อาจจัดเข้าหลักเกณฑ์นี้ได้เช่น ตัวที่มีหัวบอดหรือตัน หัวแฝงเร้น ตัวแบบคัดลายมือ เขียนลายมือ และตัวประดิษฐ์อื่นๆ ตัวแบบแปรเหมาะสำหรับใช้ทำเป็นหัวเรื่องและชื่อเรื่อง เพราะมีการออกแบบให้น่าสนใจ
ฟอนต์ (Font) หรือรูปแบบตัวอักษร มีอยู่มากมาย และหลายประเภท หากลองเข้าไปดูแต่ละเว็บไซต์ เราจะเห็นความต่างอย่างชัดเจน โดยเฉพาะเว็บต่างประเทศที่มีการใช้ภาษาอังกฤษเป็นหลัก บ้างก็มีการใช้มากกว่าหนึ่งฟอนต์ บ้างก็ใช้แค่ฟอนต์เดียว แต่หลายขนาด เป็นต้น ก่อนจะเข้าสู่เรื่องของขนาดฟอนต์นั้น เรามาทำความเข้าใจข้อควรรู้เกี่ยวกับฟอนต์เบื้องต้นกันก่อน ซึ่งจะแบ่งเป็น 4 ส่วนใหญ่ ๆ ดังนี้
หมายเหตุ แม้ความหมายของ ฟอนต์ (font) กับ ไทป์เฟส (Typeface) จะต่างกัน แต่ในการใช้งานทั่วไป มักจะเรียกรวม ๆ ว่าฟอนต์ เพื่อความเข้าใจ และไม่สร้างความสับสน (อ่านข้อมูลเพิ่มเติม)
1. รูปแบบหรือประเภทของฟอนต์ (Font Categories)
รูปแบบของฟอนต์ เป็นเรื่องสำคัญอย่างยิ่งในการเลือกใช้ฟอนต์ในเว็บไซต์ เนื่องจากฟอนต์นั้นเป็นสิ่งที่จะสื่อให้เห็นถึงภาพลักษณ์ที่ต้องการจะสะท้อนให้ผู้ใช้เข้ามาเห็นและรู้สึกถึงความเป็นแบรนด์นั้น ๆ เรื่องฟอนต์จึงเป็นสิ่งที่สำคัญไม่แพ้กัน เราจึงควรรู้จักประเภทของตัวฟอนต์กันก่อน เพื่อที่จะเลือกใช้ฟอนต์ให้เหมาะสมกับแบรนด์ ซึ่งจะแบ่งได้เป็น 2 ประเภทใหญ่ ๆ ได้แก่
1.1 Serif
Serif หรือที่นิยมเรียกกันว่า ฟอนต์มีหัว/เชิง ซึ่งฟอนต์ลักษณะนี้จะเป็นฟอนต์ที่มีขีดเล็ก ๆ ที่ปลายแต่ละด้านของตัวอักษร มีรูปแบบที่ค่อนข้างทางการ ง่ายต่อการอ่าน ให้ความรู้สึกที่มีความเป็นทางการ เรียบหรู น่าเชื่อถือ และความคลาสสิก
ตัวอย่างฟอนต์ใน Google Fonts
1.2 Sans Serif
Sans Serif หรือที่นิยมเรียกกันว่า ฟอนต์ไม่มีหัว/เชิง ฟอนต์ลักษณะนี้จะเป็นฟอนต์ที่ไม่มีขีดเล็กๆ ที่ปลายของตัวอักษร ซึ่งเป็นการตัดท่อนตัวอักษรให้มีความเรียบง่าย ไม่เป็นทางการ ดูทันสมัย และชัดเจน จึงนิยมใช้บนงานสื่อออนไลน์ต่าง ๆ ตัวอย่างฟอนต์ที่คนนิยมใช้กันก็จะมี
ตัวอย่างฟอนต์ใน Google Fonts
2. น้ำหนักของฟอนต์ (Typeface)
ฟอนต์ที่เป็นรูปแบบตัวอักษรเดียวกัน แต่มีค่าน้ำหนักของฟอนต์ที่ไม่เท่ากัน จะทำให้ตัวอักษรมีความแตกต่างกัน ทั้งทางด้านรูปแบบไม่ว่าจะเป็น ขนาด ความหนา ความกว้าง และความเอียง ซึ่งโดยส่วนใหญ่เราจะเห็นหลัก ๆ ด้วยกัน 5 น้ำหนัก ได้แก่ บางมาก (Thin) บาง (Light) ปกติ (Regular) หนา (Bold) และ หนามาก (Black) ซึ่งค่าน้ำหนักของฟอนต์บางชุดก็สามารถทำให้ฟอนต์ดูเปลี่ยนไปแบบคนละฟอนต์เลยละ เพราะฉะนั้นเลือกใช้ค่าน้ำหนักที่พอดีและเหมาะสมกับแต่ละส่วนงาน
ฟอนต์ Sarabun มีน้ำหนักมากถึง 8 น้ำหนัก
3. ขนาดของฟอนต์ (Sizing)
เข้าสู่เรื่องของขนาดฟอนต์กัน สำหรับเว็บไซต์ เราจะใช้หน่วย px (Pixel) ซึ่งเป็นหน่วยวัดบอกความสูงของฟอนต์ที่เราเห็นในหน้าจอ LCD ทุกรูปแบบ เช่น ฟอนต์ขนาด 12 px หมายถึง ฟอนต์นี้มีความสูง 12 พิกเซลจากฐาน เป็นต้น
โดยขนาดฟอนต์แนะนำสำหรับเว็บคือ “16 px” ซึ่งเป็นขนาดเริ่มต้นมาตรฐาน เหมาะทั้งบนหน้าจอแบบ Desktop Tablet และ Mobile โดยขนาดฟอนต์ที่ใช้ก็จะสร้างเป็น Design System ชุดเดียวกัน และนำไปเลือกใช้ขนาดให้เหมาะสมกับแต่ละส่วน แต่ควรอยู่ที่ 4-6 ขนาด แต่ทั้งนี้ก็ขึ้นอยู่กับงาน และความเหมาะสม โดยจะแนะนำขนาดที่ใช้ มีดังนี้
4. ระยะห่างบรรทัด (Line-height / Line-spacing)
นอกเหนือจากตัวขนาดของฟอนต์เองสิ่งควรต้องให้ความสำคัญอีกอย่างคือ Line-height หรือะยะห่างของบรรทัด ควรจะมีการเว้นให้พอดีเพราะจะช่วยให้การอ่านเนื้อหาบนเว็บไซต์หรือแอปพลิเคชัน ถ้ามีการเว้นห่างกันเกินไปก็จะดูไม่เป็นเรื่องเดียวกัน หรือเว้นระยะน้อยเกินไปก็จะอ่านยาก ดูหนาแน่นจนเกินไป โดยเฉพาะอย่างยิ่งกับภาษาไทยที่มีทั้งสระและวรรณยุกต์จึงต้องระมัดระวัง ดูเรื่องของระยะห่างบรรทัดให้พอสมควรไม่ห่างและไม่ชิดกันจนเกินไป
ซึ่งการจะคิด Line-height ของฟอนต์ก็ไม่ใช่เรื่องยาก โดยส่วนใหญ่แล้ววิธีการคำนวณจะนำขนาดของฟอนต์ที่เราใช้ คูณกับ 1.5 ตัวอย่างเช่น ขนาดของฟอนต์อยู่ที่ 16 px ก็คือจะนำ 16 * 1.5 = 24 ซึ่งค่าที่ได้ก็คือจะเป็น line-height ที่เหมาะสม แต่ถ้าค่าที่ได้มาเป็นเลขคี่หรือเป็นเศษทศนิยมก็อย่าลืมปัดให้เป็นเลขคู่ เลขกลมๆ ไม่เอาเศษทศนิยม เพื่อความเรียบร้อย และจดจำได้ง่าย ซึ่งการคิด line-height ตัวเลขที่นำไปคูณก็จะต้องขึ้นอยู่กับรูปแบบฟอนต์แต่ละชุดด้วย ไม่ใช่ว่าจะสามารถคูณกับ 1.5 แล้วจะดีเสมอไป เราจึงต้องคอยดูและสังเกตชุดฟอนต์ที่เราใช้คูณได้ตั้งแต่ 1.2 - 1.5 หรือตามงานเลยแล้วแต่ความเหมาะสมและการเลือกใช้
ในการออกแบบจึงควรเลือกทั้งฟอนต์ภาษาไทยและภาษาอังกฤษให้เหมาะกับงานที่ทั้งต้องตอบโจทย์ผู้ใช้และตัวแบรนด์ของลูกค้าเอง ซึ่งก็จะช่วยทำให้งานดูไปในทิศทางที่ต้องการได้ดียิ่งขึ้นเลยทีเดียว อีกทั้งยังมีประโยชน์ในเรื่องของการอ่านเนื้อหาต่าง ๆ อีกด้วย ทำให้ลูกค้าอยู่ในเว็บไซต์และศึกษาแบรนด์ของเรามากยิ่งขึ้น ถือว่าเป็นสิ่งที่สำคัญของการทำเว็บไซต์อีกส่วนหนึ่ง นอกเหนือจากองค์ประกอบอื่น ๆ ที่อยู่ในเว็บไซต์ของเรานั้นเอง เพราะฉะนั้นเลือกใช้ฟอนต์และขนาดให้ดีก็ช่วยให้งานเราดูดี น่าสนใจเพิ่มขึ้นไปอีกนะคะ