There’s a lot to keep up with when it comes to branding your business online. Something that tends to fall by the wayside is the usage of typography, specifically the font choices made and used on websites and applications. If the most you know about fonts online is that you shouldn’t use Comic Sans (or if you didn’t know that…), here’s a handy overview of Fonts On The Internet.
In its earliest days, the Internet was pretty much just text. Changing the font displayed wasn’t really a thing until the implementation of the (now dead) <font> tag. The text displayed was limited by what the browser allowed, based on the operating system. This group of fonts already installed on computers by default are considered web safe fonts. A few of these include Arial, Verdana, Georgia and Comic Sans.
If a font wasn’t available to use, the practice of using images as font became the norm. Basically, if you wanted text displayed in a font that wasn’t web safe, you’d open an image editor, type what you wanted, then save it as an image.
This worked okay, but had a several problems
Considering the disadvantages, you might wonder why this practice existed for so long. Eventually, a new CSS standard gave us a bit of help so fonts would be easier to manage and be allowed to shine.
When @font-face was introduced for CSS, it allowed fonts to be imported from a file instead of only using what existed on a user’s computer by default. To do this, you’d need multiple file types per font, because of differences in fonts used between Windows, Mac, etc. The various font file formats have changed and evolved over the years, so the need to provide multiple font file types has decreased for modern browsers.
The coolest thing is how many different ways there are to get different fonts:
Font fallbacks have been a standard for font declarations from the earliest days of the internet, not just since font-face. When you declare a font that you want to use, adding 2 or 3 other fonts afterward says “Hey Browser, if the 1st font isn’t there, look for this one. If that one’s no there, look for this one” So in the code piece below...
font-family: 'Merriweather', ‘Georgia’, serif;
...if the browser doesn’t find a reference to “Merriweather”, it’ll look for “Georgia”. If it can’t find that, it’ll insert any font on the computer that’s considered part of the ‘serif’ font family. This ensures that some form of font file loads, even if it’s not your first choice.
There’s a mantra some folks aren’t aware of: Just because it’s on the internet doesn’t mean it’s free. Fonts are created and distributed with specific licenses, including usage online. This can be confusing when you’re buying fonts for use in print materials, because you risk breaking your license agreement and getting in Legal Trouble if you were to try to send those files online.
Sometimes, you can buy packages that include both the print version and the web version of the font. However, be sure to read over the license and what you’re buying, as some require renewal. Depending on the company and font, you may not even be allowed to have physical files for web font versions of a font and will instead have to use a subscription service instead.
Web typography and fonts have come a long way since the appearance of the wee <font> tag in the mid 90’s. Regardless of your business needs, the ability to find and display fonts that align with your brand is significantly easier. And yes, you could still Comic Sans if it's absolutely needed. Just make sure you include a fallback for non-Windows folks.
Need more web advice? Contact the leading web consulting companies in St. Louis by completing our contact form today!
When we noticed our client's websites weren't performing optimally, we embarked on a website redesign that reaches the modern user.
Web animation has become increasingly popular and enhances web usability. See how our UI/UX design team uses web animation to bring sites to life.