SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    font size and min-max widths

    I have a webpage layout on my beta website, I'm using t-shirt font sizes to maintain consistency and accessibility. The font size differential between IE and FF is pretty staggering though. Both are set to medium, but FF is coming out a smidge smaller than I want and IE looks like large print.

    I'd considered using an IE stylesheet, though I've done pretty well at designing the site without resorting to browser specific style rules so far. I hate to break it. Is it necessary? Is there a better solution for this?

    Also, since the FF text is smaller it's fitting quite a lot of text on a single line. The line length is uncomfortably long to read. Since it's an FF problem only, I was considering using a max-width on the body. Is that a good solution as far as best practices go, or does someone have a better one? Also, I know that IE doesn't support min/max-height/width but does it cause any problems?
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I personally set the font size on my body element to 85% and the line-height to 140% and use EM for the layout. This has proven to be very beneficial to people running very large monitors with insanely high screen resolutions with their .dpi settings at 120 (or 100 if using Linux).

    As far as max-width, about 1150px should do it. Just bear in mind that IE 6 doesn't support it, while IE 7 does.

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

    Both are set to medium, but FF is coming out a smidge smaller than I want and IE looks like large print.
    Sounds like you are working in quirks mode (i.e no doctype or doctype without uri) because ie6 and firefox come out at the exact same size assuming you haven't changed any default settings.

    If you aren't using a doctype (and why not) then IE will be in quirks mode and in quirks mode it renders the font size keywords out of sync and applies the next size up in error.

    See the yahoo font size reset for a consistent base but you must use a valid doctype.

    You can use min and max width and IE6 and under will just ignore it without doing any harm. Its a good idea to set a min-width if your test is unconstrained and full width because long lines are hard to read. This is usually a design issue anyway and one that you should have thought about beforehand.

  4. #4
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The page not only has a doctype but validates as transitional XHTML 1.0... not that there can't still be plenty of markup problems.

    Do you set anything else for default font size or just the percentage? I use ems for everything except images (never got them to work well except using height and width in px). Definitely sounds like I could use a line height in there, and I'll play around with a percentage font-size instead of keywords.

    Feel free to argue, this is exactly why I asked the question. I had it drilled into me that anything but keywords won't scale well. And if it outputs at 16px, how do you cope with different screen resolutions? It seems like that would cause even more scaling problems then I have now.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

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

    See the Yahoo font reset link that I gave in my above post as it will allow you to set the size uniformly assuming that browsers are set at their defaults (of which of course there is no guarantee).

    Regarding your statement that IE is rendering much larger than Firefox then I have to disagree as I have taken a screenshot of the link in your sig and the result is text of exactly the same size.

    http://www.pmob.co.uk/temp/images/ff-ie.gif

    If you were referring to some other page then perhaps you could provide a link but the screenshot above shows the fonts at exactly the same size.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I had it drilled into me that anything but keywords won't scale well
    Keywords were introduced as a way to scale the text uniformly within the browser but this does not mean that all browsers follow the same parameters. There are guidelines but they do not specifically state that all browsers use exactly the same size.

    e.g.
    Quote Originally Posted by w3c
    On a computer screen a scaling factor of 1.2 is suggested between adjacent indexes; if the 'medium' font is 12pt, the 'large' font could be 14.4pt. Different media may need different scaling factors. Also, the user agent should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another.


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
  •