() translation by (you can also view the original English article)
ยินดีต้อนรับสู่บทเรียนที่เก้าของซีรีย์ การทำเว็บไซต์สำหรับเด็กของเรา วันนี้เรามาคุยเรื่องการออกแบบตัวอักษรกัน
ในบทเรียนนี้ เราจะเจาะลึกเกี่ยวกับรูปแบบตัวอักษรและทุกสิ่งทุกอย่างที่เกี่ยวกับมัน ทำไมมันถึงสำคัญสำหรับการออกแบบ เราเคยได้คุยเกี่ยวกับประสบการณ์ผู้ใช้งานจำนวนมาก ดังนั้นและบทเรียนนี้ก็ไม่มีข้อยกเว้น เราจะทำงานอย่างหนักเพื่อให้แน่ใจว่าตัวอักษรของเราทุกตัวนั้นดูดีและง่ายต่อการอ่าน
อย่าลืมที่จะถามคำถามในกล่องคอมเม้นต์ด้านล่างของบทเรียนนี้ได้เลย
จริงๆ แล้วการออกแบบตัวอักษรคืออะไร
การออกแบบตัวอักษรมีอยู่แทบทุกที่ มันคือมุมมองของเรามีต่อตัวอักษรที่เราเขียนขึ้น ดังนั้นทุกๆที่ที่เราเห็นตัวอักษรมันจะมีเรื่องการออกแบบตัวอักษรเข้ามาเกี่ยวข้องด้วย ซึ่งตัวอักษรสามารถพบได้บนหน้าจอ กระดาษ หรือ ป้ายต่างๆ รอบๆ ตัวเรา
ด้วยการออกแบบตัวอักษร เราสามารถเปลี่ยน "มุมมองและความรู้สึก (look and feel)" ของอักษรเหล่านี้เพื่อดึงดูดผู้เข้าชม การออกแบบตัวอักษรคำต่อคำนั้นบ่อยครั้งสร้างผลกระทบกับผู้ใช้งานก่อนที่พวกเขาจะตัดสินใจลงมืออ่านเนื้อหาจริงๆ เสียอีก ดังนั้นมันจึงสำคัญมากที่การออกแบบนั้นจะให้ความรู้สึกโดยรวมของเนื้อหาและตัวอักษรของเรานั้นเทียบกับความรู้สึกเหล่านั้นได้ด้วยตัวของมันเอง
ในบทเรียนที่ผ่านมา เราได้คุยว่าเนื้อหานั้นมีความสำคัญอย่างไร หลังจากนั้น มันไม่ใช่ประเด็นสำคัญว่าเว็บไซต์ของเราจะดูดีแค่ไหนถ้ามันไม่มีข้อมูลที่คนต้องการอ่าน วิธีการที่เรานำเสนอคำเหล่านั้นให้แก่ผู้ใช้ อย่างไรก็ตามมันจะดีที่สุดถ้าข้อความเหล่านั้นแสดงตัวมันเองออกมาโดยไม่ต้องอ่านมัน
ความต่างระหว่าง Typeface กับ Font
การออกแบบตัวอักษรนั้นเกี่ยวข้องกับคำจำกัดความเหล่านี้
Typeface คือแบบทั่วๆ ไปของชุดตัวอักษร (คำและสัญลักษณ์) ขณะที่ Font นั้นจะระบุขนาดที่เฉพาะเจาะจง เช่น ความหนาของอักษร สไตล์ การใช้งาน Typeface ภายใน Typeface นั้นอีกทีหนึ่ง
การออกแบบเมืองของเราใช้ Typeface เรียกว่า "Open Sans" เราใช้ขนาดและความหนาของตัวอักษรที่ต่างกัน Typeface ชนิดนี้ที่ซึ่งบอกพวกเราว่า Font อันไหนควรโหลดเข้ามาในเพจ
ขณะที่เราใช้ Font ของเว็บไซต์ของเรา Font เหล่านี้อยู่บนพื้นฐานของ Typeface ที่บางคนใช้เวลาอย่างมากในการออกแบบมันขึ้นมา
ความต่างระหว่าง Serif กับ Sans-Serif
Typeface นั้นมีชนิด Serif กับ Sans-serif ชนิด Serif นั้นอธิบายได้แบบง่ายที่สุดว่า มันมีส่วนที่ยื่นออกมาท้ายจุดสิ้นสุดของตัวอักษร
จากรูป Typeface ชนิด Serif จะมีส่วนยื่นออกมาแบบนี้
Open Sans คือ Typeface ชนิด Sans-serif ชนิดหนึ่ง Sans-serif นั้นมีความหมายอีกอย่างหนึ่งคือ ไม่เป็น Serif ซึ่ง Typeface ชนิด Sans-serif นั้นจะไม่มีส่วนยื่นออกมาเหมือนกับด้านบน
มันไม่มีคำตอบที่ถูกหรือผิดเกี่ยวกับอะไรที่ควรใช้บนเว็บไซต์ของเรา แต่เราจะต้องการมันเพื่อใช้กับการออกแบบโดยทั่วไปและให้ความรู้สึกที่มันเป็น พยายามที่จะใช้อันที่สามารถอ่านได้ง่ายที่สุด โดยอย่างยิ่งเฉพาะเจาะจงกับเลย์เอ้าท์และปริมาณตัวอักษร
Typeface ชนิด Serif นั้นมักจะง่ายต่อการอ่านบนกระดาษหรือเมื่อมีข้อความอยู่มากๆ ขณะที่ Sans-serif นั้นจะดีบนหน้าจอคอมพิวเตอร์หรือมีตัวอักษรอยู่จำนวนเล็กน้อย
ส่วนประกอบของ Typefaces
วิธีการหาชนิดของตัวอักษรที่ดีที่สุดให้กับเว็บไซต์ของเรา เราต้องคิดเกี่ยวกับว่าอะไรที่ช่วยให้ชนิดตัวอักษรชนิดนั้นแตกต่างจากพวกอื่นๆ ยังมีส่วนต่างๆ อีกมากของ Typeface แต่ละตัวที่บางคนได้ออกแบบและคิดเกี่ยวกับมันในรายละเอียดปลีกย่อยไว้แล้ว
มันคือรายละเอียดที่ช่วยให้ตัวอักษรแต่ละอันนั้นมีรูปแบบเฉพาะตัว และมันขึ้นอยู่กับเราว่าจะเลือกอันไหนให้มันทำงานได้ดีที่สุดสำหรับการออกแบบในสถานการณ์ที่แตกต่างกัน
ลองมองดูคร่าวๆ ที่รายละเอียดบางอย่างของ Typeface เพื่อให้เข้าใจมากขึ้น ดูว่าสิ่งเหล่านี้สามารถพัฒนาการออกแบบของเรา (หรือทำให้แย่ลง) ได้อย่างไร
มันไม่มีความจำเป็นที่จะต้องจำส่วนประกอบต่างๆ เหล่านี้ แค่รู้ความแตกต่างของมันนั้นช่วยให้เราดู Typeface ชนิดต่างๆ ได้ว่ามันพิเศษอย่างไร
ช่องว่าง (Spacing)
เป็นสิ่งใกล้ตัวกับการออกแบบตัวอักษรมากที่สุด ช่องว่างนั้นสำคัญมากเมื่อต้องการประสบการณ์ที่ดีที่สุดให้กับผู้ชม จำนวนช่องว่างระหว่างตัวอักษรแต่ละตัว ระหว่างคำ และ ระหว่างบรรทัด สามารถสร้างความต่างอย่างยิ่งกับการอ่านได้ (readability)
ไม่มีเนื้อที่ว่างมากจะให้เราใส่อักษรหรือคำที่จะเกาะกลุ่มกันจนเราอ่านมันได้ยาก ขณะที่พื้นที่ว่างจำนวนมากจะทำให้ทุกอย่างดูแตกแยกและยากต่อการติดตาม
Font ตามด้วยพื้นที่ว่างของมันเองที่เป็นค่า default ติดมาจะดีที่สุดต่อการอ่าน แต่ลองมองดูความต่างของช่องว่างและการเปลี่ยนแปลงใน CSS ในกรณีที่เราทำในการออกแบบของเรา
Kerning และ Tracking
Kerning คือช่องว่างระหว่างตัวอักษรแต่ละตัว
สำหรับ Font มันจะมีกฎของ Kerning เตรียมไว้ให้แล้วสำหรับเรา แต่เราก็สามารถปรับมันได้ใน CSS ถ้าเราต้องการ ด้วยการใช้พร้อพเพอร์ตี้ letter-spacing
1 |
h1 { |
2 |
letter-spacing: 5px; |
3 |
}
|
Tracking คือช่องว่างระหว่างกลุ่มของตัวอักษรหรือคำ
ถ้า Font ไม่ให้ Tracking ที่เพียงพอ เราสามารถแก้ไขมันผ่านพร้อพเพอร์ตี้ word-spacing ได้
1 |
h1 { |
2 |
word-spacing: 15px; |
3 |
}
|
Leading
Leading นั้นเกี่ยวกับช่องว่างระหว่างบรรทัด
เราสามารถสร้างระยะห่างของบรรทัดเหล่านี้โดยใส่ค่าเปลี่ยนแปลง Leading เข้าไปด้วยพร้อพเพอร์ตี้ line-height
1 |
p { |
2 |
line-height: 2; |
3 |
}
|
ค่าของ 2 ที่นี่จะทำให้แน่ใจว่า leading ของเรานั้นมีค่าสองเท่าของค่า default ที่ติดมากับ font
Widows และ Orphans
ถ้าคำเดี่ยวๆ ถูกทิ้งไว้ในบรรทัดล่างสุดแล้ว ในส่วนท้ายของบล็อคนั้นเราจะเรียกมันว่า Widow
ลองกล่าวว่า Block ในรูปที่ตามมานั้นแสดงคำภายในคอลัมน์ ถ้า Widow นั้นมีสีฟ้า วางไว้อยู่ในท้ายเพราะว่ามันเป็นส่วนที่ประโยคปิดเรียบร้อยแล้ว
และ Orphan นั้นคือคำเดี่ยวๆ ที่โผล่บนสุดบรรทัดด้วยตัวมันเองที่จุดเริ่มต้นของคอลัมน์ มันมักจะอยู่ถัดจากคอลัมน์ที่ๆ ข้อความนั้นเกี่ยวข้องด้วย
Widow และ Orphan นั้นจะถูกพิจารณาในเรื่องการออกแบบตัวอักษรเพราะมันจะน่ารำคาญหรือไม่หรือทำให้ประสบการณ์การอ่านนั้นแย่ลงหรือเปล่า
ยังมีวิธีการอื่นๆ อีกมากมายเราสามารถนำมาใช้เพื่อแก้ไขหนึ่งในกรณีเหล่านี้ ถ้ามันเกิดขึ้นบนเว็บไซต์ของเรา อย่างเช่น
- ปรับขนาดของตัวอักษร
- ปรับขนาดของคอนเทนเนอร์
- เพิ่มหรือตัดตัวอักษรออก
- หรือปรับค่า Kerning หรือ Tracking ของตัวอักษร
การจัดตำแหน่งย่อหน้า (Alignment)
เราสามารถเลือกเพื่อจัดตำแหน่งข้อความของเราชิดซ้าย (เป็นค่า default สำหรับภาษาบนเว็บอย่างเช่นภาษาไทยหรือภาษาอังกฤษ) จัดแบบกึ่งกลาง หรือ จัดชิดขวา
จัดแบบชิดซ้าย (Left)
ข้อความที่อยู่บนเว็บควรจะถูกจัดชิดซ้าย (อีกครั้งสำหรับภาษาที่เขียนจากซ้ายไปขวา) เพราะว่ามันนั้นแสดงถึงผู้อ่านที่ที่อ่านจากซ้ายไปขวาสำหรับภาษาพวกนั้นอยู่แล้ว
จัดกึ่งกลาง (Center)
การจัดกึ่งกลาง (Center Alignment) นั้นบ่อยครั้งใช้ในหัวข้อที่ช่วยพวกมันดูโดดเด่นออกจากเนื้อหาหลักบนหน้าเพจ เราสามารถทำสิ่งนี้ใน CSS ของเราด้วยพร้อพเพอร์ตี้ text-align ยกตัวอย่าง
1 |
h1 { |
2 |
text-align: center; |
3 |
}
|
ข้อความที่ซึ่งถูกจัดเรียงในวิธีนี้มักจะพบบนป้ายหรือใบปลิวพยายามที่จะดึงดูดผู้ชม แต่เราไม่ควรจัดกึ่งกลางเนื้อหาขนาดใหญ่บนเว็บเพราะว่ามันจะยากสำหรับผู้ใช้งานที่จะอ่านมัน การจัดกึ่งกลางข้อความนั้นสร้างความแตกต่างในเรื่องของความกว้าง จากเส้นหนึ่งไปอีกเส้นหนึ่ง ทำให้มันยากสำหรับตาที่จะตามอ่าน
จัดชิดขวา (Right)
บางภาษา (อย่างเช่นภาษาฮิบรู) นั้นจะเขียนจากขวาไปซ้าย ทำให้การจัดชิดขวานั้นเป็นค่า default
ในฐานะของนักออกแบบ เราสามารถเลือกที่จะมีข้อความจำนวนเล็กน้อยชิดขวา ดังนั้นมันจะทำให้มันดูโดดเด่น เช่น คำอธิบายใต้ภาพ เป็นต้น คำอธิบายใต้ภาพเหล่านี้ ก็อย่างเช่นหัวข้อ หรือ รายละเอียดสำหรับรูปภาพที่ใช้อิลิเมนต์ HTML figcaption ของพวกมันเอง
การจัดด้านบนนั้นถูกประกาศด้วยการจัดแบบชิดขวา (right) บนอิลิเมนต์ในไฟล์ CSS
1 |
figcaption { |
2 |
text-align: right; |
3 |
}
|
ทิปทั่วไป
การออกแบบตัวอักษรจำนวนมากที่เราได้เรียนรู้ไปที่เราทำหลังจากการอ่านเนื้อหาแล้ว เราก็ปรับแต่งตามค่าต่างๆที่เราต้องการ อย่างไรก็ตาม มีทิปทั่วๆไป ที่สามารถช่วยเรานั้นสะดวกสบายขึ้นในทักษะการออกแบบตัวอักษร
ขนาดของ Font และ ลำดับชั้นของมุมมอง
ขนาด font-size นั้นน้อยกว่า 16px บนข้อความนั้นช่วยให้เนื้อหานั้นดูเล็กและอ่านยากบนหน้าจอ
เราเคยได้คุยเป็นจำนวนมากเกี่ยวกับ ลำดับชั้นของมุมมอง ในบทเรียนที่ผ่านมาเรื่องการออกแบบพื้นฐาน ตั้งค่าลำดับชั้นของมุมมองสำหรับข้อความผ่านการออกแบบของเราจะช่วยให้แน่ใจว่าเว็บไซต์นั้นง่ายต่อการท่องโดยแยกเนื้อหาที่เกี่ยวข้องและไฮไลต์อะไรที่มันสำคัญที่สุด
ข้อความบนเว็บไซต์เมืองในฝันของเรานั้นมีระดับชั้นที่แตกต่างกัน ด้วยหัวข้อที่สำคัญที่สุด ตามมาด้วยหมวดหมู่ธุรกิจและร้านค้าเฉพาะ และ จบด้วย "สร้างโดย" ในส่วนสุดท้าย
ลำดับชั้นนี้จะแสดงขนาดที่แตกต่างกัน สี และ ตำแหน่งบนหน้าเพจ
การตัดกันของสี (Contrast)
เราจะคุยมากขึ้นเกี่ยวกับสีและการตัดกันของสีในบทเรียนหน้า ดังนั้นแค่รู้เกี่ยวกับสีของอักษรของคุณและมันทำให้ตัดกับสีพื้นหลังหรือเปล่า ทำให้มันยากที่จะอ่านหรือไม่
นี่คือตัวอย่างของการตัดกันที่ไม่ดีในทางซ้าย และการตัดกันที่ดูดีกว่าทางขวา
ตัวอักษรสีชมพูสว่างบนพื้นหลังสีฟ้าทางด้านซ้ายแสดงการตัดกันของสีที่ไม่ดี ตัวอักษรนั้นยากที่จะอ่าน และมองดูเบลอๆ ทำร้ายตาเราจริงๆ
จำนวนของ Font
กฎโดยทั่วไปคือ มันดีที่สุดที่จะไม่ใช้มากกว่าสองหรือสาม Font ต่อหนึ่งโปรเจค คู่ของ Font นั้นควรเข้ากันได้และควรสนับสนุนอารมณ์และไอเดียเบื้องหลังของการออกแบบ
Web Font
ใช่ว่า Font ทั้งหมดจะทำงานได้ดีบนเว็บ และบางอันมันดีสำหรับสิ่งพิมพ์เท่านั้น โชคดีที่ Google Fonts นั้นที่เรานำเข้า Open Sans เข้ามาในเว็บไซต์ของเรา นั้นให้รายการที่ยอดเยี่ยมสำหรับ Font ที่เหมาะสำหรับเว็บ
สรุปรวมทุกอย่างเข้าด้วยกัน
ในบทเรียนนี้เราได้สัมผัสว่าการออกแบบนั้นคืออะไรแบบจริงๆ จังๆ และทำการรีวิวว่าส่วนต่างๆ ของ Typeface สามารถแยกประเภทพวกมันออกจากอันอื่นได้อย่างไร ทั้งยังได้เรียนรู้ทิปทั่วไปเล็กๆ น้อยๆ ไว้เมื่อเราต้องทำงานกับตัวอักษรและฟ้อนท์ต่างๆ บนเว็บ ทั้งหมดนั้นก็เพื่อจุดประสงค์เดียว เพื่อสร้างเนื้อหาที่ง่ายต่อการอ่านให้ผู้ใช้งาน
ถัดไปเราจะเจาะลึกเกี่ยวกับกฎทั่วๆไป ที่เกี่ยวกับการใช้สีบนเว็บและข้อความอะไรที่เราสื่อสารถึงผู้ใช้งานของเราบนพื้นฐานของการเลือกใช้สี
แล้วเจอกันรอบตัวเมืองเช่นเดิม!
