SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing the base font size without the pain and struggle?

    Ok, here's my situation. Currently, the base font I have is 11 pixels Verdana. I need to switch the base font to 12 pixels Arial.

    Here's my stylesheet now:
    Code:
    body {
        font: 100%/1.6 Verdana, sans-serif;
        padding: 8px;
    }
    #container {
        font-size: 0.688em; /* 11px */
    }
    Unfortunately, I can't just make a simple one-line change in the CSS because I've used em's to define all measurements (ie, font-size, margins, paddings, everything). If I were to make such a change all my em measurements would go out of whack and I'd have to find every single instance of an em and recalculate it.

    So my question: Is there an easier way to go about this? Is there some technique that'll allow me to make such changes without having to manually re-edit thousands of lines of CSS code?

    All my em measurements have 3 decimal points, so it's not an easy task to deal with this manually.

  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)
    Well unfortunately (I can't think of any solution) I think you may be stuck with recalculating everything (unless of course you set the #container to be font-size:12px, though?)

    Though setting px font sizes is a bad idea so I think you are stuck here .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Well unfortunately (I can't think of any solution) I think you may be stuck with recalculating everything (unless of course you set the #container to be font-size:12px, though?)

    Though setting px font sizes is a bad idea so I think you are stuck here .
    I was afraid you'd say that. I should have come up with a system to deal with this. Even if I have to do all this manually, after I'm done I still won't have a system in place in case I later decide to go to Georgia 13px.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    What happens if you try

    Code:
    #container {
        font-size: 75%;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Unfortunately, I can't just make a simple one-line change in the CSS because I've used em's to define all measurements (ie, font-size, margins, paddings, everything). If I were to make such a change all my em measurements would go out of whack and I'd have to find every single instance of an em and recalculate it.
    Changing the parent will automatically change all the children based on the parents font-size. Isn't that the main point of using ems?

    You don't need to re-calculate the children's size unless you don't want them to change even though you have changed the parent. Then that begs the question why change the parents base size if you don't want the children to change?

    With ems your whole layout will scale accordingly and the parent child relationship you originally created will always be maintained. There may be some rounding errors if you have gone for pixel perfection but otherwise scaling should be consistent enough.

    As Ryan said if you want to maintain independent sizing then use pixels but lose the scalability factor.

  6. #6
    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)
    Quote Originally Posted by ralph.m View Post
    What happens if you try

    Code:
    #container {
        font-size: 75%;
    }
    Percentages and em's are exactly the same. THe only difference is the decimal place(s) .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Percentages and em's are exactly the same. THe only difference is the decimal place(s) .
    It could seem so.

    The em is based on the element's current font size, and can be used for practically any property length. (In IE user font changes is also applied to em values from body down, resulting in an em-multiplied size change, until the em-chain is broken with a percentage value.)

    The percentage is based on the inherited font size. (Used for html or body font-size the em-multiplying in IE never occurs.)

    Now one can argue that for font-sizes the current size is the inherited size.

    Edit:

    The 75% suggested by Ralph would translate to the base size of 12px, just as the OP wanted, witch I assume was his point.
    Happy ADD/ADHD with Asperger's

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Erik
    The 75% suggested by Ralph would translate to the base size of 12px, just as the OP wanted, witch I assume was his point.
    Yes but I think the op wanted to change the base size to 12px without the children changing their sizes (e.g. if a child had a computed size of 10px then it would remain 10px). Changing the parent changes the child - which after all is the point of ems anyway However I don't understand why you would want to change the base font size if you didn't want anything else to change so I'm a little confused anyway and may be barking up the wrong tree again.

  9. #9
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by champ View Post
    ... Even if I have to do all this manually, after I'm done I still won't have a system in place in case I later decide to go to Georgia 13px.
    Please provide the full code or better a link, and we can see if there is a way to implement a "dynamic" font-size base without too much changing.
    Happy ADD/ADHD with Asperger's

  10. #10
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    What happens if you try

    Code:
    #container {
        font-size: 75%;
    }
    I think that might work. Thank you.

    Quote Originally Posted by Paul O'B View Post
    Changing the parent will automatically change all the children based on the parents font-size. Isn't that the main point of using ems?

    You don't need to re-calculate the children's size unless you don't want them to change even though you have changed the parent. Then that begs the question why change the parents base size if you don't want the children to change?
    My goal was to change the base font size that would cause the children to properly scale without actually changing the child measurements within the CSS code. I think Ralph's suggestion will accomplish this.

    Quote Originally Posted by Paul O'B View Post
    With ems your whole layout will scale accordingly and the parent child relationship you originally created will always be maintained. There may be some rounding errors if you have gone for pixel perfection but otherwise scaling should be consistent enough.
    I actually did go for pixel-perfection using em's. Since I calculated measurements exactly to 3 decimal points, my em setup would look exactly the same as if pixels were used, assuming the user left his browser font size at the default. Anyway, there'll probably be some pixel imperfections using em's here and there, but I'll just have to deal with it.


    Quote Originally Posted by Paul O'B View Post
    Yes but I think the op wanted to change the base size to 12px without the children changing their sizes (e.g. if a child had a computed size of 10px then it would remain 10px). Changing the parent changes the child - which after all is the point of ems anyway
    You're correct. That's what I was looking to achieve. It looks like Ralph's 75% body font size change will achieve that.

    Quote Originally Posted by Paul O'B View Post
    However I don't understand why you would want to change the base font size if you didn't want anything else to change so I'm a little confused anyway and may be barking up the wrong tree again.
    Well, I want the font size to change visually in the browser without actually having to dig in the code and alter every instance of em's within the CSS file.

    The way I have it now, the body has a width of 100% and I calculate all em measurements from that. By using 75% in the body it looks like I can scale things up from 11px to 12px while leaving the hundreds of em measurements as-is. I'll essentially be faking it in the style sheet, but it may work.

    Thanks to everyone for their feedback in this matter.

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That comment that the font is currently 11px is incorrect to start with. For some people the font size of that content will already be 12px - it depends on how each visitor has their browser set up.
    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="^$">

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    My goal was to change the base font size that would cause the children to properly scale without actually changing the child measurements within the CSS code. I think Ralph's suggestion will accomplish this.
    Yes everything will scale accordingly and you only need to change the base size - which is what ems were designed for

    I actually did go for pixel-perfection using em's.
    lol - It's not possible cross browser as the rounding routines between browsers are different. Some round up and some round down and some like moz keep a running total of the fractions. Just because you've worked something out be 11.99 it may get rounded down to 11 and then the next calculation may be based on 11. However some browsers keep the fraction and work on that again so there is quite a lot of room for differences between browsers.

    Also remember as Stephen says above you can't guarantee what the users system base size is anyway.

    However the relationship between sizes still will be maintained which is the important thing.

  13. #13
    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)
    To probably get pixel perfect with flexible layouts such as ems, you'd probably have to use JS to detect each em value and then impliment your own rounding system.

    Not feasible for real sites though .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    This is kinda a confusing question, because it implies that the layout had no flexibility to begin with. even if the code is set to haves specific base font size, any user can and will change this size.. so if you used em when you needed FIXED px size your layout will be awfully fragile.

    So the question is is the PAGE a fixed size and then internal elements were sized in ems?

    a quick fix might be to employ min-width/height to set constraints for when you or a user changes the base font size. this may save you the web-math.


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
  •