line-height ใช้หน่วยอะไรดีที่สุด ?

เรื่องของ line-height นั้น เป็นเรื่องที่หลายๆ คนมองข้ามไป คนส่วนใหญ่คงจะรู้ดีว่าเราไม่ควรกำหนด line-height โดยใช้หน่วยแบบ absolute อย่าง px เพราะขนาดของมันจะไม่เปลี่ยนไปตาม font-size ดังนั้นเราจึงควรหันมาใช้หน่วยแบบ relative อย่าง em แทน แต่บางคนอาจจะยังไม่รู้ว่าวิธีนี้ก็ยังไม่ใช่วิธีที่ดีที่สุด

อย่ากำหนด line-height ด้วยวิธี Absolute

เพื่อจะได้ไม่ต้องเสียเวลา เรามาดูตัวอย่างกันเลยดีกว่า สมมติเราจะทำหน้า archive ของบทความ โค้ด html แบบง่ายๆ ของเราจะมีหน้าตาประมาณนี้

ต่อมาให้เราใส่โค้ด css ด้านล่างนี้ลงไป แล้วลองพรีวิวดู

จากโค้ด css เรากำหนด line-height ของ .column1 ด้วย px ส่วน .column2 เราจะใช้ em เมื่อลองพรีวิวดูจะได้ผลลัพธ์แบบนี้

line-height_px_vs_em@1em

เราจะเห็นว่าทั้งสองวิธี ให้ผลลัพธ์ที่โอเคเหมือนๆ กัน ที่เป็นเช่นนี้เพราะว่า 1.5em มีค่าเท่ากับ 24px นั่นเอง แต่จะเกิดอะไรขึ้น หากวันหนึ่ง เราต้องมาแก้งานโดยการเปลี่ยน font-size จากเดิม 1em มาเป็น 2em

เมื่อลองพรีวิวดูอีกครั้ง เราจะได้ผลัพธ์แบบนี้

line-height_px_vs_em@2em

เราจะพบว่า .column1 ที่ใช้หน่วย px นั้นมีปัญหา ส่วน .column2 ที่ใช้หน่วย em ยังคงแสดงผลได้อย่างสวยงามเหมือนเดิม เพราะว่า line-height ที่กำหนดด้วย px นั้น ขนาดของมันจะตายตัว คือจะเป็น 24px ตลอด ไม่ปรับเปลี่ยนไปตาม font-size ส่วน line-height ที่กำหนดด้วย em จะมีขนาดเป็นจำนวนเท่าของ font-size ของตัวมันเอง ซึ่งในที่นี้ มันจะเป็น 1.5 เท่าของ 2em หรือ 48px นั่นเอง

ปัญหา Inheritance ของ Em

ทีนี้เราลองมาดูอีกตัวอย่างหนึ่ง ให้เราสร้างหน้าขึ้นมาใหม่ แล้วใส่โค้ด html ด้านล่างนี้ลงไป

จากนั้น ให้เราใส่โค้ด css แบบนี้ลงไปด้วย

จากโค้ด css ด้านบน เราจะมาเปรียบเทียบความแตกต่างระหว่างการกำหนด line-height ด้วย em กับการไม่ใส่หน่วยอะไรเลย ดูสิว่ามันจะมีอะไรต่างกันมั้ย ? ให้เราลองพรีวิวดู

line-height_em_vs_unitless@1em

ผลลัพธ์ที่ได้นั้น สวยงามเหมือนกันทั้ง 2 คอลัมน์ ทีนี้ให้เราลองเพิ่ม css rule เข้าไปอีกอัน โดยเราจะเพิ่ม font-size: 2em เข้าไปที่ “article p” โค้ด css ใหม่จะกลายเป็นแบบนี้

ก่อนจะลองพรีวิวดู ให้เราลองทบทวนความรู้เกี่ยวกับหน่วย em ก่อน แล้วลองนึกดูสิว่าผลลัพธ์จะมีหน้าตาเป็นอย่างไร เมื่อได้คำตอบแล้วก็ลองพรีวิวดูเลย

line-height_em_vs_unitless@2em

เราจะพบว่า .column1 ที่ใช้ em นั้นมีปัญหา ส่วน .column2 ที่ไม่ได้ใส่หน่วยอะไร กลับแสดงผลได้อย่างสวยงามเหมือนเดิม ทำไมถึงเป็นแบบนี้ ?

กำหนด line-height โดยไม่ต้องใส่หน่วย

ที่เป็นเช่นนี้เพราะว่าการกำหนด line-height ด้วย em นั้น มันจะส่งผลไปถึง “descendant(ลูกหลาน)” ของมันด้วย อ้าว! แล้วมันไม่ดีหรอ? จะได้แก้ทีเดียว แล้วมีผลไปถึงลูกๆ ด้วยไง?

ฟังดูเหมือนจะดี แต่ปัญหามันอยู่ตรงที่มรดกที่ลูกหลานได้รับไปนั้น มันไม่ใช่ 1.5em แต่มันคือ 16×1.5 = 24px ต่างหาก ด้วยเหตุนี้เอง แม้ว่าเราจะไปกำหนดให้ article p มี font-size เป็น 2em แล้ว แต่ line-height ก็จะยังคงมีขนาดเท่าเดิมที่ 24px

ปัญหานี้แก้ได้โดยการกำหนด line-height แบบไม่ต้องใส่หน่วยใดๆ ซึ่งมันจะทำให้สิ่งที่ลูกหลานได้รับไปคือ “ตัวคูณ” หรือในที่นี้ก็คือ 1.5 นั่นเอง เพียงเท่านี้ การจัดการกับ typography ในส่วนของ line-height ก็จะไม่ใช่เรื่องลำบากอีกต่อไป

(Visited 3,147 times, 1 visits today)

8 Responses to “line-height ใช้หน่วยอะไรดีที่สุด ?”

  1. Nut says:

    Good Post

  2. ขอบคุณมากครับ เปรียบเทียบ และอธิบายของชัดเจนเลย ชอบมาก ฮ่า ๆ

  3. Topfy Roadbauy says:

    เจ๋งครับ

  4. เด็กอนุบาล says:

    ถ้าใส่หน่วยเป็น % ละคะ ช่วยอธิบายเปรียบเทียบด้วยได้มั้ยอะคะ ขอบคุณมากค่ะ

    • Siam HTML says:

      การกำหนด line-height โดยใช้หน่วยเป็น % จะส่งผลเหมือนกับ em ครับ สามารถดูรูป em แทนได้เลย (1em = 100%) หากจะทำ responsive web แอดมินแนะนำให้ใช้หน่วยแบบ “Unitless” หรือ “ไม่มีหน่วย” เท่านั้นครับ ^_^

  5. Victorzz Jam says:

    มิน่าละ เจอปัญหาลูกๆ line-height ไม่สวยงาม เพราะงี้นี้เอง ขอบคุณสำหรับการยกตัวอย่างครับ

  6. Wasun Srisomboon says:

    ขอบคุณครับ

    เขียนแบบผิดๆมาตั้งนาน ^_^

  7. somporn pongnanak says:

    ขอบคุณคร้าบบบ ความรู้ทั้งนั้น

Leave a Reply