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

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

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

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

<article class="column1">
    <h2>Px</h2>
    <p>Chupa chups biscuit cheesecake. Applicake cake jujubes drag?e chocolate cake. Gummi bears sweet roll tootsie roll candy canes.</p>
</article>
<article class="column2">
    <h2>Em</h2>
    <p>Chupa chups biscuit cheesecake. Applicake cake jujubes drag?e chocolate cake. Gummi bears sweet roll tootsie roll candy canes.</p>
</article>

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

article{
	font-size: 1em;       /* 16px */
}
article.column1{
	line-height: 24px;    /* 24px */
}
article.column2{
	line-height: 1.5em;   /* 16x1.5 = 24px */
}

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

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

article{
	font-size: 2em;       /* 16x2 = 32px */
}
article.column1{
	line-height: 24px;    /* 24px */
}
article.column2{
	line-height: 1.5em;   /* 32x1.5 = 48px */
}

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

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

ปัญหา Inheritance ของ Em

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

<article class="column1">
    <h2>Em</h2>
    <p>Chupa chups biscuit cheesecake. Applicake cake jujubes drag?e chocolate cake. Gummi bears sweet roll tootsie roll candy canes.</p>
</article>
<article class="column2">
    <h2>Unitless</h2>
    <p>Chupa chups biscuit cheesecake. Applicake cake jujubes drag?e chocolate cake. Gummi bears sweet roll tootsie roll candy canes.</p>
</article>

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

article{
	font-size: 1em;       /* 16px */
}
article.column1{
	line-height: 1.5em;   /* 16x1.5 = 24px */
}
article.column2{
	line-height: 1.5;     /* 16x1.5 = 24px */
}

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

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

article{
	font-size: 1em;       /* 16px */
}
article p{
	font-size: 2em;       /* 16x2 = 32px */
}
article.column1{
	line-height: 1.5em;   /* 16x1.5 = 24px */
}
article.column2{
	line-height: 1.5;     /* 16x1.5 = 24px */
}

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

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

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

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

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

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