CSS - การใช้ CSS Units สำหรับ Typography

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

CSS Units คืออะไร?

CSS Units คือหน่วยการวัดที่ใช้ใน CSS เพื่อกำหนดความกว้าง ความสูง ขนาดตัวอักษร และคุณสมบัติอื่น ๆ ในเอกสาร HTML การใช้หน่วยที่เหมาะสมจะช่วยให้เว็บไซต์ของคุณมีความยืดหยุ่นและดูดีในหลากหลายอุปกรณ์

ประเภทของ CSS Units ที่ใช้กับ Typography

มี CSS Units หลายประเภทที่สามารถใช้สำหรับการออกแบบ Typography แต่ละหน่วยมีข้อดีและข้อจำกัดที่ต่างกันไป ต่อไปนี้คือ CSS Units ที่นิยมใช้ใน Typography:

1. Absolute Units

Absolute Units

  p {
    font-size: 16px;
  }

2. Relative Units

Relative Units

  p {
    font-size: 2em; /* จะเป็นสองเท่าของขนาดที่ได้รับจาก parent */
  }

  p {
    font-size: 1.5rem; /* หมายถึง 1.5 เท่าของตัวอักษรที่กำหนดใน root */
  }

  p {
    font-size: 150%;
  }

3. Viewport Units

Viewport Units

  p {
    font-size: 2vw;
  }

กรณีการใช้งาน CSS Units เพื่อ Typography

การเลือก CSS Units ที่เหมาะสมสำหรับ Typography ขึ้นอยู่กับลักษณะงานและการออกแบบที่ต้องการ ต่อไปนี้คือ USECASE ของการใช้งานหน่วยต่าง ๆ:

กรณีศึกษา: การออกแบบ Responsive หน้าหลักของเว็บไซต์

การออกแบบเพจหลักด้วย Responsive Design จำเป็นต้องให้ความสำคัญกับขนาดของตัวอักษรเพื่อทำให้การอ่านง่าย และปรับตัวเข้ากับหน้าจออุปกรณ์ต่าง ๆ:

- ใช้ **vw** หรือ **vh** ในข้อความที่ต้องการแสดงผลเด่นและตอบสนองต่อขนาดหน้าจอ อย่างเช่น Headline:

  h1 {
    font-size: 5vw;
  }

การเลือกใช้หน่วยในการกำหนดขนาดตัวอักษรที่เหมาะสมใน CSS ช่วยให้การออกแบบเว็บไซต์มีความสม่ำเสมอและเข้ากันได้ดีในอุปกรณ์ต่าง ๆ หากคุณสนใจที่จะเรียนรู้และพัฒนาทักษะด้านการเขียนโปรแกรมมากขึ้น เข้ามาศึกษาที่ EPT (Expert-Programming-Tutor) เพื่อเริ่มต้นการเรียนรู้ของคุณไปอีกขั้น!

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

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/