SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Location
    Roma
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Typography and other stuff...

    Hi, my first post, I'm going to begin a web project very small one, and I would ask to you somethings about the line-height and font-size css rules.
    So I read a lot of info but I'm still in confusion about it.

    I have enough work on my back to understand how the css works but what about the text I'm still a beginner :-)

    My question is:
    What is the relationship between the resolution and line-height?
    If I use a wrapper width 1024 px, what is the best line-height?
    Thanks a lot.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    1) Depends on hyow you set it.Line height is just related upon the font size. So the font size must be % to even have a change depending on resolution.
    2) Personal preference upon how it looks. I personally like the default.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Line height is the space between one line and another and you would set it to whatever suits your design the best but generally 1.5 times the font-size would give the text room to breathe. (1 x font-size would be to close and lines would almost run into each other.)

    Quote Originally Posted by RdG_2012 View Post
    My question is:
    What is the relationship between the resolution and line-height?
    Not really sure what you are asking as there is no real correlation between line-height and the resolution you use. Changing the resolution changes the way the whole page fits on the screen and affects everything in the same manner. Although I guess you didn't really mean resolution but perhaps width or something similar.

    If I use a wrapper width 1024 px, what is the best line-height?
    Thanks a lot.
    It depends on the size of the text. The wrapper size doesn't make much difference except that at large widths perhaps you wouldn't want the lines too close together as they would be hard to read. Longer lines are hard to read if they are close together so its best not to have lines that are too long or are too close together.

    You can find more specific details here:
    http://www.w3.org/wiki/Typography_on_the_Web
    http://baymard.com/blog/line-length-readability
    http://www.maxdesign.com.au/articles/em/



    Generally I set a line-height on the body of about 1.4 or 1.5 which gives breathing space to the text for most uses.

  4. #4
    SitePoint Member
    Join Date
    Feb 2012
    Location
    Roma
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for your answers, the question of the height line I posted was about the purely aesthetic funcion, to find harmony between the site layout and textual content.
    I was reading some articles about the Golden Ratio and Modular scales:
    http://www.alistapart.com/articles/m...ul-typography/
    http://en.wikipedia.org/wiki/Golden_ratio
    I was wondering what the actual benefits of these solutions can make your web project more attractive.
    For this reason I tried to find more information about relationship between, for example, the wrapper and the line height.
    My English is not so advanced to understand everything I read on the net and to explane my concept too!
    Sorry for that.
    Thanks for those useful links :-)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •