Web Design Font Pairing
Design

เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

Web Design Font Pairing

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

font pairing for web designer

1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน

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

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

ถึงแม้เว็บไซต์เราควรมีบุคลิกที่ชัดเจน แต่ในส่วนของ Header และ Body ก็ยังเปิดให้ลองจับคู่ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน แต่ก็ยังให้อารมณ์ความรู้สึกไปในทิศทางเดียวกันได้ อาจจะฟังเป็นเรื่องพูดง่ายแต่ทำยาก ช่วงท้ายๆ เรามี Tips การจับคู่ฟอนต์มาฝากกันด้วยนะ

fonts contrast

2. จับคู่กลุ่มฟอนต์ที่ Contrast กัน..แต่อย่ามากเกินไป

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

ตัวอย่างในรูปบนที่ใช้ฟอนต์ Great Vibes จับคู่กับ Merriweather เราเห็นความ Contrast ก็จริง แต่อาจจะรู้สึกไม่สบายตาเท่าไหร่

ลองการจับคู่ที่ปลอดภัยมากขึ้นอย่างรูปด้านล่าง ตัว Header ใช้ฟอนต์ Vollkorn ในขณะที่ส่วน Body ใช้ฟอนต์ที่เรียบง่ายขึ้นอย่าง Open Sans จะเห็นถึงความ Contrast แต่ก็ส่งเสริมกันและกัน

font paring for web design

3. พยายามอย่าใช้ฟอนต์เกิน 3 กลุ่มฟอนต์ในเว็บเดียวกัน

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

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

font prioritize

4.จัดลำดับความสำคัญของเนื้อหา ตามการจับคู่ฟอนต์

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

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

Webflows for Designers

สำหรับใครที่อยากออกแบบเว็บไซต์ที่ปรับแต่งได้สวยงามอย่างอิสระ โดยที่ “ไม่ต้องเขียนโค้ดสักบรรทัด” ขอแนะนำคอร์ส Webflow for Designers เรียนรู้การใช้ Webflow เครื่องมือสร้างเว็บแบบ no-code ที่มาแรงสุดๆ ในกลุ่มนักออกแบบ นักการตลาด และธุรกิจที่ต้องการความคล่องตัว

อัดแน่นเนื้อหา + ลงมือทำผ่านโปรเจกต์รวมกว่า 10 ชั่วโมง สอนตั้งแต่พื้นฐานหน้าเว็บเปล่าๆ จนสามารถสร้างเว็บไซต์ที่มีลูกเล่น Interactions และ Animations สวยๆ ให้คุณพร้อมต่อยอดสู่การเป็นนักออกเว็บมืออาชีพ อ่านข้อมูลเกี่ยวกับคอร์สเพิ่มเติมได้ที่นี่

Source : https://webflow.com/blog/font-pairing

You may also like

Business

ทำความรู้จัก Voxel Art งานกราฟิก 3D ยอดฮิตที่สร้างได้ตั้งแต่ Item, Character ยันเมือง

หลายๆ คนอาจจะคุ้นหน้าคุ้นตากับงานภาพสไตล์ Pixel Art หรืองานภาพ Computer Graphic แบบ 8bit ที่ทำให้เรานึกถึงอดีตกันมาบ้างแล้ว (ถ้าใครนึกไม่ออกก็ลองคิดถึงภาพ Arcade Game อย่าง Pac-Man ...
Design

รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง!

ในยุคที่คนทำงานออกแบบ UX/UI เกือบทุกคนหันมาใช้เครื่องมือมาแรงแห่งยุคอย่าง Figma กันอย่างจริงจัง เนื่องจากหน้าโปรแกรมที่เข้าใจง่าย ส่งต่องานกับทีมได้อย่างไม่มีสะดุด ใช้งานแบบฟรีก็ทำได้ แถมมาพร้อมลูกเล่นมากมายที่ช่วยให้งานออกแบบในยุคนี้ทำได้ง่ายกว่าเมื่อก่อน มี Community ที่เปิดให้ทุกคนมาแชร์ widgets หรือ plugins ...

More in:Design

Design

Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดในวงการ Design!

Figma คืออะไร ??? ทำไมจึงเป็นเครื่องมือออกแบบอันดับ 1 ที่ UXUI Designer ทั่วโลกเลือกใช้  Figma คือเครื่องมือออกแบบที่ขึ้นแท่นอันดับ 1 ในปี 2022 โดยสามารถใช้ออกแบบได้ตั้งแต่เว็บไซต์, ...
UX Writing คืออะไร Design

ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
ui-design-Cover Design

ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...
psychology ux ui blog cover Design

หลักจิตวิทยากับการช่วยออกแบบ UX UI ให้ชีวิต User ง่ายขึ้น

ใครที่กำลังทำงานหรือศึกษาเรื่อง UX UI น่าจะเคยผ่านตาเรื่องของหลักจิตวิทยาการออกแบบที่นำมาใช้กับ UX UI กันบ้างแล้ว แต่เอาเข้าจริงแล้วในฐานะคนที่เป็นหรืออยากเป็น UX/UI Designer ควรมีความรู้พื้นฐานด้านจิตวิทยามากน้อยแค่ไหน โดยหลักการแล้วหลักจิตวิทยาจะช่วยให้ User ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...

Comments are closed.