4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

What font text size code to use?

by Lanesa
3 replies
  • WEB DESIGN
    • |
Hi there,
When choosing how to size a font, what method or sizing-type should you use (e.g. em, pt, px, etc)? I've heard before that em is the best because it's the same on any monitor, but I don't really know what's the truth. Any help would be greatly appreciated! Thanks for your time!
#code #font #size #text
  • Profile picture of the author Bewley
    Originally Posted by Lanesa View Post

    Hi there,
    When choosing how to size a font, what method or sizing-type should you use (e.g. em, pt, px, etc)? I've heard before that em is the best because it's the same on any monitor, but I don't really know what's the truth. Any help would be greatly appreciated! Thanks for your time!
    Using em enables your text size scale up when users use the zoom feature in web browsers (in most browsers.) em has its roots based in typography and works pretty much like %.

    Try this declaration at the top of your style sheet:

    body {
    font-size: 62.5%;
    }

    62.5 percent times 16 pixels (the default size of text in most web browsers) equals 10 pixels. If you use 10 pixels as a starting point, then 1 em = 10 pixels. If you use 10 pixels as a starting point, it is easy to convert to em.

    e.g. 1.6em = 16 pixels, 1.8em = 18 pixels... and so on.

    Adrian
    {{ DiscussionBoard.errors[2913062].message }}
  • Profile picture of the author SteveJohnson
    You have no guarantee that text size will the same on every monitor - that's the wonder of the web and web browsers. You have to plan your site for the eventuality that someone somewhere will have increased or reduced text size from 'standard' or will have their browser in permanent 'zoom' mode.

    That said, Adrian's way is probably best.

    If you use percentages, you'll find that the cascading nature of the stylesheet will cause problems. Take this style, for instance:
    Code:
    div { font-size: 110%; }
    and this markup:
    Code:
    <div>
  sentence #1
    <div>
       sentence #2
    </div>
</div>
    Sentence #1 will display just how you want it - at 110% of the inherited font size. Sentence #2, though, will display a little oddly. It will be at 110% of 110% of the inherited font size because of the 'cascade' of the stylesheet.

    You just have to be careful with your markup and be aware of the possible effects of cascading.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[2913877].message }}
    • Profile picture of the author Bewley
      Originally Posted by SteveJohnson View Post

      [/code]
      and this markup:
      Code:
      <div>
  sentence #1
    <div>
       sentence #2
    </div>
</div>
      Sentence #1 will display just how you want it - at 110% of the inherited font size. Sentence #2, though, will display a little oddly. It will be at 110% of 110% of the inherited font size because of the 'cascade' of the stylesheet.

      You just have to be careful with your markup and be aware of the possible effects of cascading.
      A good example of how inheritance can twist your melon Steve Especially when you are pulling in several style sheets
      {{ DiscussionBoard.errors[2914545].message }}

Trending Topics