12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Why is Calibri always a smaller size?

by Lloyd Buchinski
10 replies
  • WEB DESIGN
    • |
Even if you specify something like font-size:18px; for both fonts, the Calibri page will be about a paragraph shorter than the same page in Verdana.

It can mess with the lay out and it's a PIN. Is there a way to get around that?
#calibri #size #smaller
  • Profile picture of the author forgottenlife
    It is just the way the font was designed.

    Why not try a different font like Arial, these seem to look the same height to me (Verdana seems wider), what do you think?

    Arial Verdana, both are size 4 as set by this forum advanced editor.
    {{ DiscussionBoard.errors[8764888].message }}
  • Profile picture of the author martinziegert
    Each font is designed differently. Not sure how much you had the chance to play with fonts in Word or Photoshop, but each of them has it's own style, size, etc.
    {{ DiscussionBoard.errors[8764935].message }}
    • Profile picture of the author Lloyd Buchinski
      Originally Posted by martinziegert View Post

      Each font is designed differently.
      Yes, I realize that. Calibri is my favorite and I use it for almost everything on my computer. I would like to use it on sites too, but I expect Macs still don't have it. Any computer that doesn't have it would probably show it in a larger font type.

      The thing that gets me is that even when you specify the font size in css, with something like [font-size:18px;], the Calibri will still come out to a different size than the Ariel or Verdana.

      Is there a way to even that out and get them all the same size, but not using images?
      Signature

      Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

      The KimW WSO

      {{ DiscussionBoard.errors[8764958].message }}
  • Profile picture of the author Istvan Horvath
    Any computer that doesn't have it would probably show it in a larger font type.
    Actually, if a computer doesn't have the font - it will use the next font from your stylesheet... that's why we have lines like this in the CSS:
    font-family: Helvetica, Arial, Verdana, sans-serif;
    When rendering the page, the browser will go through the defined fonts and will be using the first existing (installed) one.

    As for the size. Generally, the size in pixels refers to the so-called "m square" - imagine a square in which the letter "m" would fit and having 16x16px size.

    Now, depending on their design, glyphs ('letters') of different font families will take up different space: some are wider, some are thinner/narrower horizontally and there is also the issue of how close can be placed to each other without making it difficult to read.
    Hence, the same text with - theoretically - same size fonts can, indeed, take up less or more space on a page.

    HTH
    Signature

    {{ DiscussionBoard.errors[8765020].message }}
    • Profile picture of the author Lloyd Buchinski
      Originally Posted by Istvan Horvath View Post

      Actually, if a computer doesn't have the font - it will use the next font from your stylesheet... that's why we have lines like this in the CSS:
      font-family: Helvetica, Arial, Verdana, sans-serif;
      When rendering the page, the browser will go through the defined fonts and will be using the first existing (installed) one.
      Yes I do have a line like that in my css. The problem is that all the popular fonts I know are larger than Calibri, so that doesn't help me.

      Originally Posted by Istvan Horvath View Post

      As for the size. Generally, the size in pixels refers to the so-called "m square" - imagine a square in which the letter "m" would fit and having 16x16px size.
      I guess if it's a capital M it would be close to square. Thanks for the info. But when the pixel size is specified, why does Calibri still come out smaller? I don't expect they have a disproportionate M size.
      Signature

      Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

      The KimW WSO

      {{ DiscussionBoard.errors[8767936].message }}
  • Profile picture of the author shipwrecked
    Originally Posted by Lloyd Buchinski View Post

    Even if you specify something like font-size:18px; for both fonts, the Calibri page will be about a paragraph shorter than the same page in Verdana.

    It can mess with the lay out and it's a PIN. Is there a way to get around that?
    Depends on what you mean by "shorter"... And what actually gets shorter on your page.

    Are you using the "justify" setting for the font? That should stretch you sizes horizontally, not align-left.

    If you want to set line height in CSS, you can do so (with "line-height"). And play with these so that independently of font type, they all get to have the same space between them.

    Indents vary? It happens sometimes. You can set this by pixels. Set different indents for different fonts.

    What I'm saying is - suppose you use 2 types of fonts... you should create 2 classes for them.
    Like:

    <p class="f1">text 1</p>
    <p class="f2">text 2</p>

    ...and the settings in CSS would help you even the differences out. Some differences (like the ones I explained higher above...)...

    Otherwise fonts are different in shape, so therefore by size as well. This influences the lengths of your phrases.
    {{ DiscussionBoard.errors[8768313].message }}
  • Profile picture of the author bawany
    There is a method to upload the font file on your server, and call the font from the server instead of the visitors PC Using CSS, so this way even if MAC users don't have Calibri in their system, no issues your website will pick the path for the font from your server and display the Calibri font. and you issue can be resolved.

    Hope it will help
    Signature
    World Web is switching to Smartphones, IS YOUR WEBSITE RESPONSIVE AND READY FOR IT?
    UPDATE YOUR WEBSITE, GET RESPONSIVE NOW!
    {{ DiscussionBoard.errors[8768641].message }}
  • Profile picture of the author Istvan Horvath
    Warning to posters: READ the OP before posting. It helps!

    Lloyd, there is nothing you (or anybody else) can do about it: as you can see in the image below, the same text disp[layed using different font family will result in variable length. Embrace it and act accordingly... instead of trying to fight against it

    Signature

    {{ DiscussionBoard.errors[8773468].message }}

Trending Topics