5 Replies Latest reply: May 11, 2013 6:53 PM by mhollis55 RSS

    Can we specify font SIZES to fall back on, too..?

    jyeager11 Community Member

      The following code will give you a series of fonts to fall back on if the previous one is absent from the OS.

      font-family: Calibri, Tahoma, Geneva, Helvetica, Arial, sans-serif;

       

      However, Calibri is a much smaller font than Tahoma, so for them to occupy (relatively) the same space in a web page, Calibri would have to be set to one size, and the rest another.

       

      Is there a functional equivalent solution to the following (made-up/bogus) syntax?

      font-family: Calibri 14pt, Tahoma 12pt, Geneva 12pt, Helvetica 12pt, Arial 12pt, sans-serif 12pt;

       

      Or even just this will do :

      font-family: Calibri 14pt, Tahoma, Geneva, Helvetica, Arial, sans-serif;

      font-size: 12pt;

       

      Again, I know this is bad syntax, just trying to convey what I'm attempting to achieve.

       

      BONUS QUESTION: Is Calibri available on most OS's?

        • 1. Re: Can we specify font SIZES to fall back on, too..?
          mhollis55 CommunityMVP

          First, the bonus:

           

          Calibri is installed on 38.74% of Macintosh computers. It's on 83.41% of Windows systems. It was designed by Lucas de Groot for Microsoft to take advantage of Microsoft's ClearType rendering technology. It was originally distributed with Windows Vista, Windows 7, Windows 8, Microsoft Office 2007, Microsoft Office 2008 for Mac, Microsoft Office 2010 and Microsoft Office 2011 for Mac. The typeface is available in Google Docs as of September 2010.

           

          What I would do is create a font stack for Calibri thusly:

           

          font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

           

          Now, let's talk about size

           

          There is a CSS3 property called font-size-adjust.

           

          The font-size-adjust property allows you to specify an optimal aspect ratio for when a fallback font is used; if the substitute font has a different aspect ratio than the preferred one, the text’s x-height (roughly the size of its lowercase letters) will be preserved.

          Do not confuse font-size-adjust with -webkit-text-size-adjust, which is used to specify the size adjustment of text on the iPhone or Android Phones.

           

          If you look at the following page from the Mozilla Foundation you'll see it working.

           

          Problem is, as you describe your issue, that is not going to work, because you're trying to make every font in your font stack the same size, correct?

           

          If that is the case, you needn't worry. Fact is, if I don't have Calibri, Tahoma (in your font stack) will replace it (or Geneva, Helvetica, Arial or sans-serif). Thus, so me, I'll have that font instead of Calibri, not along with Calibri.

           

          Are you being a "control freak" in saying that you want to page's line breaks to be identical? X-heights the same? If that is the case, I recommend you either host the font or you use Adobe's or Google's fonts, which will arrive with your web page. That will make sure that close to 85% of all web browsers will show your page as you intend it should be.

           

          What about the other 15%?

           

          Well, there's Lynx. It's a text-based browser. You can spend days working on your font stack to get it to look just so and it's all wasted on Lynx, which uses the same typeface (whatever works in a terminal) for everything. My sister uses Lynx. She's blind and it makes things a lot easier for her screen-reader application for the blind. She'll never appreciate different typefaces on a website. She's more interested in what you have to say.

           

          There are some really old browsers out there that also won't be able to display a lot of the finer typefaces out there. I'm sure people somewhere are still using Netscape. And there are AOL users who, simply, can't display anything modern.

           

          I think you're more interested in serving as many people as possible, so what I would do is to create a font stack with type that is really close in size all down the line, save perhaps the ultimate fallback, like serif or sans-serif. 

          • 2. Re: Can we specify font SIZES to fall back on, too..?
            jyeager11 Community Member

            1) Thanks!

             

            2) You misunderstand me. I'm not looking to be a control freak and make every font EXACTLY the same. Verdana, for instance, is notoriously wider than Arial. This is fine. 99% of the time, I'm fine with the slight differences in font size. I don't mind an extra line on someone's screen falling back on a secondary font.

             

            However, there's something about Calibri that is more off than usual, size-wise, to other fonts. But I like Calibri so much that I would like to try to compensate for this size difference. Not for line-height, but the font characters themselves.

             

            I'd just like all the fonts to be -- for example -- 12px in size... except the first font in the stack, which if present, should be (let's say) 14px.

             

            Is this do-able without screwing the pooch?

            • 3. Re: Can we specify font SIZES to fall back on, too..?
              mhollis55 CommunityMVP

              Nope.

               

              And with respect to sizes, remember, web pages are supposed to be flexible. If I'm looking at your website on my iPhone, I may choose to increase the font size and there is nothing you can do about it. Sure, you can specify a size, but you had best be prepared for the client to decide to change that.

               

              What I am getting at with a font stack is that you create one where the type is all pretty much the same in width, height, x-height and so on. And the stack I just gave you for Calibri is a good one.

               

              -Mark

              • 4. Re: Can we specify font SIZES to fall back on, too..?
                jyeager11 Community Member

                I am aware people can change the font size. I'm also aware people can turn off javascript. Heck, they can disable images altogether if they want to. Those people know what they're getting into when they start customizing their experiences this way. The only way to make a website 100% full (and fool) proof is to make it 100% text, no images, no scripting.

                 

                In other words, I don't care if people change their font sizes, they're a minority and I am designing for the majority. Each of us can decide where they want that line to be for them, and it's never very long on these forums before someone tells us that the line isn't where THEY would've put it. I don't mind.

                 

                Thanks for the info. Your font stack for Calibri especially came in handy.

                • 5. Re: Can we specify font SIZES to fall back on, too..?
                  mhollis55 CommunityMVP

                  A few comments:

                   

                  With respect to "control freak," Desktop Publishers, working on a Mac and, maybe, the newest version of Windows with a real linotronic printer have the luxury of absolutely knowing output. Font size, kerning, leading, x-height changes, ligatures, almost any modification to type is at their disposal. We don't get that on the web. Instead, we need to carefully build font stacks that will kinda sorta work. If we start to obsess, known things about the Worldwide Web will either cause us incredible bouts of depression or rage.

                   

                  So build good font stacks.

                   

                  More and more people on the Internet are leaving JavaScript on. The reason is that JavaScript has grown up. It's no longer used for the silly stuff it was used for in the 1990s, it has become an integral part of what you see, from headers that have changing presentations to drop-down or pull-out navigation to copyright date updates and HTML5 animation.

                   

                  Additionally, there are plugins that stop the annoying stuff, like advertisements, which is why people turned off JS. 

                   

                  As I said, if you really want a certain typeface, you have to host it. If you love type, start building lookalike font stacks for yourself that will work. That will take care of the size differences.

                   

                  ---

                  When a Library expels a book of mine and leaves an unexpurgated Bible lying around where unprotected youth and age can get hold of it, the deep unconscious irony of it delights me and doesn’t anger me.

                   

                  -Mark Twain