SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast MelissaMiller's Avatar
    Join Date
    Mar 2008
    Location
    des moines, ia
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font Size for Public Service web site

    I'm doing a web site for a friend, this is my first site using my newly learned CSS skills, by the way. This site is for a grass-roots political lobbying training service. Question is, I've always had an issue with the small print used in many web sites, it's difficult to read for us over-40 folks, and my friend likes my concept of having the site be very user-friendly. But when I use the larger font, up around size 12 or so, it just doen't make the site as attractive, lay-out wise. There's not enough room to attractively display the other things she wants on the page, such as photos of the Capitol, etc. Any ideas?

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you mean any ideas? It is important for nearly all websites for the font to be resizeable.

    Does your layout break when the font is increased? If so, that's the problem you need to address.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Enthusiast MelissaMiller's Avatar
    Join Date
    Mar 2008
    Location
    des moines, ia
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hadn't heard about resizable font, this is exactly the type of idea I'm looking for. I'll have to look into that..I am very new at this stuff.

  4. #4
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One factor of making a site accessible, is making sure the layout still displays correctly after the font is resized.

    To see font-resizing in action, in Firefox hold down Ctrl and Press +.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Font-resizing is a functionality built into the nearly all Internet browsers. There are a few (namely Internet Explorer) that break this functionality when using static-sized fonts (ie. px, pt, etc.). You should try to use relative font sizes, such as em.

    Probably the best way to do this is to have the default font something like 1em with a line-height of 1.2em. This will set the font-size to the default font for the browser, thus giving the user a font size they expect.

    As far as the font being too big to fit other things, that is just something you will have to deal with. 12px font isn't very big at all. You'll have to make a layout that doesn't break when the font-size is changed. Adding padding and line spacing can help with this problem. If you are having problem fitting other things in using 12~14px font, you should look over your design and work on making it more flexible.

    If you need any specific help, this is a great place to ask for help.

  6. #6
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although samanime in right, browsers are now drifting away from adjusting the font size, and are focusing on page zooming. For example Opera and Firefox 3 will zoom the entire page including images. This is because so many developers do not account for font size adjustment, and so the page looks better if zoomed.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Melissa,

    What I typically do is set the font-size at 85% of whatever the user has his or her font size set to (I don't know what that is so I use the percentage) and the line-height (leading) to 1.5 times that (via line-height: 1.5; or font: 85%/1.5 fontname, fontname, font-name, sans-serif;), and then use EM for my text containers (columns, menus, sidebars, and so on). That way when the user does resize the text, the entire layout doesn't get broken.


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
  •