Google Fonts is a great budget solution and ideal for situations where you may be footing the bill rather than your client. The designer Georg Duffner has generously made his work in progress available on Bitbucket but it’s not production ready. But the flaw with this version is that there’s only one weight and style available there’s no bold or italic. Typefaces such as Roboto and PT Sans owe their popularity as much to their free availability on Google Fonts, as to their design qualities.Ĭurrently, the only variation of Garamond available on Google Fonts is EB Garamond, an attempt to open source the Garamond typeface. The only downside is that the number of typefaces on offer is extremely limited. For a grand total of $ 0 you can easily load webfonts into your site using CSS. Google Fonts is, for many designers, the point at which they end their search. (Technically, there’s nothing preventing a copy of Arial being renamed “Garamond”, in which case our font stack would use that.)įont stacking is therefore a superb back-up, and should be considered for use in conjunction with all of the solutions below, but it’s less than ideal as a primary solution. There is however, one major problem with font stacking, especially with a typeface like Garamond: there are so many pirate versions in circulation that it’s impossible to know which font is named “Garamond” on the user’s system, not only can we not be sure the design is consistent with our expectations, the scale of the font may be radically different from the version in our design. Pros & Consįont stacking is free, by far the fastest solution, and depending on your chosen typeface can be very effective in the case of Garamond there’s a good argument for calling this ‘job done’. The majority of viewers are going to see Garamond, a few others will see a reasonable compromise and a tiny minority will just get their default serif font. Our final modified font stack looks like this: font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif We need to add serif as a final catch-all, but as most systems use Times as their default serif, let’s slot in the far superior Georgia for anyone who’s slipping through the cracks. Hoefler Text works well in place of Garamond, so that can stay. Secondly I disagree that either Baskerville or Times are adequate substitutes for Garamond, so let’s drop them. Well, we know that there are numerous versions of Garamond available, so we can add in a variation in the second slot as a minor compromise. The question is, how can we improve this? Here’s the suggested font stack that covers all bases: font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif There are lots of font stacking resources online, but one of my favorites is cssfontstack.com, it’s a great starting point for a font stack, but be aware that more often than not you’ll need to bring some expertise to bear.Īccording to cssfontstack.com Garamond is available as a system font on 49. Font stacking is a CSS technique in which you specify a number of fallbacks starting with your first choice and ending with a catch-all solution. Having extolled the virtues of webfonts, the first option we’ll consider uses no webfonts at all. We’re going to illustrate these options by focussing on the best way to deliver an all-time classic typeface, Garamond. In this article we’ll arm you with the knowledge you need to make informed decisions when choosing between font technology. If you know what you’re looking for, all of the options are simple. However, the enthusiasm with which we’ve grabbed at font options in web design has lead to a bewildering array of choices so much so that many designers opt for the path of least resistance, allowing the desire for simple implementation to dictate their typography. Prior to that point it’s arguable that we were less designers than engineers. Web design came of age the day webfonts entered wide-spread usage.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |