We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 10746
    • 126 Posts
    I have been having great trouble with my fonts in andreas01 - trying to get my Mac OS and Linux (both Firefox 2.0) to look the same...

    One issue that I simply cannot understand is the "font" line in the andreas01.css style file..

    font: 76% Verdana, Tahoma, Arial, sans-serif;


    The 76% part clearly scales down the font... but 76% of what? Is that 76% of the font size that the user has chosen for their browser? Or 76% of some fixed "standard size".

    I *DO* get larger fonts if I replace 76% by, say, 85%. But if I leave it off altogether, then what happens?

    My expectation was that I would get 100% Verdana - but no... I get a COMPLETELY DIFFERENT FONT - in fact a serif font that looks surprisingly like Times Roman.

    Clearly something is happening here that I do not understand... any CSS gurus with ideas?

    Cheers

    Gordon

      • 5763
      • 59 Posts
      76% means 76% from the default font size from an operating system. If you don’t put that a browser could have a default setting bigger or smaller than that 76% smiley or was it always 100% smiley. can’t remember. That 76% has is related to the fact that if you use it 1 em = 10 px.
        Be Smart, Think Free, Choose OpenSource
      • 1em doesn’t actually = 10px. Here’s a good bit of CSS that makes font sizes behave consistently and also cleans some stuff up in general:

        /* Neutralize styling: 
           Elements we want to clean out entirely
           and we reset the base font-size to 10px:
        ---------------------------------------------------------------- */
        html, body, form, fieldset {
                margin: 0;
                padding: 0;
                font-size: 100%;
                line-height: 1.5;
                font-family: Arial, Helvetica, sans-serif;
        }
        html { 
            font-size: 100.01%; /* avoids obscure font-size bug */
            height: 100%;
            margin-bottom: 1px; /* avoid jumping scrollbars */
        } 
        body { 
            font-size: 62.5%; /* 10px ... 68.75%=11px 75%=12px  81.25%=13px  87.5%=14px*/
            height: 100%;
            text-align: center;
        }
        img {
            border: 0;
        }
        
        /* Neutralize styling:
           Elements with a vertical margin:
        ---------------------------------------------------------------- */
        h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
                margin: 0 0 1em;
                padding: 0;
        }
        
        /* Apply left margin:
           Only to the few elements that need it:
        ---------------------------------------------------------------- */
        li, dd, blockquote {
                margin-left: 1em;
        }
        /* Miscellaneous conveniences: 
        ---------------------------------------------------------------- */
        form label {
                cursor: pointer;
        }
        fieldset {
                border: none;
        }
        input, select, textarea, td {
                font-size: 100%;
        }
        .clearfix, .cls { /* use with a <br class="cls" /> to clear floats with no extra space*/
            clear: both;
            height: 0;
            margin: 0;
            font-size: 1px;
            line-height: 0;
        }
        .clear { clear: both; }
        
        /* Headers and Paragraphs:
        ---------------------------------------------------------------- */
        h1, h2, h3, h4, h5, h6 {
        	font-weight: normal;
        }
        
        h1 { font-size: 218%; }
        h2 { font-size: 164%; }
        h3 { font-size: 145%; }
        h4 { font-size: 118%; }
        h5 { font-size: 100%; font-weight: bold; }
        h6 { font-size: 86%; font-weight: bold; }
        
        p { color: #222; }
        p.caption { font-size: 86%; color: #555; }



        The reason to set the base font size to 10px via the method above is that it allows for really easy math when you want, say, a 24px tall header:

        font-size: 240% or font-size: 2.4em


        Hope this helps.
          Ryan Thrash, MODX Co-Founder
          Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
          • 5763
          • 59 Posts
          I was searching for something like this for a long time smiley
            Be Smart, Think Free, Choose OpenSource
          • You now have the start of every one of my CSS files, based on lots of experience in building css-only styled sites for 3 or so years. It makes life much easier.
              Ryan Thrash, MODX Co-Founder
              Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
              • 8439
              • 89 Posts
              Quote from: rthrash at Dec 06, 2006, 05:40 PM

              You now have the start of every one of my CSS files, based on lots of experience in building css-only styled sites for 3 or so years. It makes life much easier.

              Nice code, I’ll certainly study it but why not begin with the "global white space reset" * { margin: 0; padding: 0;} to make sure?

              Ed
              • Because I don’t want to globally reset everything. smiley
                  Ryan Thrash, MODX Co-Founder
                  Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
                  • 24414
                  • 45 Posts
                  I *DO* get larger fonts if I replace 76% by, say, 85%. But if I leave it off altogether, then what happens?

                  If you leave the font size out in font shorthand it will not use your rule, instead it will use a default font, in this case Times New Roman. If you want to specify the font face only use font-family instead.
                    • 8439
                    • 89 Posts
                    Quote from: rthrash at Dec 06, 2006, 07:23 PM

                    Because I don’t want to globally reset everything. smiley

                    (I’ve probably taken this well off topic by now.) You have obviously thought about this in depth for your own purposes but I thought the whole point in css normalization, levelling, whatever was to eliminate browser specific default settings of margin and padding forcing you to be explicit when you wanted non-zero values.

                    This site http://www.websemantics.co.uk/tutorials/useful_css_snippets/#leveller contains a similar approach together with an explanation for some of the odd values e.g. 100.01%

                    Ed
                      • 10357
                      • 573 Posts
                      this is a great read on how to handle css font sizes:

                      http://www.astahost.com/sizes-webdesign-em-vs-px-t8926.html