SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member powellvu's Avatar
    Join Date
    Sep 2003
    Location
    USA
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text for different Screen Resolutions

    Does anyone have a workaround for multiple screen resolutions and text formatting.

    If I make a text size 10pt. a user with a 640x480 can read this without problems, looks big, but to someone with a screen res of 600x800 or 1240x1080 the text is very small. Like wise if I make it large for those with higher resolution, the folks with small screens will have very large text appearing.

    Any way of making this more user friendly without creating copies of pages?

    Thanks,

    Jamie

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look into large, x-large etc. You could also consider giving the text a value of xx% rather than a fixed height.


    Andy
    From the English nation to a US location.

  3. #3
    The knight who said ni! RockyShark's Avatar
    Join Date
    Apr 2003
    Location
    Rockhampton, Australia
    Posts
    699
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For a start, don't use absolute sizes (like 10pt), use small or x-small. (x-small is about 10pt in IE on Windows if the font size is set to the default 'medium')

    That way the user has control over how big the text is on their machine, regardless of what resolution they choose to use.

  4. #4
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Text sizing must read!

    Pixels... IE PC doesn't resize text. Example: body { font-size: 12px; }

    Em... IE PC displays unreadable small text when user browser is set to smaller and em is less than 1. Example: body { font-size: 0.80em; }

    Percentage usually works. Example: body { font-size: 80%; }

    Keywords usually works. Example: body { font-size: smaller; }


    Here is a table of font sizes:

    100% = 1.0em = 16px = 15pt
    95% = 0.95em = 15px = 14pt
    90% = 0.9em = 14px = 13pt
    85% = 0.85em = 13px = 12pt
    80% = 0.8em = 12px = 11pt
    75% = 0.75em = 11px = 10pt
    70% = 0.7em = 10px = 9pt
    65% = 0.65em = 9px = 8pt

    Some resources for further reading:

    Font sizes: http://hotwired.lycos.com/webmonkey/99/41/index3a_page3.html?tw=design

    Using relative font sizes: http://diveintoaccessibility.org/day_26_using_relative_font_sizes.html

    Accessible web text - sizing up the issues: http://www.mcu.org.uk/articles/textsize.html

    Font size: the 'font-size' and 'font-size-adjust' properties: http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props

    Readbility Test Tool: http://www.juicystudio.com/fog/

  5. #5
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From my experience I find specifying a font size in percentage in the style for body and then using ems after that works best. If you use percentages throughout then you can run into inheritance problems very easily eg
    p {font-size: 90%;}
    li {font-size: 90%;}

    <p>text here<ul><li>stuff</li></ul></p>

    With that the text "stuff" will be 90% of the text in the <p> tag that preceeds it.

    With the likes of x-small etc I find the text renders differently depending on what doctype you declare, only html 4.0 transitional seems to display it properly.

  6. #6
    The knight who said ni! RockyShark's Avatar
    Join Date
    Apr 2003
    Location
    Rockhampton, Australia
    Posts
    699
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about if you go
    p,li {font-size: 90%;}

  7. #7
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How to achive cross-screen-resolution, have a look here:
    http://www.thesitewizard.com/archive...relative.shtml

  8. #8
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Webnauts
    Em... IE PC displays unreadable small text when user browser is set to smaller and em is less than 1. Example: body { font-size: 0.80em; }

    Percentage usually works. Example: body { font-size: 80%; }

    Keywords usually works. Example: body { font-size: smaller; }
    percentage actually gives exactly the same problem as EM mentioned above. And this need not be too much of a problem if the developer is careful. Requires care to be used though

    As for keywords, well these are fine once you get around the fact that IE displays them differently from all the other major browsers, so if you want consistent sizes you will need a hack in your css.

    Personally I tend to go towards pixels on my personal sites, but often include a widget to resize the text.


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
  •