Mystery Quest, Flamenco, Unkempt…these are just some of the new typefaces that are transforming the look of new websites. With the rise of modern, standards-based web browsers over the past few years, web designers and developers now have a myriad of font choices to select from. The next time you get a new website design, there’s going to be a lot more room to play!
Not too long ago, typography choices were limited to web safe fonts. If you wanted to use an alternate font, these were usually encapsulated in graphics, or employed elaborate Flash (SiFR) or JavasScript (Cufón) techniques to make such rendering possible; this is not the case anymore! In this article we’ll explore three of the popular options that are making a wider variety fonts available on the web.
@Font-face
@Font-face really has made it easy to take virtually any font used in a design, convert it, and make it viewable in all modern web browsers. Although it’s been around for a while (having been made part of CSS2 in 1998) it’s only caught on in the last 5 years or so.
The biggest challenge traditionally had been that different browsers use different font formats for rendering. Thankfully, Font Squirrel’s Webfont Generator has come to the rescue, and now allows for easy conversion of typefaces to a downloadable package containing all the formats as well as sample CSS and HTML.
One thing to keep in mind is that not all fonts can be converted, and Font Squirrel will alert you of this. Those with licensing restrictions will require subscription to a font library offering the typeface(s).
Google Fonts
Launched in 2010, Google Fonts is an easy-to-use service for implementing and using web fonts. Unlinke @Font-face, Google Fonts don’t need any conversion, just a simple script tag inserted into your HTML in order to use the fonts you’d like. While the library is still smaller than other services, it’s expanding fast (up to 629 font families as of this article), and best of all it’s completely free!
Typekit
If you’re looking for what’s probably the best service out there, look no further than Typekit. Typekit uses the same technology as @Font-face (with some JavaScript), and as part of the Adobe Creative Cloud family, it makes available an extensive collection of licensed-based fonts. Specifically you’ll find popular typefaces like Myriad Pro, Garamond and Futura. While there is a nominal cost, this is a popular one with web designers and at $50/year for unlimited site usage, this one really is a steal!
These are just some of the offerings out there enabling better web typography, but this is a growing area with new services popping up all the time.
So, in the end, what does this all mean? Your next website is going to need some serious design game behind it to navigate the bigger world of choices. It would be way too easy to run amok with whatever’s new, regardless of whether it’s appropriate or not. The ultimate purpose of your web design is to support your brand, not dilute it. If used successfully, the new exciting world of fonts should help you get closer than ever before to bringing your brand to life online.
Feel free to share your experiences with web typography and design in the comments below!
Get Started Today
Start getting the online leads your quality business deserves today. Get a free no-obligation initial 30 minute consultation from one of our Google Certified Experts.
An EnvisionUP expert will respond within one business day or less with the next steps.
Watch Ellie flourishing despite 3.
Watch Ellie flourishing despite 4.