SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    so what are u opting for -> Font-size

    Hi there,
    I have been doing a lot of reading about accessibility and font related stuff......

    I have read a lot of different opinions, but it seems to me now the best option is to use absolute font sizes such as medium, large etc..........

    I would just like to hear what others are doing in regard to this.....I am interested in delivering the most accessible content, and hence would like to provide the best method for this......

    Previously, I was of the belief that using % was the way to go........but anyway, I look forward to hearing what you guys are doing to solve this issue....

    cheers

  2. #2
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was under the impression that medium, large, etc font sizing wasnt absolute, but relative, am I right?
    Wavelan

  3. #3
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey mvd - I have most of my text set at 12px Verdana, but my site may be quite lacking in terms of accessibility - it seems to hold together in N6 with text size increased to 150%

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wavelan,
    yes you are right........my bad......

  5. #5
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of specifying pixel font sizes in my site (e.g. 12px), I use point font sizes (e.g. 12pt). This way, users may resize the font (although in Mozilla browsers the font isn't fixed even when pixel sizing is used, it is in other browsers). That's my contribution to accessibility.

    -Colin
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Aes
    I use point font sizes (e.g. 12pt). This way, users may resize the font
    No, they may not. Using points as a font size measurement unit is just as bad as using pixels. I personally recommend using font size keywords, but even then it gets a little tricky. You might want to read this for more information.

  7. #7
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No solution is foolproof. However, if accessibility is your aim, then:

    * forget px
    * forget pt

    Instead use keywords or %. Ems would seem like a good idea, but in practice don't really work too well.

    Percentages can be made to work, but you have to be very rigid in keeping page structure together. You have to develop the style sheet and the page together, and ensure that you don't nest percentages, for example if you had

    DIV {font-size:70%;}

    any nested DIVs would be 70% of 70% etc until everything gets tiny.

    My approach has always been to start with IE, set to medium, then reduce/enlarge BODY font size in style sheet to desired amount. And continue with remainder of elements on page ...

    Then look at it in N4 - oh dear, everything looks bigger. So I then use an additional bit of CSS, loaded only for N4 which reduces the BODY size, and so on with other browsers:

    1. Base style sheet
    2. Tweaks for specific browsers

    This usally means that you can specify only using percentages, although in places you may need to hard-code px sizes for troublesome browsers like N4 (although on the basis that most people using accessibility add-ons like screen readers and magnifiers do so alongside IE, this should not be a problem)


    You can see this sort of thing in action at Nationwide's web site
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  8. #8
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use keywords. IE tends to display "font-size: small" a size larger than Mozilla, but I fix that using a voice-inherit hack:
    Code:
    div.content {
      padding: 2px;
      font-size: x-small;
      voice-family: "\"}\"";
      voice-family: inherit;
      font-size: small;
    }
    IE reads the font-size as "x-small" and then gets confused by the voice-family line and stops reading that style definition. Better browsers skip the voice-family line (getting back a proper value for voice-family from the voice-family:inherit bit) and then read the font-size as "small".

    This works for non-XHTML pages. I recently discovered that pages which cause IE to use "strict" mode (via a doctype) render the font size the same way as other browsers, so the above hack is unnecessary.

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lloydi wrote: "So I then use an additional bit of CSS, loaded only for N4 which reduces the BODY size, and so on with other browsers: "

    Aaaahh.. I got as far as finding %s and keywords would work in either IE or N**** 4 but not both, and gave up and used .pt. Not good. How do you do the Netscape-only trick? (Very simple newbie explanation, please - something like 'here is the code, here is where you paste it' would be lovely ) Is there any way this could be done with an existing external style-sheet? (There are lots of pages...)

    Thanks!
    I Ching with Clarity
    http://www.onlineClarity.co.uk

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :.:

    Pixels are the way to go!

  11. #11
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: :.:

    Originally posted by CosmicCatalyst
    Pixels are the way to go!
    Ahhh -- no, no, no!

  12. #12
    SitePoint Member SLStecker's Avatar
    Join Date
    Jan 2001
    Location
    Washington, DC
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    just to be on the safe side...

    I usually use .8em, so it would work on most browsers or at least allow users stretch the size in any way they want.

    Another option is to use javascript to recognize two separate .css files (one for IE and the other for different browsers).

    <script language="JavaScript">
    if (navigator.appName.indexOf("Netscape") != -1 && (parseInt(navigator.appVersion.substring(0, 3)) == 4))
    {
    document.write ('<link rel="stylesheet" type="text/css" href="ns.css">');
    }
    else
    {
    document.write ('<link rel="stylesheet" type="text/css" href="ie.css">');
    }
    </script>

    Just my two cents worth...
    --Suzanne

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :.:

    Yes, Yes. I've read it everywhere.

    Relative over Absolute.

    Pixels is the best size indicator.
    Last edited by CosmicCatalyst; Jun 12, 2002 at 21:12.

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Suzanne! I'll try the 'em' first. In case anyone doesn't know, Notetab does global find and replace across all open documents. It sounds as if I might be needing it...

    Are there any browsers which would have understood the css, but wouldn't recognise the javascript?
    I Ching with Clarity
    http://www.onlineClarity.co.uk

  15. #15
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Hilary
    How do you do the Netscape-only trick? (Very simple newbie explanation, please - something like 'here is the code, here is where you paste it' would be lovely ) Is there any way this could be done with an existing external style-sheet? (There are lots of pages...)

    Thanks!
    There are a number of ways you can get netscaep not to display certain styles.

    One is to use @import within your base stylesheet (this would be an external style sheet) - Netscape 4 ignores @import, quite safe with that.

    Syntax is as follows:

    @import url( /folder/filename.css );

    Another way to hide styles from Netscape 4 is to do this:

    --CSS--
    .foo1 { color: red }
    /* Tell NS4 to ignore these styles.... */
    /*/*/
    .foo2 { color: red }
    .foo3 { color: red }
    /* Okay, we can let NS4 see the rest.... */
    .foo4 { color: red }

    --XHTML--
    <p>If you are using Netscape 4....</p>
    <p class="foo1">This is red</p>
    <p class="foo2">This is <em>not</em> red</p>
    <p class="foo3">This is <em>not</em> red</p>
    <p class="foo4">This is red</p>
    <p style="/*/*/ color:red;">This inline-styled p is not red</p>


    This was taken from: http://www.v2studio.com/k/css/n4hide/

    Finally, the scripted method I mentioned:

    You need to identify Netscape 4 first - use the browser sniffer code here: http://www.mozilla.org/docs/web-deve...wser_type.html

    then you can have something like this in the head of your html:

    <link rel="stylesheet" href="yourbasestyle.css">
    <script language="JavaScript" src="/_common_scripts/browser-sniffer.js" type="text/javascript"></script> <!-- this being the content of the script detailed above -->
    <script language="JavaScript" src="/_stylesheets/browser-css-tweaks.js" type="text/javascript"></script>

    In your css tweaks file, you might have something like:

    /* ========= N O T N A V 4 ! =============*/
    /* Put all the things that break
    horribly in Netscape 4 in here! */
    if (!is_nav4) {
    document.write('DIV.legalText {font-sizex-small;}');
    document.write('DIV.mainContent {margin-left:15px;padding-right:20px;}');
    document.write("DIV.legalText {width:100%;}");
    document.write(".horizontalLink {border:1px #ADC3DE solid;padding:6px;}");
    }

    That's how I do it, at least.
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  16. #16
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (... a little exciting browsing later ...)

    Or maybe not .em. See
    http://www.alistapart.com/stories/fear4/5.html

    (I'm still trying to make things work in N*****4)
    I Ching with Clarity
    http://www.onlineClarity.co.uk

  17. #17
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah. Or argh, not sure which, it sounds on the complicated side. Thank you, though, lloydi.

    Has anyone invented a virus that seeks out all copies of Netscape 4 and updates/explodes them? How many people are still using the [fill-in-blank-here] thing anyway?
    I Ching with Clarity
    http://www.onlineClarity.co.uk

  18. #18
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Really depends on the site, but "globally" (at least on sites carrying the counter): 17818604 in April...

    http://www.thecounter.com/stats/2002/April/browser.php
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  19. #19
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: :.:

    Originally posted by CosmicCatalyst
    Relative over Absolute.
    Ha -- pixels are absolute! Relative sizing methods include %, em, and font keywords, plus some others.

    Originally posted by CosmicCatalyst
    Pixels is the best size indicator.
    No, it's actually one of the worst in terms of usability. I think that you've got some serious reading up to do.

  20. #20
    SitePoint Enthusiast rreames's Avatar
    Join Date
    Jun 2002
    Location
    Iowa
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On my personal site I don't worry about N4 or other older browsers that don't recognize the @import. I still give them all the content just not any "style".
    On my site for work I give N4 a basic style that it can handle and looks close to the site in new browsers. I don't try and make the site look exactly the same in all browsers it'll never happen. As long as they all get the content and function and navigate the same.
    If you use px for font sizes a style switcher is nice so IE users can resize the fonts, why is IE the only browser that can't resize px fonts?

  21. #21
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    browsers actually being used

    Like most web developers, I try to make my sites friendly to as many browsers as possible. This led me to the question "What is the breakdown of the browsers people are using on the internet?" This seemed to be a tougher question than I originally thought, but here's a link I think is invaluable for any web developer:

    Google's Zeitgeist

    It shows what browsers access Google, which I think is very good indicator of what's being used on the net...and some other cool stats!
    Last edited by ed644; Jun 14, 2002 at 09:36.

  22. #22
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking I do read.



    Taken from: http://www.alistapart.com/stories/fear4/


    1. Use pixels (not points, not ems, not percentages, not keywords) to specify your font sizes. Or:

    2. Use nothing. Do not specify font sizes at all, and let the browser's stylistic defaults and the visitor's preferences take care of the relative size relationships. This approach has been so well explained in The DAO of Web Design, that we won't bother to summarize it here; instead, we'll merely remind you of the link:
    www.alistapart.com/stories/dao/

    This is "GUERRILLA WARFARE" as the article suggests, and us concious creative designers believe in pixel fonts.

    ""Use pixels" is not what you want to hear, and it's not what the W3C recommends. But this is guerrilla warfare. These two approaches, pixels or "Dao," actually work. All others fail. More accessible options fail because not enough browsers are up to the job. Points, though widely used, fail because they were never intended to do the job. (More on that later.) A JavaScript solution that used to work fails as miserably as anything else in today's browsers. (More about that, later, too.)"

    Do you work for W3C? Kinda sounds like it.

    Read the article and tell me what you think mattj.

    "Give Me Pixels or Give Me Death" -- I always loved that one.

    Cosmic.

  23. #23
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so what either make all text the same size so its accessible to a larger group of people, or make it look good for a smaller group?? (Obviously depends on intended audience) I dont agree with that. I do use px for my site but thats just because im too lazy to change it over to em's.

    Em's have worked fine for me so far.
    Wavelan

  24. #24
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :.:

    Read the article.

  25. #25
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does alistapart still stand behing that article?

    it was written when netscape 6 was still in beta
    Wavelan


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
  •