SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Line-heights and DPI

    SitePoint Members,

    Someone was telling me about my site,
    "Probably the biggest issue, and likely explaining why it's a bit screwy looking on my large font/120dpi system, is your lack of declaring line-heights when you change font-size."

    Line-heights are best used (according to what I found online) on block level elements. Well like most everyone else, I have nested divs on my site. Do I really put a line-height on each div? I thought maybe I'd find a tool that would show what my site looks like at different dpi, like 120. Do you know of an online tool that would do this, or is that something you rig by changeing the screen resolution on the computer.

    According to what I found online, div{line-height:3}, is an example of how I handle the css for line-heights.


    Thanks,

    Chris

  2. #2
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    if you would use pixel for the size it should work fine on all resolutions.
    for example: line-height:18px; font-size:14px;

    i would probably declare a font style for the body to be used as default. then i would override as needed.
    for example
    body {color:#3c3c3c;line-height:18px; font-size:14px; font-family:Arial,Verdana;}

  3. #3
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webcosmo View Post
    if you would use pixel for the size it should work fine on all resolutions.
    for example: line-height:18px; font-size:14px;
    But if you use px for font-size, wouldn't the text be relatively huge on a small 640px device and relatively tiny on a large 1280px device?

    I just use em's for font and line height sizing. After all, the user has the final say in the font size they want because you can't stop the user over-riding your css settings in their browser.

  4. #4
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sounds reasonable, but this guy
    http://www.richinstyle.com/masterclass/fonts.html
    says use "<number>" because using just a number causes less problems with nested block elements.


    Thanks,

    Chris

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,803
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by webcosmo View Post
    if you would use pixel for the size it should work fine on all resolutions.
    for example: line-height:18px; font-size:14px;
    That would make the text microscopic for some visitors and gigantic for some others since a pixel has no fixed size and there could be a million pixels in a metre or a million metres in a pixel depending on screen resolution.

    That is the one measure to always avoid as much as possible when working with the web.

    You can add a line-height to any font size declaration by adding a slash followed by the line height multiplier (assuming you don't want the line height to simply scale with the text).

    Line heights are just a number - 1 = single spaced, 2 = double spaced etc.

    So for standard sized text you want double spaced you'd specify 1em/2
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Felgall,
    Not to get off the subject, but does avoiding pixel units also apply to image dimensions too? If so, what other uints are available for images?

    Thanks,

    Chris

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,803
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Felgall,
    Not to get off the subject, but does avoiding pixel units also apply to image dimensions too? If so, what other uints are available for images?

    Thanks,

    Chris
    Since images have their own size built in there is no need to reference their size in CSS at all.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Felgall,
    What about html? Can graphics referenced use only px: <img width="139" height="132" src="/xyz.jpg" >? Wait a second there's no units needed for graphics in html. Well I guess that answers that question.

    Thanks,

    Chris

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,803
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Wait a second there's no units needed for graphics in html. Well I guess that answers that question.
    In fact you are not allowed to specify units when reserving space for the image in the HTML. Also you only really need to specify the image size in the HTML if it is a large image that is going to take a long time to load or where you need to make sure that when the image doesn't load that the alternate text only uses the same space as the image would have.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Felgall,
    I lost my way on that image size units question because I was hoping there was a way to keep image size normal on high resolution (1280px) screens.

    Thanks,

    Chris


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
  •