บทที่ 10 จัดรูปแบบตัวอักษรสำหรับเว็บไซต์

บทที่ 10

จัดรูปแบบตัวอักษรสำหรับเว็บไซต์

              ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้ ตัวอักษรแต่ละชนิดจะให้อารมณ์และความรู้สึกที่แตกต่างกัน ควรเลือกใช้ตัวอักษรให้เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ

ส่วนประกอบของตัวอักษร
                - descender ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline
                - baseline เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
                - cap height ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
                - x - height ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่
รวม descender ascender
                - point size ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร
                - ค่าความสูง x - height มีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน

รูปแบบตัวอักษร
แบ่งเป็น 2 ประเภทใหญ่ๆ
1. ตัวอักษรที่มีขนาดสัมพันธ์กับรูปร่าง หรือตัวอักษรที่มีขนาดไม่คงที่
                - ตัวอักษรแต่ละตัวมีพื้นที่ตามแนวนอนไม่เท่ากัน ขึ้นกับรูปร่างของตัวอักษรนั้น
                - สิ่งพิมพ์ที่ผลิตด้วยคอมพิวเตอร์ส่วนใหญ่จะใช้ตัวอักษรนี้เพื่อให้ดูเหมาะสมและอ่านง่าย
2. ตัวอักษรที่มีขนาดคงที่
                - มีพื้นที่ตามแนวนอนเท่ากันหมด เป็นรูปแบบที่เรียบง่าย คล้ายตัวพิมพ์ดีด

ตัวอักษรประเภท serif และ sans-serif
ตัวอักษรประเภท serif
                - มีลายเส้นเพิ่มขึ้นที่ส่วนปลาย
                - เช่น Times New Roman , Garamond, Georgia เป็นต้น
                - เหมาะจะใช้ในส่วนที่เป็นรายละเอียดเนื้อหา ไม่เหมาะกับการใช้เป็นตัวหนา
ตัวอักษรประเภท sans-serif
                - ไม่มีลายเส้นตกแต่งติดอยู่กับตัวอักษร
                - เช่น Arial, Verdana, Geneva
                - เหมาะที่จะใช้กับหัวข้อหรือตัวอักษรขนาดใหญ่
                - ไม่เหมาะกับลักษณะเอียงเพราะจะทำให้รูปร่างเปลี่ยนไปมาก

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

การจัดข้อความในหน้าเว็บ
การจัดตำแหน่ง (Alignment)
                - ในภาษา HTML สามารถจัดตำแหน่งตัวอักษรได้ด้วยคำสั่ง Align และสามารถเลือกค่าเป็น left,
right, center, justify

ช่วงว่างระหว่างตัวอักษร และช่วงว่างระหว่างคำ
                - ตัวอักษรบางคู่ที่อยู่ติดกันอาจมีระยะที่ไม่เหมาะสม จึงต้องมีการ Kerning เพื่อที่สายตาจะได้
เคลื่อนที่อย่างราบเรียบและสม่ำเสมอ
                - การจัดตำแหน่งแบบ justify ทำให้เกิดช่องว่างที่ไม่สวยงามได้

ระยะห่างระหว่างบรรทัด
                - เนื้อหาที่มีปริมาณมาก ควรมีระยะห่างระหว่างบรรทัดมาก เพื่อเพิ่มความสะดวกในการอ่านเป็น
เวลานาน

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

ขนาดของตัวอักษร
                - ใช้ตัวอักษรหลายขนาดเพื่อสร้างลำดับความสำคัญของข้อมูล

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

การเน้นข้อความให้เด่นชัด
                - ใช้ขนาดและน้ำหนักของตัวอักษร การทำตัวเอียง ขีดเส้นใต้ ตำแหน่งของตัวอักษร แนวทาง
ของตัวอักษร พื้นที่ว่าง

การใช้สีกับตัวอักษร
                - กำหนดสีหลักสำหรับเว็บ
                - ใช้สีของตัวอักษรอย่างมีความหมายสม่ำเสมอ
                - ใช้สีที่แตกต่างกันในแต่ละส่วนของข้อมูล
                - กำหนดสีของ link ให้เหมาะสม

การกำหนดขอบแบบ Aliased และ Anti-aliased
                - Aliased คือลักษณะขอบที่เป็นรอยหยักๆ ที่เกิดขึ้นบริเวณเส้นโค้งหรือเส้นแนวเฉียงที่แสดงบน
หน้าจอ
                - Anti-aliased ใช้เทคนิคของโทนสีเข้ามาช่วย ด้วยการเพิ่มสีที่อยู่ระหว่างสีของตัวอักษรจะทำให้
ขอบดูเรียบขึ้น
คำแนะนำในการใช้ตัวอักษรในเว็บเพจ
                - ไม่ควรใช้ตัวอักษรที่หายากหรือไม่ได้มาพร้อมกับโปรแกรมต่างๆ

<< Back