SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: IE font resize

  1. #1
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE font resize

    Since the day i started Web Design, i've been using pixels to for the size of fonts. I realized that this makes IE users unable to resize the font size in my web pages, but i just ignored it. I don't know how to work witrh percentages, especially when it uses relative sizes. So is there an easy way around? a hack maybe? a simple way to move from pixels to percentages?

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use 100.01% on the body element and then somewhere around 76% on the main page "container" - that gets a pretty good "medium" size for the page.

    (the 100.01% looks odd but it's to get around a bug - think it might have been in older Operas, can't remember!)
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The default font size in most browsers (including IE) is 16px. Few people will change this, but it's no guarantee.

    So if you want '13px' text, set the font size to 81.25% (13/16=.8125).

    If you use that for the base font size, and then want some text to be '11px', set it to 84.6% (11/13=.84615...). It's not very difficult.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought the 100.01% was to overcome a min-height on the body bug in Opera?

  5. #5
    Non-Member
    Join Date
    Sep 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    The default font size in most browsers (including IE) is 16px. Few people will change this, but it's no guarantee.

    So if you want '13px' text, set the font size to 81.25% (13/16=.8125).

    If you use that for the base font size, and then want some text to be '11px', set it to 84.6% (11/13=.84615...). It's not very difficult.
    wow! I've learned something new today! I will really keep this in mind!

  6. #6
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    The default font size in most browsers (including IE) is 16px. Few people will change this, but it's no guarantee.

    So if you want '13px' text, set the font size to 81.25% (13/16=.8125).

    If you use that for the base font size, and then want some text to be '11px', set it to 84.6% (11/13=.84615...). It's not very difficult.
    Very nice Tommy; just what i was looking for. Thanks

    But what if the font size of an element is bigger than the font size of its parent?

  7. #7
    Non-Member
    Join Date
    Sep 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sometimes when I want it bigger I usually go over 100%, is that fine? say... for one of the elements you'd give a 150% font-size?

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mPeror
    But what if the font size of an element is bigger than the font size of its parent?
    Same sort of math. If your base font size is 81.25% ('13px') and you want a H2 heading that is 18px, set it to 138.5% (18/13=1.384615...).
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    Same sort of math. If your base font size is 81.25% ('13px') and you want a H2 heading that is 18px, set it to 138.5% (18/13=1.384615...).
    Great. Thanks.

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just remember that there are no absolute guarantees. If someone has changed the browser default setting, or even done the Ctrl+scrollwheel thing, the pixel values will be different. However, the relative sizes will be the same.
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Zealot imouto's Avatar
    Join Date
    Sep 2004
    Location
    Gotham
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've been using the 100.01% thing myself but have wondered if that's still necessary anymore. Is the bug fixed in the latest version of Opera?

    Another method I've learned, in order to simply your math, is to start of with a base font of 62.5%. Why? Because 16px * 62.5% = 10px. Easier math to do later on in your stylesheet. You can read in more detail about this method here:

    http://maratz.com/blog/archives/2005...base-font-size

  12. #12
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    Just remember that there are no absolute guarantees. If someone has changed the browser default setting, or even done the Ctrl+scrollwheel thing, the pixel values will be different. However, the relative sizes will be the same.
    Which is entirely the problem making such 'assumptions'... but then, my reasoning on font sizes differs from most.

    px = pixels. Pixels SHOULD NOT CHANGE unless the user changes the resolution of their display - PERIOD... which is why pixels for font measurements is what should be used whereever you are putting text inside a container that cannot change size (like a fixed size graphical background)... IE does this RIGHT IMHO, and everyone else does it wrong.

    Points is based on the inch, so it SHOULD pay attention to how many pixels per inch the OS is set to. All browsers seem to do this one correctly - which should get interesting when Leopard hits. I like points because it has enough granularity to be useful without fractions (meaning no rounding errors), is generally handed off to the OS for font sizing, and if you use 9pt as the SMALLEST REASONABLE SIZED TEXT you will rarely even have people complain about being able to enlarge the text, since that's the default UI size in windows.

    EM is fine IF you declared a starting font size - but with IE, Opera, Firefox and Safari all starting out with different values, and firefox not increasing the size when the system metric changes - there's a LOT that can go wrong there. Introduce the rounding errors from the fractions to the equation, and the general layout headaches it can introduce across browsers I don't understand how most people can use it... But then I have the old school programming mentality - if you have to use a fraction or float you are using the wrong number system.

    Of course, if everything just resized like Opera does we wouldn't be having this discussion - which is usually my advice for the two or three visitors who say something about not being able to resize the text in IE - Go get a real browser. It's such a small percentage of users to begin with, and usually they are the more technically saavy who could HANDLE switching browsers. (Let's face it, most users don't even know you CAN do that!)

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree that fonts specified in physical units (px, pt, mm, ...) should not really change unless you use page zoom la Opera. That would be the right way to do it, if it weren't for one tiny detail ... all those misguided print designers who want 'control' over their layouts and thus specify font sizes in fixed units instead of learning how to design for the Web.

    Fact is, there are millions of people whose eyesight is not good enough to read that 10px light-grey-on-white text that the young designer (with 20/20 vision) thinks is so cool. They need to be able to change the text size, because there is no size that suits everyone. (Actually, font-size:100% ought to suit everyone, but that's another story.)

    Using a fixed size graphic as an excuse for trying to prevent users from making the text easier to read is (to me) a clear indication that the designer has not understand what Web design is all about. Visitors come to a site to read the content (text), not to look at the pretty pictures. The obvious exceptions are sites that focus on the design itself.

    But as long as the knee-jerk reflex for 90+% of 'Web' designers is to fire up Photoshop, we'll have to live with this problem. Those will often use pixel-sized fonts because their designs are too fragile to survive text resizing, and thus browser vendors must eschew logic and make the text resizable anyway. Because the browser vendors rightly care more for the users than for inadequately skilled designers.
    Birnam wood is come to Dunsinane


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
  •