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

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 ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...

More in:Design

Business

ทำความรู้จัก Design Thinking – สกิลมาแรงที่บริษัทชั้นนำทั่วโลกกำลังมองหา

Design Thinking ไม่ใช่แค่ชื่อวิชาในคลาสเรียนของเด็กออกแบบ แต่เป็นสกิลที่กำลังเป็นที่ต้องการของบริษัทชั้นนำในหลายประเทศทั่วโลก เช่น Apple, Google , Microsoft, Tesla หรือ Startup ไทยอย่าง Bitkub อีกด้วย ...
Business

วิธีสร้าง Pitch แบบโอมากาเสะ – ด้วย Storytelling Framework

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

ทำ Data Visualization ให้เวิร์ก – กับ 9 แหล่งความรู้ที่มือโปรแนะนำ

แนะนำ 9 แหล่งความรู้อัปสกิล ซึ่งสรุปจากไอเดียของ 4 Speakers ผู้เชี่ยวชาญในวงการ Data Visualization ที่ไปพูดคุยใน Skooldio Live ตอน The Power ...
Design

Motion กับการออกแบบ UX ตามหลักจิตวิทยาการออกแบบ และการทำงานในสมองของ User

Table of ContentsWhy Motion?ส่วนแรกคือประโยชน์ที่มีต่อสมองของ Userนอกจากจะทำงานกับสมองแล้ว Motion ยังทำงานกับจิตใจของมนุษย์อีกด้วย Why Motion? ทำไม UX/UI Designer ควรให้ความสำคัญกับการนำ Motion Design ...

Comments are closed.