🔍สำหรับผู้ที่ไม่มีเวลาอ่าน
🔰 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
Font size คืออะไร ❓
ขนาดของ Font ที่ใช้สำหรับการออกแบบ โดย Font size จะมีหลากหลายขนาดตัวอย่างดังภาพ
😗หลักการใช้ 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 สามารถศึกษาเพิ่มเติมได้ที่ลิงค์ด้านล่าง 👇👇😁😁 ”
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 ที่มีน้ำหนักต่างกัน
อ้างอิง
