13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

CSS font size help, please?

by WillR
11 replies
  • WEB DESIGN
    • |
Warriors,

I'm just putting together an xhtml and css template. In the CSS stylesheet I want to use em values for the font sizes as opposed to actual/definite px values. What line of code do I add to the CSS stylesheet to define the pixel value for 1em?

Hope you can help!
#css #font #size
  • Profile picture of the author jamesg3
    Here are some examples of the code
    Code:
    h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
    The "em" is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
    Signature
    Serious Wordpress sites, html/css sites and flash sites Cheap. I provide killer SEO, easy to use e-commerce solutions and payment gateways. Check me out at Serious Website Design.
    Need Hosting with serious speed and power? 3.99 a month. Take a look here. Serious Website Hosting.
    {{ DiscussionBoard.errors[3760089].message }}
    • Profile picture of the author jamesg3
      You can use Em with any of these as well

      h1, h2, h3, h4, h5, h6,

      h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,

      h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,

      h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,

      h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover

      p a span

      you can also use "em" in in-line stlyings as well. Like this
      Code:
      <p style="font-size:2em";> something here</p>
      Signature
      Serious Wordpress sites, html/css sites and flash sites Cheap. I provide killer SEO, easy to use e-commerce solutions and payment gateways. Check me out at Serious Website Design.
      Need Hosting with serious speed and power? 3.99 a month. Take a look here. Serious Website Hosting.
      {{ DiscussionBoard.errors[3760099].message }}
      • Profile picture of the author Joe Mobley
        Will,

        Pay attention as IE may (and probably will) have some font sizing problems. The solution you might be looking for is here.

        CSS Font

        Scroll about half way down the page until you see Font Size. There's 3 quick examples that may help you out.

        Hope this helps.

        Joe Mobley
        Signature

        .

        Follow Me on Twitter: @daVinciJoe
        {{ DiscussionBoard.errors[3760650].message }}
        • Profile picture of the author WillR
          Originally Posted by Joe Mobley View Post

          Will,

          Pay attention as IE may (and probably will) have some font sizing problems. The solution you might be looking for is here.

          CSS Font

          Scroll about half way down the page until you see Font Size. There's 3 quick examples that may help you out.

          Hope this helps.

          Joe Mobley
          thanks for that. i think their last solution there is the one to go with. thanks a lot!
          Signature

          .


          .

          {{ DiscussionBoard.errors[3761561].message }}
          • Profile picture of the author Joe Mobley
            I'm thinking that is a good decision. It's the one I'm working with.


            Joe Mobley


            Originally Posted by WillR View Post

            thanks for that. i think their last solution there is the one to go with. thanks a lot!
            Signature

            .

            Follow Me on Twitter: @daVinciJoe
            {{ DiscussionBoard.errors[3761866].message }}
    • Profile picture of the author WillR
      Originally Posted by jamesg3 View Post

      Here are some examples of the code
      Code:
      h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
      The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
      i understand all that but in your code you are still using the px values as well. i thought the whole point was to get rid of them and only use em values?

      update

      ok, those px values are just comments right? so i get all that now but i always thougt i needed to define the value for 1em somewhere in the css?
      Signature

      .


      .

      {{ DiscussionBoard.errors[3761522].message }}
  • Profile picture of the author xtrapunch
    Before using "em", you should set a default font size. Example:

    font-size:62.5%; /*10px*/

    Now, 1em = 10px; 2em=20px; 2.4em=24px and so on.
    Signature
    >> Web Design, Wordpress & SEO - XtraPunch.com <<
    Web Design & SEO Agency | Serving World Wide from New Delhi, India

    {{ DiscussionBoard.errors[3760744].message }}
    • Profile picture of the author Evan-M
      Originally Posted by xtrapunch View Post

      Before using "em", you should set a default font size. Example:

      font-size:62.5%; /*10px*/

      Now, 1em = 10px; 2em=20px; 2.4em=24px and so on.
      The only reason people do this, is some find it easier to multiply by 10's

      basically if you make the default 62.5 instead of the default ( 100% or 16px ) its easier to figure out the math on say 18px ( 1.8em, when using the 62.5 % font)

      its not really a necessary step

      by default

      1em = 16px 2em = 32px 2.4em = 38.4px
      Signature

      Evan-M

      Easily The Worlds Best Wordpress Popup plugin

      Visit Website Design Firm For All Your Wordpress Coding Needs

      {{ DiscussionBoard.errors[3760953].message }}
      • Profile picture of the author WillR
        Originally Posted by Evan-M View Post

        The only reason people do this, is some find it easier to multiply by 10's

        basically if you make the default 62.5 instead of the default ( 100% or 16px ) its easier to figure out the math on say 18px ( 1.8em, when using the 62.5 % font)

        its not really a necessary step

        by default

        1em = 16px 2em = 32px 2.4em = 38.4px
        so you are saying i dont even need to define the default if i just want to use the standard 1em = 16px?
        Signature

        .


        .

        {{ DiscussionBoard.errors[3761512].message }}
        • Profile picture of the author Evan-M
          Originally Posted by WillR View Post

          so you are saying i dont even need to define the default if i just want to use the standard 1em = 16px?

          exactly setting the default to 62.5 is just to make math on px a little easier.
          Signature

          Evan-M

          Easily The Worlds Best Wordpress Popup plugin

          Visit Website Design Firm For All Your Wordpress Coding Needs

          {{ DiscussionBoard.errors[3763843].message }}
  • Profile picture of the author SDStudio
    Hi Will,

    Check out this site below it might come in handy as well the one Joe posted w3schools posted.

    px - em - % - pt - keyword | CSS-Tricks

    This is another site i use to get answers and tricks with css
    Signature
    Need Roadside Assistance
    {{ DiscussionBoard.errors[3762305].message }}

Trending Topics