การออกแบบเว็บยืมคำจำกัดความและคำจำกัดความจากโลกแห่งกราฟฟิกและการออกแบบสิ่งพิมพ์ โดยเฉพาะอย่างยิ่งเมื่อเป็นเรื่องเกี่ยวกับการ พิมพ์เว็บ และวิธีการที่เราได้รับ letterforms ในหน้าเว็บของเรา แนวความคล้ายคลึงกันเหล่านี้ไม่ใช่คำแปล 1 ถึง 1 คำ แต่คุณสามารถมองเห็นได้ว่าสาขาใดมีอิทธิพลต่อเรื่องใดเรื่องหนึ่ง โดยเฉพาะอย่างยิ่งเมื่อคุณพิจารณาความสัมพันธ์ระหว่างคำดั้งเดิม typography "leading" และ CSS property ที่เรียกว่า "line-height."
วัตถุประสงค์ของการเป็นผู้นำ
เมื่อผู้คนใช้มือถือโลหะหรือตัวอักษรไม้เพื่อสร้างตัวพิมพ์สำหรับหน้าพิมพ์บางชิ้นวางระหว่างเส้นแนวนอนของข้อความเพื่อสร้างช่องว่างระหว่างบรรทัดเหล่านั้น ถ้าคุณต้องการพื้นที่ขนาดใหญ่คุณจะใส่ชิ้นส่วนขนาดใหญ่ขึ้น นี่เป็นคำที่ใช้เรียกว่า "ผู้นำ" ถ้าคุณค้นหาคำว่า "ชั้นนำ" ในหนังสือเกี่ยวกับการออกแบบและการพิมพ์แบบอักษรก็จะอ่านอะไรบางอย่างที่ส่งผลต่อ - "ระยะห่างระหว่างเส้นระดับพื้นฐานของเส้นที่ต่อเนื่องของประเภท"
เป็นผู้นำในการออกแบบเว็บ
ในการออกแบบระบบดิจิทัลคำที่ใช้นำมาใช้เพื่ออ้างถึงระยะห่างระหว่างบรรทัดข้อความ หลายโปรแกรมใช้คำที่แน่นอนนี้แม้ว่าจะไม่มีการนำมาใช้จริงในโปรแกรมเหล่านี้เป็นตัวอย่างที่ดีของรูปแบบใหม่ของแนวคิดการยืมการออกแบบจากคนดั้งเดิมแม้ว่าจะมีการเปลี่ยนแปลงการใช้งานตามหลักการนั้นอย่างแท้จริง
เมื่อพูดถึงการออกแบบเว็บไม่มีคุณสมบัติ CSS สำหรับ "leading" แต่คุณสมบัติ CSS ที่จะจัดการกับการแสดงภาพแบบข้อความนี้เรียกว่า line-height ถ้าคุณต้องการให้ข้อความของคุณมีช่องว่างระหว่างบรรทัดในแนวนอนคุณควรใช้คุณสมบัตินี้ ตัวอย่างเช่นสมมติว่าคุณต้องการเพิ่มความสูงบรรทัดสำหรับย่อหน้าทั้งหมดภายใน ส่วน
นี่จะเป็น 1.5 เท่าของความสูงของบรรทัดตามขนาดอักษรเริ่มต้นของหน้าเว็บ (โดยปกติคือ 16px)
เมื่อไหร่ที่จะใช้ Line-Height
ตามที่ระบุไว้ด้านบนความสูงของบรรทัดเหมาะสมเพื่อใช้ในการเว้นบรรทัดของข้อความในย่อหน้าหรือชุดข้อความอื่น ๆ หากมีช่องว่างระหว่างบรรทัดน้อยเกินไปข้อความอาจกลายเป็นเรื่องเหลวไหลและอ่านยากสำหรับผู้ดูในไซต์ของคุณ ในทำนองเดียวกันถ้าเส้นแบ่งห่างกันมากเกินไปในหน้าเว็บการอ่านปกติจะถูกขัดจังหวะและผู้อ่านจะมีปัญหากับข้อความของคุณด้วยเหตุผลดังกล่าว นี่คือเหตุผลที่คุณต้องการหาระยะห่างของเส้นตรงที่เหมาะสมกับการใช้งาน นอกจากนี้คุณยังสามารถทดสอบการออกแบบของคุณกับผู้ใช้จริงเพื่อรับความคิดเห็นเกี่ยวกับ การอ่านหน้าเว็บ
เมื่อไม่ใช้ Line-Height
อย่าสับสนระหว่างเส้นกับส่วนรองหรือขอบที่คุณจะใช้เพื่อเพิ่มช่องว่างในการออกแบบหน้าเว็บของคุณรวมถึงใต้หัวเรื่องหรือย่อหน้า ระยะห่างที่ไม่ได้นำและดังนั้นจึงไม่ได้รับการจัดการโดยความสูงของเส้น
ถ้าคุณต้องการเพิ่มช่องว่างภายใต้องค์ประกอบข้อความบางอย่างคุณจะใช้ขอบหรือช่องว่าง กลับไปที่ตัวอย่าง CSS ก่อนหน้าที่เราใช้เราสามารถเพิ่มข้อมูลนี้ได้:
p หลัก {line-height: 1.5; margin-bottom: 24px; } ซึ่งจะมีความยาวบรรทัดละ 1.5 บรรทัดระหว่างบรรทัดของข้อความสำหรับย่อหน้าของหน้าเว็บ (ส่วนที่อยู่ภายในองค์ประกอบ
ในเกือบทุกกรณีการดำเนินการนี้จะแสดงเหมือนกับ CSS ก่อนหน้านี้
สมมติว่าคุณต้องการเพิ่มช่องว่างใต้รายการที่อยู่ในรายการที่มีคลาสของ "services-menu" คุณควรใช้ขอบหรือช่องว่างเพื่อทำเช่นนั้นไม่ใช่ความสูงของเส้น ดังนั้นสิ่งนี้จะเหมาะสม
.services-menu li {