Voting Chart

Total votes : 5

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

  •  
    Readability
  •  
    Layout
  •  
    Both
Back To Website Design Forum

line-height readability or layout?

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post May 22nd, 2011, 9:34 pm

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?
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 22nd, 2011, 9:34 pm

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8934
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post May 24th, 2011, 10:36 am

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.
Ozzu Hosting - Want your website on a fast server like Ozzu?

Page 1 of 1

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 123 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.