SitePoint Sponsor

User Tag List

Results 1 to 20 of 20

Thread: Text size

  1. #1
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text size

    I was wondering if anyone could help me..

    I am making a site and I want the font size to be exactly 10pt, and to not be effected by what setting the user chose in their browser (largest to smallest). I know when I do size="2" that is effected by the users choice, but I thouhgt if I used css it would not be? Only links appear to be staying at the size I chose.

    Thanks a lot anyone.
    Marc Gugliuzza
    marc.gugliuzza.com



  2. #2
    :) delemtri's Avatar
    Join Date
    Jun 2001
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    body { font-family : arial, sans serif ; font-size : 10pt ; }
    td { font-family : arial, sans serif ; font-size : 10pt ; } // at least if you're using tables

  3. #3
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wow

    I posted one dumb question, but you answered it perfectly

    It even solved problems I hadn't addressed yet

    thanks a lot
    Marc Gugliuzza
    marc.gugliuzza.com



  4. #4
    :) delemtri's Avatar
    Join Date
    Jun 2001
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad to help.

  5. #5
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Specifying the font attributes using the body element has caused me some grief in the past. Better to specify the font attributes for the individual elements:

    li,p,td
    {
    font-family: foo;
    font-size: 10pt;
    }

  6. #6
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can still change it in a browser, even using CSS and points.

    To keep users from changing it you need to use "px" instead of "pt" in your CSS.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  7. #7
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I've found that the BEST way to use CSS is by using all classes. Example:

    [css]
    .sidebar { font-size: 10pt ; color: #FFFFFF ; font-family: verdana ; }
    .content { font-size: 12pt ; color: #000000 ; font-family: verdana ; }
    [/css]

    Therefore, you can use the class in any HTML tag that it can be used in. Example:

    Code:
    <td class="sidebar">
    Home
    <br>About Us
    <br>Contact
    </td>
    
    <td><ul class="content">
    <li>blah
    <li>blah
    <li>blah</ul>
    </td>
    A good example stylesheet is mmj's at mostlyamphigory.com:
    http://www.mostlyamphigory.com/navbar/vn1style.css
    I learned a lot from his stylesheet.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adam...that's not the best way actually. Classes are good, but you duplicate code when you define font faces and sizes for each class.

    Ideally, if consistency of font faces and sizes are your desire, set every block level element right off like so:

    body, td, p, div, li (and more) {font-family: verdana; font-size: 10px; }

    Then you change the sizes and faces from there using classes. Doing it this way makes it a snap to change sizes and faces all over your site. You just change the body tag declaration and presto. If you define it using classes you have to change it multiple times. That defeats the whole purpose of stylesheets.
    -------------------------------------
    Now, to address Marc's comment about setting the body font so that someone can't change the size.

    FOR THE LOVE OF GOD DON'T DO THAT!!

    That is bad design of the highest order. YOu are in effect telling your users that you don't care about their opinion. Remember, you are making a website for THEM right? Let me address a few common statements that designers make when they say they want to use pixels

    -= If the user resizes the text, then my site will break.
    A. Then your site is designed poorly to begin with.

    -= I want the text size to be IDENTICAL in Netscape and IE on a MAc and PC.
    A. It will NEVER happen, so why trouble yourself and piss off your users. You can't even get an IMAGE to be the same size with all 4 of those variables. How can you expect text to be the same?

    Browsers have BUILT IN functionality to allow a user (one who might have poor eyesight, or a crappy monitor) to resize the text to THEIR liking. The way I look at it, when you start taking away that functionality you start making people angry. You don't want to make your users angry at you do you?

    If you do your site layout properly, then a user can resize your site all they want to and it should not break. Even if it does, the user will understand that THEY are the ones who did that and not you.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adam...that's not the best way actually. Classes are good, but you duplicate code when you define font faces and sizes for each class.



    ::mumbles to self::
    i'm so stupid, stupid, stupid...
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  10. #10
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no no no...

    it's just thinking ahead, that's all. Besides, the code you posted was good. Just not the best way. You should know by now that there are always several ways to accomplish something in web design. Some are more efficient is all.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  11. #11
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha, thanks for the uplift creole
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  12. #12
    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)
    Originally posted by swimm5001

    A good example stylesheet is mmj's at mostlyamphigory.com:
    http://www.mostlyamphigory.com/navbar/vn1style.css
    I learned a lot from his stylesheet.
    Wow - I just was browsing through and found this, completely by chance.

    The truth is, my stylesheet isn't the best example. It has its problems, and these are the same problems that all stylesheets have.

    I use % values for the text (just like em really). This is great. Users of netscape and IE can resize their text to their liking, and it looks great.

    The nightmare starts when I see my site on netscape on a mac. Anything under 10pt is now so small that I cannot see a thing! It is just a line of pixels. As it turns out, 12pt on a mac uses only 75% the size as 12pt on an average PC. It is the same for all point sizes.

    However, after eliminating everything under 10pt, by increasing it to 10pt, there is no way of having small text on a PC. 10pt is quite large on a PC.

    It is turning into a nightmare. It turns out that sitepoint.com uses a different stylesheet for mac as for PC. You may not realise it (unless you view the stylesheet on both a mac and PC) but the stylesheet is different. Font sizes are generally 33% larger on the mac stylesheets to compensate for the differences.

    I don't want to switch to fixed font sizes (pt or px) but I don't want my site unreadable on a mac! Yikes...


    By the way, I am editing my stylesheet this week, so it might change a bit.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff

  13. #13
    SitePoint Member [MOS]'s Avatar
    Join Date
    Jun 2001
    Location
    Madrid, Spain
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think Creole is right. I always use pixels for the type, because of some different interpretations in what is a 'point' between PC & Mac.

    Using pixels is not a fault: the CSS standard defines several units of measure, and pixels is one of them. Yes, we may be used to points in non web related jobs, but using pixels is very easy and much more useful. 11px is the modern little type you see everywhere, 12px is more legible.

    And for the discussion on using classes for specifying the text size, it should be ok to put it only in the body tag, but several browsers have problems with the 'cascading' part of CSS, so they would break the font style when reaching a <TD>.

    So, just adding:

    body, td, td p {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    }
    (Using line-height with NS4 is not recommended, but...)

    Should work. Anyway, my philosophy is to forget about NS4, specially since we have the much better NS6, Opera, Konqueror, IE5/Mac...

    User font-resizing is not a matter of the web designer, but of the browser manufacturer. Opera5 and IE5/Mac already have got the Zoom feature, which is what eventually every browser will have.

    If you're interested in the point vs. pixels matter, I'll give you some links where you can find the technical explanation, from Zeldman, AListApart and Code*****.
    Carlos de la Orden
    The higher a man gets, the smaller he looks for people who can't fly.

    www.aspfacil.com, el sitio para programadores ASP

  14. #14
    SitePoint Zealot wrkalot's Avatar
    Join Date
    Sep 2001
    Location
    Maryland
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! This is the best thread i've run across yet. When I designed my site I used pt with no CSS. After getting complaints for customers and resizing one page at a time (60 in all ) using CSS and em and ran into similar problems on the different OS's. I have now converted all text to px and get a consistant look no matter the browser or platform.

    Printing is a problem with px tho so I'm in the process of making "printable" pages of certain sections of my site.

    I us a Mac btw

  15. #15
    SitePoint Addict cyberprince's Avatar
    Join Date
    Sep 2001
    Location
    Asia
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wrkalot i am just curious what problems you enountered using the em unit. I am still trying to learn CSS and the book I'm using recommends using the em unit above anything else.

  16. #16
    SitePoint Zealot wrkalot's Avatar
    Join Date
    Sep 2001
    Location
    Maryland
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm no expert thats for sure but if I remember correctly em acted like pt did. The text in Netscrape was much smaller than IE.

    It could very well have been poor coding on my part but since converting to px all has been well.

    Some of the previous post attempt to clarify these issues but I too am a bit confused as to the best method.

  17. #17
    Anyone seen my cypher? OneChance's Avatar
    Join Date
    Apr 2001
    Location
    Seattle
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cyberprince, you may want to check out this link: http://www.richinstyle.com/masterclass/lengths.html

  18. #18
    SitePoint Addict cyberprince's Avatar
    Join Date
    Sep 2001
    Location
    Asia
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks OneChance. just printed that Article out for some reading.

  19. #19
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    MOS (and others)

    There are times when PX is an acceptable unit of measurement (accent text, buttons etc...), however (IMO) it should NEVER be used for body type. The reason? It takes away control from the user, you know...that person you designed the site for in the first place?

    When possible you should ALWAYS design for the widest range of people. That includes people who have trouble with their eyes. Setting a font to PX effectively removes the users ability to increase the size of the text, which means that they might just leave your site?

    Besides...is it REALLY that important that a font is EXACTLY the same size in all browsers? The way I look at it, if your site breaks in different browsers just because of font size, then something is wrong with your site's structure.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  20. #20
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, creole, when you set your text size, you use the standard html "2" for most content?

    I think you are right about not using absolute values for text sizes, but that is just another variable that we designers have to deal with and makes producing a nice looking website that much harder

    And you use "medium" size when viewing your site and others, I assume?

    I wonder if there's anywhere one could find reliable statistics on what setting most people use, from smallest to largest, and since netscape just goes by increments, do you know how many different sizes it has?
    Marc Gugliuzza
    marc.gugliuzza.com




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
  •