Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27027
    I'm confused about using em vs. px for fonts, background and layout.
    What do you recommend?

  2.  

  3. #2
    Member RiDunne's Avatar
    Join Date
    Feb 2011
    Posts
    75
    Member #
    26964
    Liked
    6 times
    Pixels are absolute values, em is relative. Personally I've never found a reason to use em over px.

  4. #3
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27027
    Yes with the IE8 zooming capability I think using px is fine?

  5. #4
    Member
    Join Date
    Jan 2011
    Location
    Edmonton, Alberta
    Posts
    82
    Member #
    26483
    Liked
    2 times
    I always set a specific font size using pixels. Font size with ems is only useful if the layout itself is also ems. Setting a pixel size for a font sets it at that size, regardless of how the fonts are set in the browser.
    Check out some of my work: http://www.jr-webdesigns.com

  6. #5
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27027
    thank you
    Should I use px for the layout too?

  7. #6
    Member
    Join Date
    Jan 2011
    Location
    Edmonton, Alberta
    Posts
    82
    Member #
    26483
    Liked
    2 times
    It really depends. I always use set widths for my websites so that the content is contained the same. I'm not a fan of fluid layouts simply because they can be unpredictable. A mix of set width and fluid layouts can be advantageous (such as having side columns that are a set width but the middle column with the content is fluid).
    Check out some of my work: http://www.jr-webdesigns.com

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Using absolute (pt, px) font sizes for screen purposes in most cases won't give you truly absolute font sizes. Most browsers (read: any browser not manufactured by Microsoft) will happily ignore whatever you've put in for a fixed font size and interpret it as a relative font size.

    Try this example to see this for yourself. Take the following code and save it to a web page.
    Code:
           
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>This is a test page.</title> </head> <body> <p style="font-size:  12px;">Test</p> </body> </html>
    Open the page up in Firefox, and then opt to Zoom Text Only (View-->Zoom-->Zoom Text Only). Watch what happens to your absolute font sizes.

    The older versions of Firefox used to zoom the text only by default and leave the page alone, and they've left that feature in, although it's not enabled by default. Chrome doesn't have that feature yet that I can see, although it's probably just a matter of time.

    The other thing to consider is that a lot of older users with newer monitors will crank their text sizes beyond the Normal (96 DPI) font size, which in turn increases the font size on the pages they're looking at...again, regardless of what it is the designer sets it at.

    A good design will allow users to resize the text without having to jump through hoops to do it, because a good designer will have taken that into account. And that's only accomplished with relative font sizes. Fixed font sizes were intended for print and other media where resizing the text isn't an option.

    So the reason to use em over px (or I prefer percentages) is simply because webmasters don't have that kind of control anyway, so they might as well think of text in relative sizes.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27027
    It's really confusing I think I will use fixed font size for the navigation menu and percentage for the main content I think

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Maybe I can reword this better for you, then...I think I know why you're confused.

    Basically, it doesn't matter whether you set fixed or relative font sizes for plain text on screen. Users have the ability to alter the size of your plain text regardless (making it relative), and there isn't a damn thing you can do about it. So you might as well set the text in relative terms to begin with and save yourself the frustration. If you absolutely must have text set to a certain size, you can either alter it using a font replacement technique such as Cufon or embed the text into an image (navigation is a good reason to do this).

    This really is one of the hardest concepts for people to understand though. I've spent years trying to explain it to graphic designers and they just can't hack it.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    Junior Member
    Join Date
    Mar 2011
    Posts
    14
    Member #
    27027
    I browsed some websites and increased the font in firefox and all of them became a mess
    I still don't get it
    The way i see it an elastic layout maybe the solution
    what do you think?


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:32 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com