SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 43
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    For standards, do you use pixels or points?

    I was reading this article on accessibility, http://www.mardiros.net/design-guidelines.html , and it mentions that when designers use pixels, it makes it difficult for browsers to alter the size of the text. Well, would you know, I tested it on my site and sure enough, you CAN'T change the size of the text.

    Do most of you choose POINTS as your method of text size?

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    I think most designers today use css. For text, the accessibility standards are px,pt, em (the size of one letter on your user's browser) or percentages.

    I prefer to use percentages.

    example: <p style="font-size: 120%>

    is 20% larger than the user's regular font.

    The WDG has an excellent tutorial on css. If you are interested try, http://www.htmlhelp.org/reference/css/
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    got the thenoodleincident.com, read.

    I use % + em, nice.

    You can't chagne points in IE either.

    Douglas
    Hello World

  4. #4
    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)
    Does that mean x-small, small etc are not recommended for accessability?

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RockyShark
    Does that mean x-small, small etc are not recommended for accessability?
    Those are fine. The only measurements I stay away from are pixels and points. I would use pixels if IE resized text set in pixels properly like it does with ems or percentages, and I only use points in print stylesheets since points are meaningless and unreliable on screen.

  6. #6
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RockyShark
    Does that mean x-small, small etc are not recommended for accessability?
    The problem is that IE5 makes them a different size of everyone else (1 size bigger I believe).

    pt are useful when crreating a printer style sheet as that is a standard unit for printed text.

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BenANFA
    The problem is that IE5 makes them a different size of everyone else (1 size bigger I believe).
    That's easy enough to fix:
    Code:
    body {
      /*feed the dummy rule to IE*/
      font-size: small;
    }
    html > body {
      /*the rule for real browsers*/
      font-size: medium;
    }

  8. #8
    Free your mind Toly's Avatar
    Join Date
    Sep 2001
    Location
    Panama
    Posts
    2,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shyflower
    I prefer to use percentages.

    example: <p style="font-size: 120%>
    Hmmm... Never been able to to use percentages, I don't know why. Especially with height.
    Community Guidelines | Community FAQ

    "He that is kind is free, though he is a slave;
    he that is evil is a slave, though he be a king." - St. Augustine

  9. #9
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    That's easy enough to fix:
    Code:
    body {
      /*feed the dummy rule to IE*/
      font-size: small;
    }
    html > body {
      /*the rule for real browsers*/
      font-size: medium;
    }
    True, but when you have different sizes on different elements you start having to use something a kin to the box model hack. This makes the CSS quite messy to read and I think for the sake of readability using % or em is equally good.

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BenANFA
    True, but when you have different sizes on different elements you start having to use something a kin to the box model hack. This makes the CSS quite messy to read and I think for the sake of readability using % or em is equally good.
    I agree (I use a mix of % and em on most sites I create) but some people just love using those keywords .

  11. #11
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An em is specific to a proption of the font size, the percentage can refer to a proportion of the distance across or down the screen OR a font sixe, depends on the context. I think that using both em and % as appropriate is the minimum way to go, and forget pt except for print styles and use px as little as possible - and mainly in borders, margins and (if pushed) padding.

    Other people will disagree. I think it's a good starting rule.
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by John Colby
    An em is specific to a proption of the font size, the percentage can refer to a proportion of the distance across or down the screen OR a font sixe, depends on the context. I think that using both em and % as appropriate is the minimum way to go, and forget pt except for print styles and use px as little as possible - and mainly in borders, margins and (if pushed) padding.

    Other people will disagree. I think it's a good starting rule.
    Well, I think pixels are fine as long as you give users the ability to resize text via other means (i.e. stylesheet switchers). Otherwise, IE/Windows users will have an inaccessible page. So in short: if you set your fonts in pixels, let people change it somehow.

  13. #13
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    /*the rule for real browsers*/

    thats funny.

    On a different note, how can you use % AND em at the same time?

    Vgarcia, i know you use a style sheet method of resizing, so do you offer that on TOP of already using EM's. Sorry, I haven't looked at your stylesheet to notice.

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jag5311
    [/font]
    thats funny.

    On a different note, how can you use % AND em at the same time?
    Yeah, that works just fine. I do it all the time. Usually I set the body in percentages, and other elements like headings or links in ems.
    Quote Originally Posted by jag5311
    Vgarcia, i know you use a style sheet method of resizing, so do you offer that on TOP of already using EM's. Sorry, I haven't looked at your stylesheet to notice.
    Yes actually, I use % and em sizes on my site for all 3 active stylesheets. The only rule that actually changes between the stylesheets is the body rule (the text gets larger and contrasts more with the background depending on the selection).

  15. #15
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not just make the whole thing in either a % or Em's. SHouldn't it all be relative. If the user wants the body text increased 1 size, shouldn't everything else me made 1 size also?

    I really do want to learn more about this, because I want to do what is correct.

  16. #16
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    on a related note, IE (at least version 5.5 and before...haven't tested in 6 yet) has a huge problem with completely em sized texts when the user sets his/her text size to something other than the default "medium" setting. it grows/shrinks text in steps that are far too steep, making a site that reads fine on default unreadable on "smaller", and far too big on "larger".
    i've started feeding IE pixel values for text, after various problems i was having. yes, it's less accessible, as IE can't change the size of the text now...but my rather pragmatic view of late has become that there is also a certain onus on users with disabilities, not just on the developers....if they need my site's text to resize, they should use a modern browser that supports text zooming and/or the disabling/switching of stylesheets. you can't use a screwdriver and then complain that it makes a lousy hammer...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  17. #17
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Redux, try this link: IE font Sizes

    Douglas
    Hello World

  18. #18
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jag5311
    Why not just make the whole thing in either a % or Em's. SHouldn't it all be relative. If the user wants the body text increased 1 size, shouldn't everything else me made 1 size also?
    Right, that's how my stylesheet works. The default body style is set to 73% or so, then the medium text is 85% and the large text is 95%. All of the other text scales accordingly, since they inherit and calculate from the body{} styles.

  19. #19
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I use px all the time, except for <P> then I use em.


  20. #20
    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:

    Care With Font Size: http://www.w3.org/2003/07/30-font-size

    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

    What's wrong with the FONT element? http://www.mcsr.olemiss.edu/~mudws/font.html

    Size matters: http://www.alistapart.com/stories/sizematters/

    Making Text Legible: http://www.lighthouse.org/print_leg.htm

  21. #21
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Edmonton
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does web designer worry about their website If someone re-set the text size on their browser, like from medium to large? Their web would be a total mess.

  22. #22
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Edmonton
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am saying this..like a font size is already 12 px.

  23. #23
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so according to that table, if I want the font on my website to appear as 12pt, then I set the % to 85?

    I just came on here to ask, what determines how the % is used, in compared to what. but that table makes a little sense.

  24. #24
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jag5311
    so according to that table, if I want the font on my website to appear as 12pt, then I set the % to 85?

    I just came on here to ask, what determines how the % is used, in compared to what. but that table makes a little sense.
    % is always in relation to the font size of the containing element. For the body element it is relation to the default font-size of the browser.

    Since in many modern browsers you can at least set the font, and often set a user style sheet, you have no garunttee that 85% = 12pt, anywhere on the page. It means exactly what it says, 85% of whatever the current size is.

    I suspect that the table is true for IE defaults (or may be some other browser).
    Quote Originally Posted by quicksam
    does web designer worry about their website If someone re-set the text size on their browser, like from medium to large? Their web would be a total mess.
    If you design properly then resizing the text will not effect the layout. For instance in the next incarnation of the site I maintain I have a menu on the left hand side. The menu text has a proportional size so that the user can resize it if they wish. In order to maintain the menu layout as I wish the width of the menu div is set in em's so that if the user does resize the text the menu div will change width accordingly.

    Yes the paragraphs of content in the main content area of the page will be bigger (longer) but that is what the user has chosen. Better to leave the choice in the users hand so that they can make the text a size that they are able to read than loose users because they can read your website.

  25. #25
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Real browsers, such as Opera, Mozilla/Firebird, Netscape, Camino, etc, let the user override the font sizes in the document.

    IE does not contain this feature. In IE, resizing the fonts will only work by changing the size of the default font, which will only relative font sizes. In my humble opinion, I don't think that this is a good enough reason not to use px measurements for font sizes. If users really want to override the font sizes, they can use a browser with better accessibility.

    Here's some tips. You may not agree with everything here, because most of them are opinions.

    - Do not use absolute measurements such as pt or cm on screen. These measurements are for print media. Different displays have different default resolutions, and the resizing needed won't always look good.
    - Use px measurements on screen where applicable.
    - Do not use px measurements for print media. If you use px measurements, use a separate stylesheet for print media.
    - For fonts, use keywords such as small or medium whereever possible, as these work on all visible media. Use px measurements on screen, and pt measurements in print, when you would like more accurate control of font size, at the expense of less flexibility from the user's perspective.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog · Twitter · Contact me
    Neon Javascript Framework · Jokes · Android stuff


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
  •