Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    relative font sizing.

    Just wondering how to set my fonts to relative sizing with css. I dont really know much about relative sizing. Does it change the look of the fonts at all?
    Can I use css? Or do I have to set relative sizing for each page?

  • #2
    New to the CF scene
    Join Date
    Jan 2007
    Location
    127.0.0.1
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    font-size: x%

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,304
    Thanks
    28
    Thanked 276 Times in 270 Posts
    You use relative font sizing by using relative units:
    • Percentages are relative to the current font size. If no font size has been specified yet, then they’re relative to the user’s default font size.
    • Ditto for ems.
    • Exs are relative to the x‐height of a font. If the x‐height can’t be calculated, this ends up being half an em.
    • Pixels are relative to the resolution of the viewing device although, in practice, I believe that browsers use a predefined resolution rather than obtaining it from said device.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Just a note on accessibility: pixel based font sizes can't be made larger/smaller in Internet Explorer.

  • #5
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Let's not forget xx-small, x-small, small, medium, large, x-large, xx-large. These resize nicely across browsers, too.
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #6
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Using the "em" is by far the best.

    What you do is set your body tag default font and size, and then from there all other fonts should be relative to that site.

    For example:

    body { font: 12px Arial; }

    and then all your other font sizing would be either 0.5em or 1.25em etc., all relative to the original 12px size.

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by smkied View Post
    For example:
    body { font: 12px Arial; }
    and then all your other font sizing would be either 0.5em or 1.25em etc., all relative to the original 12px size.
    That would not be a good idea. In IE, as said, text having font-sizes set with the pixel unit will not scale under text-zoom. It won't help that you set the font-size for child elements using the em unit because they will still be based on what you have set for the body element (which is pixels). Advice is to not use pixel units at all.

  • #8
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by koyama View Post
    That would not be a good idea. In IE, as said, text having font-sizes set with the pixel unit will not scale under text-zoom. It won't help that you set the font-size for child elements using the em unit because they will still be based on what you have set for the body element (which is pixels). Advice is to not use pixel units at all.
    QFT.

    When I work with ems, I start like so:

    Code:
    body {
        font: 62.5%/1.4 "Lucida Grande", "Lucida Sans", Verdana, sans-serif;
    }
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,304
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by kewlceo View Post
    Let's not forget xx-small, x-small, small, medium, large, x-large, xx-large. These resize nicely across browsers, too.
    Looks like I forgot about these. For completeness, keywords are relative in the same way as percentages and ems (and, sometimes, exs) with the medium value being the default font size if an explicit font size has not yet been specified.

    Looking at the spec, I’ve just realized that the keywords are referred to as absolute sizes. That seems rather odd since they are relative to an existing font size.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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