By 
หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง
1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน
หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร มีตัวตนแบบไหน มีความเคร่งขรึมจริงจัง หรือร่าเริงสนุกสนาน
ข้อสังเกตสำคัญคือในส่วนของ Header ที่เราสามารถใช้ขนาดฟอนต์ที่ใหญ่กว่า เปิดให้เราใช้ฟอนต์ที่เน้นเรื่องของสไตล์และสื่อสารอารมณ์ได้มากกว่าเช่นกัน ในขณะที่ส่วนของ Body อาจจะต้องลดทอนสไตล์ลงเพื่อเน้นความอ่านง่ายสบายตามากขึ้น เพราะส่วนนี้จะมีขนาดฟอนต์ที่เล็ก และมีเนื้อหาที่ต้องอ่านมากกว่า
ถึงแม้เว็บไซต์เราควรมีบุคลิกที่ชัดเจน แต่ในส่วนของ Header และ Body ก็ยังเปิดให้ลองจับคู่ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน แต่ก็ยังให้อารมณ์ความรู้สึกไปในทิศทางเดียวกันได้ อาจจะฟังเป็นเรื่องพูดง่ายแต่ทำยาก ช่วงท้ายๆ เรามี Tips การจับคู่ฟอนต์มาฝากกันด้วยนะ
2. จับคู่กลุ่มฟอนต์ที่ Contrast กัน..แต่อย่ามากเกินไป
การจับคู่ฟอนต์ควรให้ความรู้สึกโดดเด่น สังเกตได้ง่าย ถ้าใช้ฟอนต์ที่เหมือนกันเกินไปจนคนไม่สังเกตเห็นความแตกต่างเลย..อาจจะไม่เลือกมาทางจับคู่ฟอนต์ แต่จะทำยังไงให้ความแตกต่างของฟอนต์อยู่กันได้อย่างลงตัว
ตัวอย่างในรูปบนที่ใช้ฟอนต์ Great Vibes จับคู่กับ Merriweather เราเห็นความ Contrast ก็จริง แต่อาจจะรู้สึกไม่สบายตาเท่าไหร่
ลองการจับคู่ที่ปลอดภัยมากขึ้นอย่างรูปด้านล่าง ตัว Header ใช้ฟอนต์ Vollkorn ในขณะที่ส่วน Body ใช้ฟอนต์ที่เรียบง่ายขึ้นอย่าง Open Sans จะเห็นถึงความ Contrast แต่ก็ส่งเสริมกันและกัน
3. พยายามอย่าใช้ฟอนต์เกิน 3 กลุ่มฟอนต์ในเว็บเดียวกัน
ในการออกแบบส่วนใหญ่ เรามักจะใช้ฟอนต์แบบหนึ่งสำหรับส่วนที่เป็น Headline และอีกแบบหนึ่งสำหรับส่วน Body แต่อาจจะมีบางส่วนของเว็บที่เราอยากใช้ฟอนต์เพิ่มขึ้นเพื่อตกแต่งเว็บให้มีลูกเล่นมากกว่าเดิม แต่คำแนะนำคือคุณไม่ควรให้ทั้งเว็บมีเกิน 3 กลุ่มฟอนต์
อีกตัวเลือกหนึ่ง นักออกแบบส่วนใหญ่ที่อยากมีตัวเลือกฟอนต์ให้เลือกใช้ได้อย่างหลากหลายในเว็บเดียวเลือกที่จะใช้ฟอนต์จากตระกูลเดียวกัน อย่างเช่นตัวอย่างของตระกูล Roboto ที่มีรูปแบบให้เลือกใช้ได้อย่างหลากหลายโดยที่ยังคุมโทนด้วยความเป็นฟอนต์ตระกูลเดียวกัน
4.จัดลำดับความสำคัญของเนื้อหา ตามการจับคู่ฟอนต์
ใช้ขนาดบอกความสำคัญของเนื้อหา แน่นอนว่าส่วนที่มีขนาดฟอนต์ใหญ่กว่า ย่อมหมายถึงความสำคัญของเนื้อหาที่มากกว่า หรือเน้นในส่วนที่เราอยากให้เป็น Call to action แต่ต้องระวังการเน้นว่าทุกอย่างในเว็บสำคัญไปหมด ด้วยการใส่ขนาดฟอนต์ที่ใหญ่เต็มไปหมดทุกจุด..คนอาจจะคิดว่ากำลังโดนเว็บของเราตะโกนใส่ตลอดเวลา
การเน้นน้ำหนักหนา/บางของฟอนต์ ก็ช่วยให้สามารถเน้นคำที่สำคัญได้ด้วยเช่นกัน ไปจนถึงการใช้สีที่มีความอ่อนและเข้มแตกต่างกัน เช่นการใช้สีที่เข้มกว่าเพื่อชี้นำสายตาให้คนอ่านในส่วนที่เราอยากให้อ่านก่อน ทั้งนี้ก็ต้องระวังอย่าให้การใช้สีจมไปกับพื้นหลัง
สำหรับใครที่อยากออกแบบเว็บไซต์ที่ปรับแต่งได้สวยงามอย่างอิสระ โดยที่ “ไม่ต้องเขียนโค้ดสักบรรทัด” ขอแนะนำคอร์ส Webflow for Designers เรียนรู้การใช้ Webflow เครื่องมือสร้างเว็บแบบ no-code ที่มาแรงสุดๆ ในกลุ่มนักออกแบบ นักการตลาด และธุรกิจที่ต้องการความคล่องตัว
อัดแน่นเนื้อหา + ลงมือทำผ่านโปรเจกต์รวมกว่า 10 ชั่วโมง สอนตั้งแต่พื้นฐานหน้าเว็บเปล่าๆ จนสามารถสร้างเว็บไซต์ที่มีลูกเล่น Interactions และ Animations สวยๆ ให้คุณพร้อมต่อยอดสู่การเป็นนักออกเว็บมืออาชีพ อ่านข้อมูลเกี่ยวกับคอร์สเพิ่มเติมได้ที่นี่
