SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    applying the spf lotion V + E + R + T's Avatar
    Join Date
    Apr 2001
    Location
    USA
    Posts
    306
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Which font size to use? pt, px, etc.

    I'm puzzled on which font size I should use, pt, px, or just the number.

    Any suggestions on what would be the best font size in terms of the user's screen, res, etc?
    Proud SPF member since 2001!

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    the best font size for the user is for you to set none at all
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    you can also use words, which can change size depending on browser font-size preferences;

    font-size:
    xx-xmall
    x-small
    small
    medium
    large
    x-large
    xx-large

    smaller (smaller than parent element)
    larger (larger than parent element)
    n% ( percentage of parent element )
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    well, the problem with those choices, mark, is they don't work the same in all browsers

    and if you set the "main" font size at all, you are overriding the user's choice, and that's wrong

    however, if you use them for relative sizes, that's fine -- for example, H1 should be larger than the main font size, H2 somewhat smaller but still larger than the main font size, and so on

    but you shouldn't set the "main" font size at all

    that would be overriding the user's choice, and like i said, that would be wrong


    i realize that i will probably draw a lot of flack from designers who insist that they know better than the users what size the font in their designs should be, but i still think it's wrong

    an analogy, somewhat simplistic but very similar -- you set the volume on your tv to a comfortable level, then along comes a commercial where the sound is just way too loud

    annoying, isn't it? why do the people who create commercials do that? there's a good reason -- they think you won't hear it as well from the kithcen or bathroom

    same with font size on web pages -- designers think they won't be able to hold your attention with their content, so they try to cram more and more of it into a smaller and smaller space, and resetting the font size is how they do it

    just like you have to turn down the volume on commercials when you don't actually leave the room, some people actually have to turn up the font size to compensate for some sites which set the font size too small

    ever notice how when people talk about setting the font size on a web site, it's always smaller than the default? ever wondered why?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  5. #5
    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)
    Yep - but by using x-small, small etc the user can still adjust the size, as they're only relative terms.

    They don't work the same on all browsers, but hell, what does?

  6. #6
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RockyShark
    They don't work the same on all browsers, but hell, what does?
    Too true!!! I've always used pt or px although I do realise its not very good for accessibility and usability issues. I think you need to define your market audience when designing the site. If you are making a website for the general public, then you really need to address the above problems. Although, if you are creating a design website showcasing your designing ability, the majority of visitors should have a good eye so small fonts shouldn't be that big an issue. That doesn't mean that you shouldn't think about it, but I see it as less of a crime when its a design intensive website rather than content heavy.

    That's what I think anyway...
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  7. #7
    SitePoint Addict Pace's Avatar
    Join Date
    Sep 2003
    Location
    Manchester - UK
    Posts
    298
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could always use mm
    Slick!

  8. #8
    SitePoint Enthusiast jianson's Avatar
    Join Date
    Jul 2001
    Location
    Here and there ...
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use css work arounds for almost all the issues with browsers recognizing the xx-small, x-small, etc font-sizes differently.

    The following url represents the best explanation I've come accross to date.
    http://diveintoaccessibility.org/examples/fontsize.html

    John I'anson-Holton
    Last edited by jianson; Apr 7, 2004 at 18:25.
    John I'anson-Holton
    Public Speaking

  9. #9
    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)
    Quote Originally Posted by jianson
    The following url represents the best explanation I've come accross to date.
    http://diveintoaccessibility.org/examples/fontsize.html
    Geeze - I don't know whether to laugh or cry after reading that link. What a headache just to get uniform text sizing at user default settings!

    Maybe I'll just do both...

  10. #10
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by RockyShark
    Geeze - I don't know whether to laugh or cry after reading that link. What a headache just to get uniform text sizing at user default settings!
    well, that's the point, it does attempt to get a uniform text sizing but not at the user default

    one sets font size to the user's default by not setting font size at all

    it's kind of a zen thing, and designers have a real problem with it

    i've linked to that page before myself, as an example of what not to do

    that way lies madness

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  11. #11
    ☆★☆★ 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 bigsi
    Although, if you are creating a design website showcasing your designing ability, the majority of visitors should have a good eye so small fonts shouldn't be that big an issue.
    I don't know about you, but most everybody I've worked with/for has some degree of vision problems. If they look at my site, I'd like to at least give them the choice of whether to resize their text or not. If they're using IE, it's as simple as not setting the text size in pixels.

  12. #12
    SitePoint Member
    Join Date
    Dec 2003
    Location
    arbroath
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use em. It works in all the modern browsers. When I used pixels, changing the text size in IE view menu had no effect. With em it does.

    If you download the first four chapters of the CSS book from sitepoint it explains it all very well.

    Basically 1 em is 100% of the default size and it is named after the height of a lower case 'm'

  13. #13
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    ems are great, but i believe percents have even better crossbrowserness (if that's a word)

    nevertheless, there's no point setting your font size to 1em or 100%, is there

    just apply the ems or percents to the other text, like H1 etc., and not the main copy
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  14. #14
    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)
    Quote Originally Posted by r937
    ...crossbrowserness (if that's a word)
    Hey - it works for me!

  15. #15
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    crossbrows : having crossbrowserness...... also has a nice ring......
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  16. #16
    SitePoint Enthusiast tentonjim's Avatar
    Join Date
    Aug 2003
    Location
    Seattle, WA USA
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    xbrowsernex...
    I dig'em... get it???
    Jim Summer
    ~ Twitter SEO_Web_Design or Google+

  17. #17
    SitePoint Zealot
    Join Date
    Dec 2003
    Location
    Tampa, FL
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use %. Gives the user a better option for increasing font size or decreasing that way.

  18. #18
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you would also like to have a look here: http://www.scotconnect.com/webtypography/index.php

  19. #19
    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

    TYPOGRAPHY - Font Sizing: http://www.d.umn.edu/itss/support/Training/Online/webdesign/type.html#size

  20. #20
    SitePoint Zealot
    Join Date
    Dec 2003
    Location
    Tampa, FL
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You sure about that font-sizes table?

    On my screen I don't discern any difference between 75% and 80% when using verdana and 70% is definitely 11px on this screen.

  21. #21
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am pretty sure...


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
  •