Lecture3

Lecture    Lecture2    Lecture3

 

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

 

  ส่วนประกอบของตัวอักษร

ในแต่ละตัวอักษรประกอบด้วยส่วนต่าง ๆ ที่เราน่าจะรู้จักไว้ เพื่อที่จะใช้

ประโยชน์เมื่อต้องการเปรียบเทียบลักษณะของตัวอักษณแต่ละชนิดได้

ส่วนประกอบหลัก ๆ ที่ควรรู้จัก มีดังนี้

 

•  Ascender

           ส่วนบนของตัวอักษรพิมพ์เล็ก ที่สูงกว่าความสูง x-height ของตัวอักษร

•  Descender

            ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline ของตัวอักษร

•  Baseline

               เส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่

•  Cap height

               ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่

•  x-height 

             หมายถึง ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักจะใช้อ้างถึง

  ความสูงของตัวอักษรที่ไม่รวมส่วนบนและส่วนล่าง
•  point size

             ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร

 

ช่องว่างระหว่างตัวอักษร (Tracking) และช่องว่างระหว่างคำ

 

ความรู้สึกของตัวอักษรอาจจะเป็นผลมาจากพื้อที่ว่างโดยรอบ ที่อยู่ระหว่างตัวอักษร

 ระหว่างคำ หรือระหว่างบรรทัด คุณสามารถปรับระยะของช่องว่างเหล่านี้เพื่อให้อ่าน

ได้ง่ายขึ้น แม้ว่าตัวอักษรจะถูกออกแบบมาให้มีระยะห่างที่เหมาะสมอยู่แล้ว แต่ใน

บางสถานการณ์ อาจมีความต้องการให้ตัวอักษรดูแน่นหรือหลวมเป็นพิเศษอย่างเช่น

ตัวอักษีที่ใช้ ตัวพิมพ์ใหญ่ทั้งหมด (UPPERCASE) จะดูค่อนข้างแน่นเพราะถูกออก

แบบให้ใช้ร่วมกับตัวพิมพ์เล็กดังนั้นคุณควรเพิ่มช่องว่างระหว่างตัวอักษรให้มากขึ้น

เล็กน้อย สำหรับคำที่ใช้ตัวพิมพ์ใหญ่ทั้งหมด

 

        ตัวอักษรบางคู่ที่อยู่ติดกันอาจมีระยะห่างไม่เหมาะสม จำเป็นต้องทำการปรับ

แต่งที่เรียกว่า Kerning เป็นการปรับระยะห่างระหว่างคู่ของตัวอักษร ซึ่งจะมีความ

สำคัญมากเมื่อใช้ตัวอักษรขนาดใหญ่หรือตัวอักษรที่ใช้เป็นหัวข้อหลัก เพราะเมื่อ

ตัวอักษรใหญ่ขึ้นก็จะเกิดช่องว่างที่มากขึ้นด้วย จุดประสงค์ของการทำ kerning คือ

การปรับระยะห่างของตัวอักษรให้เท่ากันโดยตลอด เพื่อที่สายตาจะได้เคลื่อนที่

อย่างราบเรียบและสม่ำเสมอ

 

       ช่องว่างระหว่างคำสำหรับภาษาอังกฤษ หรือ ช่องว่างระหว่างคำในภาษาไทย

เป็นสิ่งที่ควรจะเท่ากันเสมอ ไม่ว่าจะเป็นการจัดตำแหน่งแบบ Justify ช่องว่างของ

แต่ละคำจะแตกต่างกันไปในแต่ละบรรทัด เพื่อช่วยให้ขอบซ้ายและขวาเท่ากัน

คุณอาจต้องใช้เครื่องหมายยัติภังค์ (-) มาช่วยแยกคำให้อยู่คนละบรรทัด หรือปรับ

เปลี่ยนการเว้รวรรคใหม่ เพื่อไม่ให้มีช่องว่างมากเกินไป

 

การจัดตำแหน่ง (Alignmen)

 

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

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

ด้านซ้ายโดยที่ปล่อยให้ด้านขวามีลักษณะไม่สม่ำเสมอ จะให้ความรู้สึกไม่เป็น

ทางการ และจะอ่านได้ง่ายกว่าการจัดชิดขอบขวา โดยทั่วไปแล้วพยายามหลีก

เลี่ยงการจัดชิดขวา ยกเว้นเมื่อมีความเหมาะสมกับรูปแบบจริงๆ ส่วนตัวอักษรที่มี

การปรับระยะให้ชิดขอบทั้งซ้ายและขวา (Justify) เป็นที่นิยมใช้ในหนังสือพิมพ์

และจุลสาร พร้อมกับให้คามรู้สึกที่เป็นทางการอีกด้วย

ความสะดวกในการอ่าน (Legibility)

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

สิ่งที่ควรคำนึงในการจัดข้อความให้หน้าเว็บ

• การจัดตำแหน่ง (Alignment)
• ช่องว่างระหว่างตัวอักษร และช่องว่างระหว่างคำ
• การจัดตำแหน่งแบบ justify ทำให้เกิดช่องว่างของแต่ละคำ
• ระยะห่างระหว่างบรรทัด
• ความยาวของหน้าเว็บ
• ขนาดของตัวอักษร
• ดึงดูดความสนใจด้วยอักษรตัวใหญ่
• การเน้นข้อความให้เด่นชัด
• การใช้สีกับตัวอักษร
• การกำหนดขอบแบบ Aliased และ Anti-aliased

คำแนะนำในการใช้ตัวอักษรในหน้าเว็บ

• ไม่ควรใช้ตัวอักษรชนิดที่หายากหรือไม่ได้มาพร้อมกับโปรแกรม

            ต่างๆหรือเครื่องคอมฯ

• ระบุชนิดตัวอักษรให้ครอบคลุม
• กำหนดลักษณะของตัวอักษรที่อยู่ในทุกช่องของตาราง
• ระบุขนาดของตัวษรเสมอ
• ใช้ CSS ในการควบคุมรูปแบบการแสดงผล