Voting Chart

Total votes : 5

Is the line-height CSS property considered to be a readability/typography or layout choice?

  •  
    Readability
  •  
    Layout
  •  
    Both

line-height readability or layout?

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I've been contemplating which category the line-height css property falls into; readability or layout? Consider the following scenarios:
HTML Code: [ Select ]
<p>Elit sed nascetur tempor urna ultrices est a nunc? Mattis, vel turpis nunc sed est turpis, in cras tempor, proin risus mid a pid, scelerisque, a duis nec velit a, magna. Penatibus urna parturient pulvinar? Nascetur, lacus placerat rhoncus ut odio urna dolor tincidunt in hac, ac proin elementum nec? Mus! Enim risus pulvinar, duis tincidunt! Sit est ridiculus rhoncus. Odio come massa?</p>
 
  1. <p>Elit sed nascetur tempor urna ultrices est a nunc? Mattis, vel turpis nunc sed est turpis, in cras tempor, proin risus mid a pid, scelerisque, a duis nec velit a, magna. Penatibus urna parturient pulvinar? Nascetur, lacus placerat rhoncus ut odio urna dolor tincidunt in hac, ac proin elementum nec? Mus! Enim risus pulvinar, duis tincidunt! Sit est ridiculus rhoncus. Odio come massa?</p>
  2.  

CSS Code: [ Select ]
p {
width: 200px;
line-height: 1.8;
}
 
  1. p {
  2. width: 200px;
  3. line-height: 1.8;
  4. }
  5.  

With the above code, line-height is used as a means of separating each line of the paragraph for better readability. However, the following code demonstrates something different:
HTML Code: [ Select ]
<header>
<h1>website.com</h1>
</header>
 
  1. <header>
  2. <h1>website.com</h1>
  3. </header>
  4.  

CSS Code: [ Select ]
header {
height: 50px;
}
 
h1 {
line-height: 50px;
vertical-align: middle;
}
 
  1. header {
  2. height: 50px;
  3. }
  4.  
  5. h1 {
  6. line-height: 50px;
  7. vertical-align: middle;
  8. }
  9.  

This will allow the H1 tag to sit vertically in the middle of the header, something more congruent with a layout choice. These are somewhat primitive examples, but I think they illustrate my point. So which is the line-height property more consistent in; readability, or layout?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

When it comes to text in paragraphs like you mentioned, the primary use of it would probably be for readability. It still may be considered layout, as it does affect the overall style of the website as well. However, I have use the line-height attribute in many other places than just paragraphs, for example to help with navigational structures, background images in lists, icons in legends, ordered lists, radio buttons, and much more. I voted for both, because I have used it for both readability and layout issues.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: ScottG and 69 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.