Typography is an essential aspect of web design. Some may even argue that it’s the very core of it. In the simplest of terms, typography is the styling of letters or fonts and web typography is the digital version of this.
Harkening back to the era of Windows 98 and the infancy of the Internet, you mostly only saw “web safe” fonts, fonts pre-installed on the user’s machine. Trying to include anything else could result in a visual mess for those who didn’t have these fonts. Too many images on a page could melt a personal computer, and the Internet was much too slow to download fonts on a whim, so designers were stuck.
On modern computers, we now can download a tiny font file without a metaphorical fire risk. 100 kilobytes really isn’t as much as it used to be. Whether you choose a hosted approach–allowing the provider you buy the font from to host the font–or self-hosted, it’s a simple matter for visitors and developers, alike.
One Quick Quirk…
There’s one important technical aspect to keep in mind. You’ll want to specify a fallback font in case, for whatever reason, the font you’ve chosen cannot be loaded. See the “Web Safe Fonts” link at the bottom of this guide for a tutorial on this. This requires referencing a generic font family.
There are five generic font families in CSS:
- Serif: a font with lines and strokes at the letter ends
- Sans-serif: a font which does without these lines
- Cursive: a stylized font
- Monospace: a font where each letter has the same spacing between them, and
- Fantasy: a style focused around the design of the letters.
Other than that, there’s not much else to say. Compared to other aspects of web design, fonts are an easy enough matter technically–the only thing you’ll need to worry about is getting tangled up in licensing issues.
Choosing a Font
Even if you’re a CSS master, you will need to choose the right font. And with millions of them spread all across the web, that’s no easy task. Of course no one with common sense will outfit their very serious news site with Comic Sans or Wingdings, but it’s still not quite so easy as some might think.
In the end, it’s all about the sort of tone you’re trying to set. If your site is meant for serious readers, legibility and clear, bold text is important. On the other hand, if you’re designing a site for a daycare, having a few swirls or “silly text” wouldn’t hurt. For blogs, a cursive typeface in the titles might add a more personal, relaxed feel.
Again, common sense reigns. If you’re making a more casual site, it’s alright to use decorative text in headers or logos–but don’t make body text and large paragraphs in a cursive or fantasy font unless you want to injure your readers’ eyes.
In the end, you’ll just have to experiment. See what works and what doesn’t, what suits you and your website. Test a variety of fonts and font types, and have fun. However, you probably shouldn’t use more than three fonts on your website, otherwise you’re apt to give your visitors a headache.
Font Repositories
Now that you have a basic understanding of web font design, where are you supposed to find fonts? The Internet is full of font sites. But some are rather unclear as to what their purpose is or don’t offer up enough info about how you can legally use the fonts.
This list contains only the most useful sources of fonts on the web. All of these contain free to affordable pricing plans, a clear license, and–most importantly–high-quality typefaces.
Google Fonts
Beginning our list is a directory that’s taken over the Internet and set a great example. Unlike other font sites, Google Fonts offers their services for free, and there’s no sticky licensing to worry about.
The best part is, along with the lack of legal caveats, the site’s 800+ selection provides more than just your typical Arial. Whether you prefer something neat and simple, like Dosis, or you need a bubbly look like Barrio, Google Fonts should be your go-to if you need a variety of striking fonts for your website.
Font Library
Boasting an impressive 1000+ fonts, Font Library is another free resource you might be interested in. It’s completely full of impressive, aesthetic typefaces, some designed for non-Latin alphabets as well.
Like Google Web Fonts, Font Library allows you to simply stick the HTML or CSS code in, and you’re on your way. The only downfall is that the fonts on this site are not under a single license, so it may be worth your time to read the fine print carefully.
Typekit
Typekit’s elegant and professional fonts will leave designers drooling. All 5000+ fonts on this site have a single license, so you can rest easy while sampling what’s on offer.
Though Typekit typically isn’t free, there is a starter plan with just under a thousand web fonts. There are a lot of limitations, so if you’re short on cash and have a lot of websites to design, you might be better off going elsewhere. However, the $50-$100 you’ll spend here could be well worth the money for open access to tons of beautiful fonts.
Fonts.com
What if you’re not just designing a website–perhaps you need posters, graphics, even T-shirts? Fonts.com has you covered. With over 2000 font families, all available for web and offline use, the possibilities are endless. You can simply buy the fonts you’d like or purchase a plan for access to all of them.
Note that the license allows for “personal or internal business use” and it’s indicated that self-hosting may be limited and using their SkyFonts app is required. Make sure to read the EULA carefully. But if you decide to buy, you’ll have a whole roster of beautiful fonts at your fingertips.
MyFonts
MyFonts is a straightforward service that provides typefaces for both web and offline use and attainable pricing plans. The selection of fonts is diverse and well worth a look, especially in comparison to some of the other services on this list.
Typotheque
Need something more original? Typotheque is the place to look. With over 2000 fonts, all originally and carefully designed, it’s simple to give a website a unique, modern feel. Besides this, one of its major points is the lack of annoying monthly fees. Instead of being forced into a plan, you can buy exactly the font you want, with the license you need. Don’t need it for offline use? Just buy a web plan.
Typotheque is all about ease of use. Their fonts are CSS-friendly, though you can also purchase a license to self-host if necessary. And there’s no limit to the ways you can use or reproduce the fonts, an important detail considering most font licenses have tons of stipulations.
Fontspring
Licensing can be a headache. Spending hours squinting at a monospaced EULA can hurt your eyes and your sanity. Luckily, Fontspring is happy to provide a wide array of fonts and styles. There’s no subscription required, just a one-time purchase, and unlimited usage means you can just get a font and stop worrying about it.
Plus, most are very cheap. You won’t be shelling out $50-$100 dollars just for one font, and you get a better license and a better deal. Overall, Fontspring is a great, cost-effective service.
Cloud.typography
Cloud.typography wants to revolutionize the industry, bringing a feature-packed webfont program to the table. Though it includes less than 250 fonts, all are expertly crafted to give off the most businesslike vibe. Plus, each letter is rendered at the highest quality, so small and large screens alike retain pixel-perfect text.
It appears that you’ll need to buy each font you use, but you get five for free, and previous purchasers of fonts will retain ownership. You can easily customize with styles like small caps, use the fonts on an unlimited amount of domains, and you even get access to website usage reports. Overall, it’s a fast and secure service, and perfect for professional designers.
Webtype
Offering about 150 bold, professional-looking fonts, Webtype created their fonts with a focus on compatibility. They work across all major browsers, and they’re designed with these browsers’ differences in text rendering in mind.
The typefaces on this site speak nothing but pure quality. It’s very important that fonts display correctly, and are used in their intended size. Webtype makes sure to give you this information. With backings from giants like The Font Bureau and Roger Black, it’s easy to trust them. Their hosted plan is a cheap annual fee, so if you need the sort of serious feel generated by newspapers, check it out.
Web Safe Fonts
Perhaps all this is a bit too much for you. All you need are a default set of fonts that are guaranteed to be displayed correctly and consistently no matter where they’re viewed from. In that case, MIT has provided a list of web safe fonts, and also explains the fallback system and how to implement it.
Good Typography Doesn’t Have To Be Hard
Now you can approach picking both a repository and fonts to use with confidence. Hopefully, this guide helped narrow down the options a bit. Best of luck!
Leave a Reply