กำหนดขนาดฟอนต์ที่เหมาะกับเว็บไซต์ง่าย ๆ
![กำหนดขนาดฟอนต์ที่เหมาะกับเว็บไซต์ง่าย ๆ](/_next/image?url=https%3A%2F%2Fsennalabs.s3.ap-southeast-1.amazonaws.com%2Fblogs%2F241-%25C3%25A0%25C2%25B8%25C2%2581%25C3%25A0%25C2%25B8%25C2%25B3%25C3%25A0%25C2%25B8%25C2%25AB%25C3%25A0%25C2%25B8%25C2%2599%25C3%25A0%25C2%25B8%25C2%2594%25C3%25A0%25C2%25B8%25C2%2582%25C3%25A0%25C2%25B8%25C2%2599%25C3%25A0%25C2%25B8%25C2%25B2%25C3%25A0%25C2%25B8%25C2%2594%25C3%25A0%25C2%25B8%25C2%259F%25C3%25A0%25C2%25B8%25C2%25AD%25C3%25A0%25C2%25B8%25C2%2599%25C3%25A0%25C2%25B8%25C2%2595%25C3%25A0%25C2%25B9%25C2%258C%25C3%25A0%25C2%25B8%25C2%2597%25C3%25A0%25C2%25B8%25C2%25B5%25C3%25A0%25C2%25B9%25C2%2588%25C3%25A0%25C2%25B9%25C2%2580%25C3%25A0%25C2%25B8%25C2%25AB%25C3%25A0%25C2%25B8%25C2%25A1%25C3%25A0%25C2%25B8%25C2%25B2%25C3%25A0%25C2%25B8%25C2%25B0%25C3%25A0%25C2%25B8%25C2%2581%25C3%25A0%25C2%25B8%25C2%25B1%25C3%25A0%25C2%25B8%25C2%259A%25C3%25A0%25C2%25B9%25C2%2580%25C3%25A0%25C2%25B8%25C2%25A7%25C3%25A0%25C2%25B9%25C2%2587%25C3%25A0%25C2%25B8%25C2%259A%25C3%25A0%25C2%25B9%25C2%2584%25C3%25A0%25C2%25B8%25C2%258B%25C3%25A0%25C2%25B8%25C2%2595%25C3%25A0%25C2%25B9%25C2%258C%25C3%25A0%25C2%25B8%25C2%2587%25C3%25A0%25C2%25B9%25C2%2588%25C3%25A0%25C2%25B8%25C2%25B2%25C3%25A0%25C2%25B8%25C2%25A2%25C3%25A0%25C2%25B9%25C2%2586-Sennalabs_1725356736230.png&w=3840&q=75)
ฟอนต์ (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 หรือตามงานเลยแล้วแต่ความเหมาะสมและการเลือกใช้
ในการออกแบบจึงควรเลือกทั้งฟอนต์ภาษาไทยและภาษาอังกฤษให้เหมาะกับงานที่ทั้งต้องตอบโจทย์ผู้ใช้และตัวแบรนด์ของลูกค้าเอง ซึ่งก็จะช่วยทำให้งานดูไปในทิศทางที่ต้องการได้ดียิ่งขึ้นเลยทีเดียว อีกทั้งยังมีประโยชน์ในเรื่องของการอ่านเนื้อหาต่าง ๆ อีกด้วย ทำให้ลูกค้าอยู่ในเว็บไซต์และศึกษาแบรนด์ของเรามากยิ่งขึ้น ถือว่าเป็นสิ่งที่สำคัญของการทำเว็บไซต์อีกส่วนหนึ่ง นอกเหนือจากองค์ประกอบอื่น ๆ ที่อยู่ในเว็บไซต์ของเรานั้นเอง เพราะฉะนั้นเลือกใช้ฟอนต์และขนาดให้ดีก็ช่วยให้งานเราดูดี น่าสนใจเพิ่มขึ้นไปอีกนะคะ
อ้างอิง
• ความลงตัวของ Font บนเว็บไซต์ โดย Shinji
• ประเภทของฟอนต์ โดย DIYDesign
• Difference Between Pixel (Px) and Point (Pt) Font Sizes in Email Signatures โดย Gordan Banjac
![Senna Labs](/_next/image?url=%2Fsenalabs.jpg&w=3840&q=75)
![](/_next/image?url=%2Fimages%2Fsubscribe.webp&w=3840&q=75)
Subscribe to follow product news, latest in technology, solutions, and updates
Other articles for you
![UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)](/_next/image?url=https%3A%2F%2Fsennalabs.s3.ap-southeast-1.amazonaws.com%2Fblogs%2F91-UXforPsychology-LossAversion-Sennalabs_1725337566077.png&w=3840&q=75)
![ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์](/_next/image?url=https%3A%2F%2Fsennalabs.s3.ap-southeast-1.amazonaws.com%2Fblogs%2F119-%25C3%25A0%25C2%25B8%25C2%2597%25C3%25A0%25C2%25B8%25C2%25B3%25C3%25A0%25C2%25B9%25C2%2584%25C3%25A0%25C2%25B8%25C2%25A1GoogleFonts%25C3%25A0%25C2%25B8%25C2%2596%25C3%25A0%25C2%25B8%25C2%25B6%25C3%25A0%25C2%25B8%25C2%2587%25C3%25A0%25C2%25B9%25C2%2580%25C3%25A0%25C2%25B8%25C2%259B%25C3%25A0%25C2%25B9%25C2%2587%25C3%25A0%25C2%25B8%25C2%2599%25C3%25A0%25C2%25B8%25C2%2597%25C3%25A0%25C2%25B8%25C2%25B2%25C3%25A0%25C2%25B8%25C2%2587%25C3%25A0%25C2%25B9%25C2%2580%25C3%25A0%25C2%25B8%25C2%25A5%25C3%25A0%25C2%25B8%25C2%25B7%25C3%25A0%25C2%25B8%25C2%25AD%25C3%25A0%25C2%25B8%25C2%2581%25C3%25A0%25C2%25B8%25C2%2597%25C3%25A0%25C2%25B8%25C2%25B5%25C3%25A0%25C2%25B9%25C2%2588%25C3%25A0%25C2%25B8%25C2%2594%25C3%25A0%25C2%25B8%25C2%25B5%25C3%25A0%25C2%25B9%25C2%2583%25C3%25A0%25C2%25B8%25C2%2599%25C3%25A0%25C2%25B8%25C2%2581%25C3%25A0%25C2%25B8%25C2%25B2%25C3%25A0%25C2%25B8%25C2%25A3%25C3%25A0%25C2%25B8%25C2%25AD%25C3%25A0%25C2%25B8%25C2%25AD%25C3%25A0%25C2%25B8%25C2%2581%25C3%25A0%25C2%25B9%25C2%2581%25C3%25A0%25C2%25B8%25C2%259A%25C3%25A0%25C2%25B8%25C2%259A%25C3%25A0%25C2%25B9%25C2%2580%25C3%25A0%25C2%25B8%25C2%25A7%25C3%25A0%25C2%25B9%25C2%2587%25C3%25A0%25C2%25B8%25C2%259A%25C3%25A0%25C2%25B9%25C2%2584%25C3%25A0%25C2%25B8%25C2%258B%25C3%25A0%25C2%25B8%25C2%2595%25C3%25A0%25C2%25B9%25C2%258C-Sennalabs_1725348684991.png&w=3840&q=75)
![How SennaLabs helped S&P Food transform their online e-commerce business](/_next/image?url=https%3A%2F%2Fsennalabs.s3.ap-southeast-1.amazonaws.com%2Fblogs%2F112-HowSennaLabshelpedS%2526PFoodtransformtheironlinee-commercebusiness-Sennalabs_1725348387846.png&w=3840&q=75)
Let’s build digital products that are simply awesome !
We will get back to you within 24 hours!Go to contact us![](/_next/image?url=%2Fimages%2Ftell-us-arrow.webp&w=384&q=75)
![Contact ball](/_next/image?url=%2Fimages%2Fcontact-ball.webp&w=3840&q=75)
![Contact us bg 2](/_next/image?url=%2Fimages%2Fcontact-us-bg-2.webp&w=3840&q=75)
![Contact us bg 4](/_next/image?url=%2Fimages%2Fcontact-us-bg-4.webp&w=3840&q=75)
![Contact us bg 1](/_next/image?url=%2Fimages%2Fcontact-us-bg-1.webp&w=3840&q=75)
![Ball left](/_next/image?url=%2Fimages%2Fball-left.png&w=1080&q=75)
![Ball right](/_next/image?url=%2Fimages%2Fball-right.png&w=1920&q=75)
![Ball left](/_next/image?url=%2Fimages%2Fball-left.png&w=256&q=75)
![Ball right](/_next/image?url=%2Fimages%2Fball-right.png&w=384&q=75)
![Sennalabs gray logo](/_next/image?url=%2Fimages%2Fsennalabs-gray-logo.webp&w=256&q=75)