13 Replies Latest reply: Jun 6, 2008 3:59 PM by Newsgroup_User RSS

    Text size, better to use px or em?

    jameswoody
      For text sizing, is it better to use px or em? And what are the advantages to one/both?
      thanks
      james
        • 1. Re: Text size, better to use px or em?
          Community Member
          Define "better"?

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "jameswoody" <webforumsuser@macromedia.com> wrote in message
          news:g2bvp6$sd3$1@forums.macromedia.com...
          > For text sizing, is it better to use px or em? And what are the advantages
          > to one/both?
          > thanks
          > james

          • 2. Re: Text size, better to use px or em?
            jameswoody Community Member
            Well, what are the differences? I know that px is a pixel and em is a measurement of the letter 'm', but when should you use one or the other?
            • 3. Re: Text size, better to use px or em?
              Community Member
              Pixel is an absolute measure. All others, including em, en, ex, percent, or
              size names, are relative in the sense that they depend on the default size
              set for the document. For accessability purposes, em or percent is usually
              the recommended usage.

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "jameswoody" <webforumsuser@macromedia.com> wrote in message
              news:g2c1og$16v$1@forums.macromedia.com...
              > Well, what are the differences? I know that px is a pixel and em is a
              > measurement of the letter 'm', but when should you use one or the other?

              • 4. Re: Text size, better to use px or em?
                jameswoody Community Member
                Do they depend just on the document setting, or would a div with text set to 50% in a div with text set to 50% display the text at 25%?
                thanks
                james
                • 5. Re: Text size, better to use px or em?
                  Community Member
                  > would a div with text set to 50% in a div with text set to 50% display the
                  > text at 25%?

                  Yes.

                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  ==================


                  "jameswoody" <webforumsuser@macromedia.com> wrote in message
                  news:g2c3gs$35n$1@forums.macromedia.com...
                  > Do they depend just on the document setting, or would a div with text set
                  > to 50% in a div with text set to 50% display the text at 25%?
                  > thanks
                  > james

                  • 7. Re: Text size, better to use px or em?
                    jameswoody Community Member
                    I've made the following in Dreamweaver. In dreamweaver it displays as you said, where 50% text in a 50% div shows at 25%. In Safari and Firefox however, it all displays as the same size. Am I doing something wrong?

                    <!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>
                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                    <title>Untitled Document</title>
                    <style type="text/css">
                    <!--
                    .1 {
                    font-size: 50%;
                    }
                    .2 {
                    font-size: 50%;
                    background-color: #007700;
                    }
                    -->
                    </style>
                    </head>

                    <body>
                    <div class="text">text is normal size</div>
                    <div class="1">
                    <p>text is 50%</p>
                    <div class="2">text is 50% in 50%</div>
                    </div>
                    </body>
                    </html>

                    • 8. Re: Text size, better to use px or em?
                      Community Member
                      You cannot begin a custom class with a number.

                      --
                      Murray --- ICQ 71997575
                      Adobe Community Expert
                      (If you *MUST* email me, don't LAUGH when you do so!)
                      ==================
                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                      ==================


                      "jameswoody" <webforumsuser@macromedia.com> wrote in message
                      news:g2c5kq$5h4$1@forums.macromedia.com...
                      > I've made the following in Dreamweaver. In dreamweaver it displays as you
                      > said,
                      > where 50% text in a 50% div shows at 25%. In Safari and Firefox however,
                      > it all
                      > displays as the same size. Am I doing something wrong?
                      >
                      > <!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>
                      > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                      > <title>Untitled Document</title>
                      > <style type="text/css">
                      > <!--
                      > .1 {
                      > font-size: 50%;
                      > }
                      > .2 {
                      > font-size: 50%;
                      > background-color: #007700;
                      > }
                      > -->
                      > </style>
                      > </head>
                      >
                      > <body>
                      > <div class="text">text is normal size</div>
                      > <div class="1">
                      > <p>text is 50%</p>
                      > <div class="2">text is 50% in 50%</div>
                      > </div>
                      > </body>
                      > </html>
                      >
                      >
                      >

                      • 9. Re: Text size, better to use px or em?
                        Community Member
                        Try this instead:
                        <style type="text/css">

                        body {font-size:200%}

                        .one {font-size: 50% }

                        .two {font-size: 50%;
                        background-color: #007700}

                        </style>


                        --Nancy O.
                        Alt-Web Design & Publishing
                        www.alt-web.com
                        "jameswoody" <webforumsuser@macromedia.com> wrote in message
                        news:g2c5kq$5h4$1@forums.macromedia.com...
                        > I've made the following in Dreamweaver. In dreamweaver it displays as you
                        said,
                        > where 50% text in a 50% div shows at 25%. In Safari and Firefox however,
                        it all
                        > displays as the same size. Am I doing something wrong?
                        >
                        > <!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>
                        > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                        > <title>Untitled Document</title>
                        > <style type="text/css">
                        > <!--
                        > .1 {
                        > font-size: 50%;
                        > }
                        > .2 {
                        > font-size: 50%;
                        > background-color: #007700;
                        > }
                        > -->
                        > </style>
                        > </head>
                        >
                        > <body>
                        > <div class="text">text is normal size</div>
                        > <div class="1">
                        > <p>text is 50%</p>
                        > <div class="2">text is 50% in 50%</div>
                        > </div>
                        > </body>
                        > </html>
                        >
                        >
                        >


                        • 10. Re: Text size, better to use px or em?
                          jameswoody Community Member
                          I got it working with the following. What was the problem? Is it problematic to name divs starting with a number?
                          james


                          <style type="text/css">
                          <!--
                          .cont {
                          font-size: 50%;
                          }
                          .contained {
                          font-size: 50%;
                          }
                          -->
                          </style>
                          </head>

                          <body>
                          <div class="maindiv">div with no css</div>

                          <div class="cont">text in div cont
                          <div class="contained">text for div contained
                          </div>
                          </div>
                          </body>
                          </html>

                          • 11. Re: Text size, better to use px or em?
                            Community Member
                            On Fri, 6 Jun 2008, jameswoody wrote

                            >Well, what are the differences? I know that px is a pixel and em is a
                            >measurement of the letter 'm', but when should you use one or the other?

                            In _computer_ typography the em is not, and never has been, a
                            measurement of the "letter m" or the letter "M"
                            http://www.emdpi.com/emsquare.html

                            One em is the font size.
                            If font size is 20px then one em is 20px. If font size is 12pt then one
                            em is 12pt.

                            --
                            Richard Mason
                            http://www.emdpi.com
                            • 12. Re: Text size, better to use px or em?
                              Community Member
                              >>Is it problematic to name divs starting with a number?

                              First, you're not "naming" the div; you're naming a class (or id). 2nd, it's
                              not just problematic, it's not allowed. As always some browsers interpret
                              things differently so a prohibited class name may work in one browser but
                              not another. Yet another reason I completely validate the code of every page
                              I build when I complete a site.

                              --

                              Walt


                              "jameswoody" <webforumsuser@macromedia.com> wrote in message
                              news:g2c9ed$9od$1@forums.macromedia.com...
                              >I got it working with the following. What was the problem? Is it
                              >problematic to
                              > name divs starting with a number?
                              > james
                              >
                              >
                              > <style type="text/css">
                              > <!--
                              > .cont {
                              > font-size: 50%;
                              > }
                              > .contained {
                              > font-size: 50%;
                              > }
                              > -->
                              > </style>
                              > </head>
                              >
                              > <body>
                              > <div class="maindiv">div with no css</div>
                              >
                              > <div class="cont">text in div cont
                              > <div class="contained">text for div contained
                              > </div>
                              > </div>
                              > </body>
                              > </html>
                              >
                              >
                              >


                              • 13. Re: Text size, better to use px or em?
                                Community Member
                                On Fri, 6 Jun 2008, Murray *ACE* wrote

                                >Pixel is an absolute measure.

                                Yes, except when they aren't. As Meyer says in 'Cascading Style
                                Sheets': "Pixels ... are defined to be relative"

                                Depending on the circumstance pixels can be either relative or absolute.

                                --
                                Richard Mason
                                http://www.emdpi.com