Answers to some of your Questions! (maybe)
Website Created May 2016, last updated 01 September 2021 Frequently Asked Questions, How to use and/or host your own Webfonts and more!
Frequently Asked Questions
-
What is the difference between a font and a typeface?
A typeface is what I design: The “face” of the type, so to speak. This can be done on paper, or in a computer program (I use Glyphs and Birdfont), or just about any other medium you can think of.
A font is then the digital manifestation of that typeface, something you can install on your computer or link into a website. A little file that contains the instructions for the computer how to render the letters I designed. (In the old times, a font would be the physical metal pieces that make up the letters).
-
Why does it matter which font is selected for a website?
A font or a typeface carries a lot of the “brand” you are trying to convey. You can think of this most obviously in some extreme examples: Think of Coca Cola of Walt Disney. Their (originally hand-lettered) Logos are easily distinguishable, even if they spelled out something else. Think of Marlboro (a font you can actually buy). Again, the recognition of the brand happens to some extend though the typeface. It’s kind of like with color: If you think of your school, most likely they had their own colors. Your favorite brands, are distinguishable through their color.
So in the same vein as color, choosing a font for your website is not something that should happen on a whim, because it can—subconsciously and consciously—change the look, feel and perception of your website. You should think about what fits your brand, something you want to convey, and then stick with it, and be consistent.
Most people do this intuitively when choosing which system font (the fonts that come pre-installed on your computer) they use. And while that is a great way to do it (I am a very intuitive artist myself), if you wish to set yourself apart, choose something a little more custom, so you can set yourself apart from others.
-
Why are fall backs important when designing a stylesheet? After all, the web is no longer a new thing. Do web pages ever really not load a font?
There are two parts to this question: The first one is in regards to something call the “font-stack”, a literal stack of CSS commands that look for a typeface, then, if not found, default to a different one, then, if not found, to a different one, etc. Does this really make sense if you are using webfonts? The answer is maybe.
Perhaps reading through Using Webfonts, Making Webfonts and Hosting Webfonts will clarify some confusions. But the short answer is that there is not one type of “webfont”. While a comprehensive web font package will include different file types that will render the font on a host of different systems (after all, the method to included fonts in websites has been around since CSS1!), there are so many different types of devices and browsers out there, that yes, there are still browsers that will not render all types of typefaces. Old Blackberry and Android browsers will not render the most common standard for web fonts, etc.
The other issue you may want to think about is loading time. Webfonts, especially if not subset (read more about that here), can be the size of a small image, so do you want your users be able to read the text right away, even if at first it doesn’t look like the typeface you want them to see? This has the downside that the page will reload, potentially reflow all the text when the web font does load. Or do you want the user to not be able to see the text until the resource, the web font has been loaded completely?
There are many ways to control and think about this, and there has much been written about this subject, and there is probably no correct answer.
-
I've read about free font offers found on the web. What makes this different from just using Verdana, Arial or Times New Roman on a stylesheet? Aren't those free too? Also, what is a “Google Web Font”?
Actually Verdana, Arial, Times New Roman and many other system fonts are not free at all. Your operating system provider has merely paid their licenses for you (or commissioned them). But they are, in a way, free to use for you. And in some instances, actually, a safer choice (see above). But think about the question of brand: If everybody looks like Arial, would you stand out? Would a standard font make you look more unique than a custom typeface, maybe even one you commissioned, one that only you use?
There are many free fonts online, and many of them good, many of them not so good (both from a technical and design aspect), and you should think about using them in the same way you should think about your brand. If it fits your brand well, why not use them?
Be careful though: Some fonts are free for personal, but not commercial use. Some fonts are free for desktop, but not for web use, and vice versa.
-
Also, what is a “Google Web Font”?
Google, like with anything internet related, provides a service that “serves up” free fonts for you to use on your website without having to host them on your own servers.
Remember loading times? Google Webfonts do have the advantage that their ubiquity makes them likely to be cached in your browser, maybe from visiting another website that used this typeface, so you may not have to wait for the font to load at all!
Aside from the selection (which can actually pretty good, depending on your needs), you are obviously using Google to host your fonts. Why might this be a problem? Google is a data-mining company. Because every computer pulling up your website also makes a call to Google to get the webfonts, Google knows which computer is accessing which website, at which time. Without even using Google! And let’s say you are managing a WordPress site that is using Google Webfonts: Because you are using a web-interface to edit and write, Google also knows who is editing which websites, at which time, from which computer. And because a lot of people are using Google Webfonts, Google can probably compile a pretty comprehensive browsing profile (a list of which websites a user visits), just from their web font hosting services alone. Sounds scary? Then read on…
-
How does one load/add a custom typeface to a web page?
Well, I have some dedicated sections on that!
-
Font mixing: is it bad to use more than one font on a website?
Of course not. The web is primarily typography: It’s written text, laid out in a hopefully legible, intelligible way for your readers read and comprehend quickly and efficiently. So everything people have been practicing in print-typography, generally can be applied to the web.
I recommend the book “Thinking with Type” by Ellem Lupton (pick up “Type on Screen” also while you’re at it!), which has some great introductory information on how to think about type and fonts. Previews are available on Google Books, and thinkingwithtype.com.
In general it can be said that when you combine typefaces, strive for contrast rather than similarities. Every typeface should have a role to play. You can use a different typeface where you normally accentuate using bold or italic type: In headlines, in footnotes, in an aside, etc.
As with anything, you can also consciously decide to break these rules, but I highly recommend to understand them first, so you can break them with a purpose! :)
-
Hey, I see “Die Blockschrift” … Why did you kill the Blockschrift?
Die is just the female article that would translate into “the” in German. Us Germans like to put articles on things. And Schrift is a female word.
-
I see! And Schrift means…
…font, type, and writing in German.
-
So you are …
German.