SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 91
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2009
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Do you still use em or just px?

    I see that most popular sites like fiverr, twitter, youtube, ... doesn't use em anymore for font-size and also for other properties, excepting for line-height. They use px almost exclusively.

    I am wondering what is nowadays best practice for this since browsers adjust also font size automatically when enlarging view.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Sounds like those sites are using an outdated way of doing things. The sites that switched from using px to using em started doing so some time back.

    There is no real justification for using px for anything except borders. It might make laying out the page easier for the person writing it but will make it unusable for a portion of visitors.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2009
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the best practice is to use em?

  4. #4
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Steven said using px is not the best practice for font-size. All of my fonts are em based on 76% off the body tag.

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2009
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I will use it as well. And what is about other things, do you use px or em?

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by meee View Post
    Thank you, I will use it as well. And what is about other things, do you use px or em?
    Each have their uses - eg specifying borders as 1px makes them as thin as possible. Everything specified using en will set its size proportional to the text so that if someone increases the text size in their browser then all of the em measurements will increase by the same proportion. Using percentages is also useful where you want to size something as a set fraction of its container.

    The other units are not really suited for screen use but are insterad intended for use when printing the page - pt, cm and in can be used in your print styles.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2009
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but won't browser automatically calculate and increase all elements by the same proportion even if I use px?

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by meee View Post
    but won't browser automatically calculate and increase all elements by the same proportion even if I use px?
    NO. The pixels on a given browser are a fixed size and the only way to change it is to change the resolution of the screen. With modern screens the screen resolution is generally fixed and can't be changed. For example my screen is 1920px by 1080px and even if I set the resolution differently in the operating system the screen itself will still convert to 1920px by 1080px before displaying anything.

    There are zoom options available that can be used to make everything in the page bigger by a set proportion (which will make all the images blurry) but to be able to specifically enlarge the text without stuffing up the images by changing their size you must use em. There are even some browsers that will not allow anything defined using px to be resized at all since those elements do after all have a specific size specified for them and since there are other measurements available when you want sizes to be able to change you should NEVER use px for anything that ought to be able to be changed in size. That's why the only use I ever make of px these days is to set minimum width borders where I want the border to be visible but as thin as possible. If the content is blown up to be a million times its initial size then the border should still be only 1px as that is still the minimum visible width.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Zealot
    Join Date
    Jan 2009
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tnx you are the best, now I understand

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    How do you calculate the conversion on 76%?
    Is there also a calculator on the web?
    I searched for either, the method or a calculator with no success.

    Thank you,
    Chen

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by chen3 View Post
    How do you calculate the conversion on 76%?
    Conversion to what?

    The only sizes where there is a set conversion value is between pt, cm, and in

    The px, em and % values are all completely independent with no set conversion between any of them or with the fixed sized ones in the above list.

    76% could be 5px for one visitor and 55px for another. It might be 3em for one visitor and 12em for another. It might be 2cm for one visitor and 6in for another. It all depends on how they have their screen and browser configured.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the answer felgall.

    I am asking about a default configuration of a browser.

    According to this article incremental differences
    it is recommended to use 'font-size: 76%' in the body.

    so now i have a design with 46px header height, which contains fonts of 1em. How do i convert 46px to ems?

    Thanks a lot...

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by chen3 View Post
    Thank you for the answer felgall.

    I am asking about a default configuration of a browser.

    According to this article incremental differences
    it is recommended to use 'font-size: 76%' in the body.
    That's an oold article from back when most browsers had a similar default configuration (also I'm not sure why they'd suggest 76% as 62.5% was the usual suggestion). These days there are so many different screen sizes that no one size works out any better than any other. The current recommended font size to use in the body is 100% and that is only needed to fix an IE bug and could be left out completely if it were not for that.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ohh, good to know.
    Thank you very much

  15. #15
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, but felgall didn't exactly gave you the best advice possible. Here's what happens, even on SitePoint, if you use em when not appropriate.



    You can use both em and px, you just have to find the right use. Generally, for fixed heights, em is not such a great idea.

  16. #16
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok..
    so maybe min-height will be the right solution for this?..
    so where can be a good use for em (except for text of course)?

  17. #17
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    min-height... on what? Where? How?

    You can get a good use for em anywhere where there is not a fixed height defined:
    - the "Download Free Sample", the "Looking for help?"

    or you have elements stacking up on the same line, taken out of the normal flow, unaware of each other sizes:
    - the "Search this site" not seeing the menu
    - the tagline not fitting in the image

  18. #18
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no. i was talking about the site i'm working on.
    i will try tomorrow to send a link.
    Thank you very much you both - felgall and noonnope

  19. #19
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,005
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure if, on that case, the em was not appropriate or if, instead is the site structure that is not appropriate.
    EM are always appropriate for accessibility reasons.

    It's hard to do css with EM font size.
    It's hard to design sites using css when we think like on paper, believing that all should look the same, or that is some sort of standard around here.

    Not sure if it will always be like this, but ... still applies:
    Do websites need to look exactly the same in every browser?

    What font size do I use? The most comfortable possible, according my site audience. Is this a 100% answer. No. It's the best I can find until now.

  20. #20
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by noonnope View Post
    I'm sorry, but felgall didn't exactly gave you the best advice possible.

    You can use both em and px, you just have to find the right use. Generally, for fixed heights, em is not such a great idea.
    What advice are you referring to? Also if you don't use em for fixed heights then when I change the size of an em to be 5 times as big 4/5 of your content will overflow or disappear and then your page is completely stuffed. Only by using em for fixed heights can you ensure that the height grows so that the texts will still fit when the text is made bigger.

    px should only be used for border widths - if you avoid its use anywhere else then you will not have any page layout issues caused by px. The problem illustrated for SitePoint is causd because px are used for other things that they shouldn't be used for - inappropriate use of px and not inappropriate use of em. Mixing the two will always cause problems unless you limit using px to narrow borders eg. 1px.

    Remember that your visitor can override your CSS with theirs and changing the size of em to make it bigger is likely with people with poorer eyesight.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  21. #21
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think http://www.sitepoint.com/forums/4832810-post15.html is pretty explanatory about what I mean. That's what happens when using em for fixed heights: broken layout.

  22. #22
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by felgall
    There are even some browsers that will not allow anything defined using px to be resized at all
    For those wondering, this would be IE. And it includes the just-released IE9, a brand new browser.

    I use em/% for my boxes as well as my text. It does mean you have to be careful in how you lay things out, though.

  23. #23
    SitePoint Zealot Ethan-27's Avatar
    Join Date
    Jan 2011
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I knew ems were used more for liquid layouts rather than pixels.

  24. #24
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    It is great for me to read your various updated approaches.
    here is a link for the layout i'm working on.

    thought of replacing the px to em of the header and footer-parts heights.
    Do you think it can be a good use here?

  25. #25
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No.

    For the header, it will not break your layout, but you have some fixed height social icons on the same line with some text, and the icons would look out of place next to a possible overgrown em text. Try some 5em font size for #header ul li a.

    For the footer, try putting the font-size at 5em for the p elements in it. You do have a partly fixed height on the footer, making it difficult to use em.

    The extreme 5em font size only makes more vivid the impact of uncontrolled em sizes on fixed heights.


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
  •