“ Font และการออกแบบ”

📌วิธีการใช้ Font สำหรับงานออกแบบ ให้เหมาะสม ดูดี และสวยงาม มีวิธีการอย่างไรบ้างมาดูกันนนน

🔍สำหรับผู้ที่ไม่มีเวลาอ่าน

🔰 Font คือ ❓

รูปแบบตัวอักษรมีที่ใช้สำหรับการออกแบบ ซึ่งจะมีความแตกต่างกันทั้งทางด้านรูปแบบ ขนาด ความหนา และความกว้าง

🔰 Font มีหลากหลายประเภท ได้แก่

• Serif Typeface
• Sans serifs Typeface
• Handwritten Typeface
• Display Typeface
• Monospace Typeface

🔰 หลักการใช้ Font ให้เหมาะสมกับงานออกแบบ (Typography Basics)

• Set the Mood ในการจะเลือกใช้งานแต่ละ Font ควรดูก่อนว่างานหรือรูปของเราเป็นแบบไหน และควรใช้ Font ในลักษณะใด
• Visual Hierarchy ข้อความที่เราต้องการให้เห็นเป็นลำดับแรกต้องขนาดใหญ่ หนา และเด่นกว่าข้อความรอง
• Choose a Good Secondary Font การเลือกจับคู่ Font ควรเลือกจับคู่ Font ที่เด่นน้อยกว่า Font หลัก และควรจับคู่ Font ที่มีสไตล์ใกล้เคียงกัน
• Orphans Widows คำท้ายของข้อความควรอยู่บรรทัดเดียว
• Alignment ในการออกแบบ โดยส่วนใหญ่มักจะจัดวางไว้กึ่งกลาง จะทำให้ดูเป็นทางการมากขึ้น
• Grid System การกำหนดกำหนดระยะ ในการออกแบบ จะเป็นการจัดวางองค์ประกอบ รูปภาพ เนื้อหา ช่องว่าง และส่วนประกอบต่างๆ ให้มีความเป็นระเบียบ
• Fonts Aren’t Stretchy ไม่ควรยืด Font เพราะ Font ถูกออกแบบมาให้มีสัดส่วนและขนาดที่เหมาะสมกับการใช้งานแล้ว
• Group by Using Rules เป็นการจัดกลุ่มข้อความ หรืออาจจะเป็นการจัดกลุ่มแต่ละหัวข้อ เพื่อความเป็นระเบียบและง่ายต่อการอ่าน
• Avoid the Corners ไม่ควรวางข้อความตามขอบหรือมุมของหน้า
• Skip a Weight ควรเลือกใช้ Font ที่มีน้ำหนักต่างกัน

🙏🙏สวัสดีค่าา วันนี้จะมาพูดในหัวข้อ Font และการออกแบบ ที่จะช่วยให้การออกแบบของเราเหมาะสม ดูดี และสวยงาม จะมีหลักการยังไงนั้น มาเริ่มเรียนรู้กันเลยยยย 😁

บทความนี้เหมาะกับใคร

• ผู้ที่กำลังศึกษาทางด้านการออกแบบ Graphic
• บุคคลทั่วไปที่ว่าง หรือผู้ที่หลงเข้ามาอ่านบล็อกนี้ 😂

Font คืออะไร ❓

รูปแบบตัวอักษรมีที่ใช้สำหรับการออกแบบ หรือการนำเสนอ โดยแต่ละ Font จะมีความแตกต่างกันทั้งทางด้านรูปแบบ ขนาด ความหนา และความกว้าง โดยการเลือกใช้งาน Font นั้นขึ้นอยู่กับความเหมาะสมของแต่ละประเภทงาน

Font มีหลากหลายประเภท ดังต่อไปนี้

1️⃣ Serif Typeface

เป็น Font แบบที่มีขีดเล็กๆ ที่ปลายตัวอักษร เรียกอีกชื่อว่า Font แบบโรมัน เป็น Font แบบดั้งเดิม เหมาะสำหรับการพิมพ์เนื้อความ เพราะเชิงที่ปลายอักษรทำให้ง่ายต่อการอ่าน หรืองานดีไซน์ที่ให้ความรู้สึก Classic

2️⃣ Sans serifs Typeface

มีลักษณะเป็น Font เรียบๆ เกลี้ยงๆ ไม่มีเชิงหรือขีดที่ปลายตัวอักษร เป็น Font ที่ดูทันสมัย จึงเหมาะกับการใช้งานบนหน้าเว็บหรืองานดิจิตอล หรืองานดีไซน์ที่ให้ความรู้สึก Modern

3️⃣ Handwritten Typeface

เป็น Font ที่ดูไม่เป็นทางการ เพราะดูเหมือนเป็นการเขียนมากกว่าการพิมพ์ เหมาะใช้กับงานที่เน้นความรู้สึกสบายๆเป็นกันเอง

4️⃣ Display Typeface

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

5️⃣ Monospace Typeface

การกำหนดให้อักษรแต่ละตัวมีช่องไฟเท่ากันหมดไม่ว่าจะเป็น i หรือ m

[embed]การเลือก Font แต่ละชนิดให้เข้ากับงาน ผู้ที่ทำงาน Graphic Design จะทราบว่าในการสร้างงานขึ้นมาแต่ละชิ้นนั้น สิ่งที่สำคัญไม่น้อยไปกว่าภาพและสีของกราฟิก…www.motiongraphicplus.com

[embed]Meaning of monospaced fonts | Bangkok Post: Learning English channel — เรียนภาษาอังกฤษจากคำศัพท์… Know the meanings of monospaced fonts with Bangkok Post Learning English channel เรียนภาษาอังกฤษจากคำศัพท์…www.bangkokpost.com

Font size คืออะไร ❓

ขนาดของ Font ที่ใช้สำหรับการออกแบบ โดย Font size จะมีหลากหลายขนาดตัวอย่างดังภาพ

https://www.computerhope.com/jargon/f/font-size.htm

😗หลักการใช้ Font ให้เหมาะสมกับงานออกแบบ (Typography Basics)

1️⃣ Set the Mood

ในการจะเลือกใช้งานแต่ละ Font ควรดูก่อนว่างานของเราเป็นแบบไหน ควรใช้ Font ในลักษณะใด

โดย ถ้าอยากให้งานออกมา Classic สามารถใช้ Font Serif ถ้าหากอยากให้งานดูเรียบหรู เรียบง่าย ควรใช้ Font Sans serifs หรือถ้าหากอยากให้งานดูเป็นเป็นศิลปะ ให้ใช้ Font Display และ Handwritten

2️⃣ Visual Hierarchy

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

3️⃣ Choose a Good Secondary Font

การเลือกจับคู่ Font ควรเลือกจับคู่ Font ที่เด่นน้อยกว่า Font หลัก และควรจับคู่ Font ที่มีสไตล์ใกล้เคียงกัน ดังรูป

4️⃣ Orphans Widows

หากงานออกแบบมีเนื้อหาหรือข้อความ ให้สังเกตดูว่าข้อความดังกล่าวนั้น มีคำท้ายของข้อความนั้นอยู่คำเดียวเดี่ยวๆหรือไม่ ถ้าข้อความดังกล่าวอยู่คำเดียวเดี่ยวๆ ควรพยายามให้จัดอยู่ในบรรทัดเดียวกัน

5️⃣ Alignment

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

6️⃣ Grid System

เป็นเส้นที่ถูกจัดวางเป็นตารางเพื่อกำหนดระยะ ในการออกแบบ และการจัดวางองค์ประกอบ รูปภาพ เนื้อหา ช่องว่าง และส่วนประกอบต่างๆ เพื่อให้งานออกแบบมีความเป็นระเบียบ และสวยงาม

*“ หากสนใจบทความเรื่อง [Grid System on Web and Mobile for UX/UI Designer](https://blog.nextzy.me/grid-system-on-web-and-mobile-for-ux-ui-designer-8735e24fbd8d) *สามารถศึกษาเพิ่มเติมได้ที่ลิงค์ด้านล่าง 👇👇😁😁 ”**

[embed]Grid System on Web and Mobile for UX/UI Designer 👩🏻‍💻 เคยสงสัยมั้ยว่า Grid คืออะไร แล้ว Grid System คืออะไร วันนี้เราจะมาพูดถึง Grid System ที่ใช้ในงาน UX/UI กัน!blog.nextzy.me

7️⃣ Fonts Aren’t Stretchy

การออกแบบที่ดี ไม่ควรยืด Font เพราะ Font ถูกออกแบบมาให้มีสัดส่วนและขนาดที่เหมาะสมกับการใช้งานแล้ว

8️⃣ Group by Using Rules

เป็นการจัดกลุ่มข้อความ หรืออาจจะเป็นการจัดกลุ่มแต่ละหัวข้อ เพื่อความเป็นระเบียบและง่ายต่อการอ่าน ตัวอย่างดังรูป

9️⃣ Avoid the Corners

ไม่ควรวางข้อความตามขอบหรือมุมของหน้า เพราะจะทำให้งานออกแบบไม่น่าสนใจและทำให้คนดูรู้สึกอึดอัด

🔟 Skip a Weight

น้ำหนักของ Font มีผลต่อการออกแบบ หากเราต้องการให้งานของเรานั้น ดึงดูดความสนใจของผู้ที่พบเห็น เราควรเลือกใช้ Font ที่มีน้ำหนักต่างกัน เช่น Bold - Light ดังตัวอย่าง

สรุป

🔰 Font คือ ❓

รูปแบบตัวอักษรมีที่ใช้สำหรับการออกแบบ ซึ่งจะมีความแตกต่างกันทั้งทางด้านรูปแบบ ขนาด ความหนา และความกว้าง

🔰 Font มีหลากหลายประเภท ได้แก่

• Serif Typeface
• Sans serifs Typeface
• Handwritten Typeface
• Display Typeface
• Monospace Typeface

🔰 หลักการใช้ Font ให้เหมาะสมกับงานออกแบบ (Typography Basics)

• Set the Mood ในการจะเลือกใช้งานแต่ละ Font ควรดูก่อนว่างานหรือรูปของเราเป็นแบบไหน และควรใช้ Font ในลักษณะใด
• Visual Hierarchy ข้อความที่เราต้องการให้เห็นเป็นลำดับแรกต้องขนาดใหญ่ หนา และเด่นกว่าข้อความรอง
• Choose a Good Secondary Font การเลือกจับคู่ Font ควรเลือกจับคู่ Font ที่เด่นน้อยกว่า Font หลัก และควรจับคู่ Font ที่มีสไตล์ใกล้เคียงกัน
• Orphans Widows คำท้ายของข้อความควรอยู่บรรทัดเดียว
• Alignment ในการออกแบบ โดยส่วนใหญ่มักจะจัดวางไว้กึ่งกลาง จะทำให้ดูเป็นทางการมากขึ้น
• Grid System การกำหนดกำหนดระยะ ในการออกแบบ จะเป็นการจัดวางองค์ประกอบ รูปภาพ เนื้อหา ช่องว่าง และส่วนประกอบต่างๆ ให้มีความเป็นระเบียบ
• Fonts Aren’t Stretchy ไม่ควรยืด Font เพราะ Font ถูกออกแบบมาให้มีสัดส่วนและขนาดที่เหมาะสมกับการใช้งานแล้ว
• Group by Using Rules เป็นการจัดกลุ่มข้อความ หรืออาจจะเป็นการจัดกลุ่มแต่ละหัวข้อ เพื่อความเป็นระเบียบและง่ายต่อการอ่าน
• Avoid the Corners ไม่ควรวางข้อความตามขอบหรือมุมของหน้า
• Skip a Weight ควรเลือกใช้ Font ที่มีน้ำหนักต่างกัน

อ้างอิง

[embed]8 Rules for Creating Effective Typography Today we're going to discuss something that is both a hot trend and timeless art: typography. The basic rules outlined…designshack.net

[embed]Kimi Kinsey - Business + Blogging Education I am the founder of The Blog Dept.®! I fell into owning an online business. And then I fell into it again, and again…education.kimikinsey.com

[embed]10 Rules To Help You Rule Typography How can you quickly apply typographic rules to regain control of your layouts by following these 10 golden rules of…thefutur.com