DESIGN | 1 min read

กำหนดขนาดฟอนต์ที่เหมาะกับเว็บไซต์ง่าย ๆ

By Pae Praewpailin on 02 Jun 2021
sennalabs-blog-banner

ฟอนต์ (Font) หรือรูปแบบตัวอักษร มีอยู่มากมาย และหลายประเภท หากลองเข้าไปดูแต่ละเว็บไซต์ เราจะเห็นความต่างอย่างชัดเจน โดยเฉพาะเว็บต่างประเทศที่มีการใช้ภาษาอังกฤษเป็นหลัก บ้างก็มีการใช้มากกว่าหนึ่งฟอนต์ บ้างก็ใช้แค่ฟอนต์เดียว แต่หลายขนาด เป็นต้น ก่อนจะเข้าสู่เรื่องของขนาดฟอนต์นั้น เรามาทำความเข้าใจข้อควรรู้เกี่ยวกับฟอนต์เบื้องต้นกันก่อน ซึ่งจะแบ่งเป็นส่วนใหญ่ ๆ ดังนี้

หมายเหตุ แม้ความหมายของ ฟอนต์ (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 หรือตามงานเลยแล้วแต่ความเหมาะสมและการเลือกใช้

ในการออกแบบจึงควรเลือกทั้งฟอนต์ภาษาไทยและภาษาอังกฤษให้เหมาะกับงานที่ทั้งต้องตอบโจทย์ผู้ใช้และตัวแบรนด์ของลูกค้าเอง ซึ่งก็จะช่วยทำให้งานดูไปในทิศทางที่ต้องการได้ดียิ่งขึ้นเลยทีเดียว อีกทั้งยังมีประโยชน์ในเรื่องของการอ่านเนื้อหาต่าง ๆ อีกด้วย ทำให้ลูกค้าอยู่ในเว็บไซต์และศึกษาแบรนด์ของเรามากยิ่งขึ้น ถือว่าเป็นสิ่งที่สำคัญของการทำเว็บไซต์อีกส่วนหนึ่ง นอกเหนือจากองค์ประกอบอื่น ๆ ที่อยู่ในเว็บไซต์ของเรานั้นเอง เพราะฉะนั้นเลือกใช้ฟอนต์และขนาดให้ดีก็ช่วยให้งานเราดูดี น่าสนใจเพิ่มขึ้นไปอีกนะคะ

 

อ้างอิง

ความลงตัวของ Font บนเว็บไซต์ โดย Shinji
ประเภทของฟอนต์ โดย DIYDesign
Difference Between Pixel (Px) and Point (Pt) Font Sizes in Email Signatures โดย Gordan Banjac

Written By
Faculty of Information and Communication Technology, Silpakorn University
Faculty of Information and Communication Technology, Silpakorn University