May 2, 2017
Not too long ago in a galaxy far away, a site design could only use Arial, Times, Times New Roman, Courier, Courier New, Verdana, Tahoma and the always classic Helvetica. Today, we have many font options to choose from that are supported by all modern browsers and that are up-to-date by the user. There are several ways to use the right font for the design and brand by embedding fonts, using font kits and, of course, using Google fonts. In addition, load times for modern fonts and font kits are faster than years past.
I am not a developer, so I am not going to get into the development side of working with font kits. Font selection for responsive web or web apps, and the crafting of fonts is what I want to touch on. What I mean by the crafting of fonts is the use of line spacing, size, letter spacing and, most importantly, readability of the font selected. Let’s also not forget about choosing the right font to tell your visual story. The right font selection can make it or break it for your brand’s voice, as well the user experience.
The Lost Art of Typography
I could write several articles on the subject of, “the lost art of typography.” In my opinion, it is a lost art form simply because modern responsive websites have taken over the internet. Additionally, content delivered to readers is now read on devices that are all different in screen sizes and makes. This means traditional print “fixed” sizes go out the door. Not only that, code tells the font what to do and how to behave, unlike fixed type by a human for printed materials.
The boom of “content is king” on the web has killed the art and craft of typography. At least with the Adobe Flash site boom of the 90’s, designers could control how fonts would be displayed. With Adobe Flash, we could control the font design and selection of a font. Yes, a flash website could take five minutes to load, but at least we had cool animated preloaders to entertain the waiting user…LOL.
There are many ways to select the right font and have the font display correctly on your site. Google fonts has a large amount of fonts to choose from and it keeps growing.
My Top 10 Google Fonts
Line spacing, letter spacing and font selection is a craft you can not teach in one blog post. What I am excited about as a designer is the font selections available that will display correctly on a responsive site or web app. In addition to Google fonts, there are plenty of Type Kits that all modern browsers will recognize. Let’s get right to the most available fonts out there and used most often by other designers, Google fonts.
My top Google fonts, in no particular order, are based on their modern look, multiple weights available and browser compatibility.
A carefully selected font that is well designed and uses proper line spacing and size, will result in a product that is not only visually stunning but also functional. At PointSource, we work collaboratively to help each other through tough design problems and test everything, even font designs. As a result, we are able to provide the best possible product for a business, product and most importantly the user. Carefully selected and carefully designed fonts are as important as the user experience.