SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    setting fonts with pixels

    I was hoping someone could share some experience with setting font in pixels. Is it true IE does not support font resizing (with ctrl +/-)?

    Also, if a layout doesn't "break" when resizing with em specified font sizes, would it also not break with pixel font sizes?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE7 and under don't allow the text to be resized from the browsers controls when the font is specified in pixels (although IE7 does have a zoom facility).

    Most other browsers will allow the text to be resized whatever the unit.

    A layout will break if an element has a fixed height and width in pixels and contains text content. If the text is resized then it grows bigger than the container and then overflows. If the element didn't have a height (e.g. it's height was dictated by content) then the layout would grow vertically with the resize although it would look different.

    If you size the element in ems and the font in ems then the layout grows proportionately with the text resize and looks much the same but just bigger.

    Here is a very old example showing the differences.

    http://www.pmob.co.uk/temp/emdemo.htm

    Sizing the font in pixels is bad for accessibility because there are still many IE6 users around and they need to be able to change their text size to suit.

  3. #3
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, IE doesn't support font resizing in pixels even though they're technically a relative unit of measurement. I tend to disagree, that any layout will eventually break with font sizes in em's, however, a properly designed site using em's won't break until a really huge font size.

    /*EDIT -- dang it, Paul beat me. Paul's explanation is a bit better anyway and what I was attempting to get at*/
    Ryan Butler

    Midwest Web Design

  4. #4
    SitePoint Zealot c.t.c.'s Avatar
    Join Date
    Apr 2007
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As the others said, IE6 is the real stumbling block when it comes to sizing text in pixels. The latest versions of IE, Firefox, and Opera all favor a page zoom over text resizing in their user interfaces. As more user agents move toward a full page zoom, we will need to re-evaluate how we size text on the web. However, I'm addressing only desktop browsers. I don't have experience resizing text/pages on mobile devices and other user agents.

  5. #5
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the latest browsers are moving towards page zoom.. what is page zoom's advantage over text resizing?

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    what is page zoom's advantage over text resizing?
    Think of zoom as a magnifying glass, it is going to enlarge a div along with the text in it.

    Say for example you have a 2 column site with fixed width navigation sidebar of 150px, if you have a long word and the text size is increased 2-3 times it will spill out.

    With zoom it is magnifying the sidebar and the text, a quick test of a fixed width site of 775px in Opera with zoom of 120% at my resolution of 1152 x 864 keeps it intact but fills my whole screen. A step up to 150% creates a horizontal scroll bar for me.

    The advantage I see is that the site will not break.

  7. #7
    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)
    The difficulty with zooming is that it depends how well the browser does it.

    Opera and Firefox zooms seem to work fairly well. IE7 however.... I haven't bothered checking recently to see if it's fixed but, for instance, it won't zoom background images on the body element - which breaks layouts immediately.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    it depends how well the browser does it
    Same story as always, just a different subject. It's a viscous circle were in I guess.

    As you said though, the good browsers seem to work fairly well. I wasn't aware of IE7's body image issue, I can see how it would break a layout that was dependent on that image though.


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
  •