Posts

Typography has become a fundamental part of design in every way, even making its way into web design over the past few years. You can’t just spill out words and letters onto a page and expect it to look good, and designers have turned the art of making typography look great into a science over hundreds of years.

Somehow, designer Ben Barrett-Forrest manages to condense all of this into a five minute long fun and informative stop motion animation about the history of fonts and typography, called… The History of Typography.

The short film starts out at Guttenberg and Blackletter, but manages to trace the history all the way through Futura, to pixel type and the technology that allows everyone to create their own typeface if they desire.

Barrett-Forrest used 291 paper letters, 2,454 photographs, and 140 hours of work to create the film.

Nexus FontIf you haven’t heard from me and every other web design writer, typography is a really big deal in web design right now. How you decide to use typography on your website can affect how your audience perceives you and judges your quality. But there are so many options. Your font should always be legible, but it also needs to be charming and visually interesting.

If you use the correct font in a design, you can greatly enhance the finished product. But, if you are careless and choose a font that doesn’t fit, it will stick out like a sore thumb. To put it simply, websites are absolutely reliant on typography.

As any designer can tell you however, a font collection can quickly become a huge pain. There are constantly new free and premium fonts coming out that you have to keep up with, or at least regularly browse. Then, you have to actually manage to organize and sort these, then figure out which to use in your next project. This can mean making lists, and doing constant comparisons between fonts.

Wouldn’t you like a tool or program to help you with all this? Of course you would, and of course the web design community has you already taken care of you with many options for both Mac and Windows. Andra Postolache collected a few of the best font management tools. Some are costly, while others are free. The only way to know whats right for you is to try them out.

Sprout Serif

 

There is something inherently nostalgic and sweet about handwritten fonts in design projects. Not only do they make designs feel more personal and loan some much needed personality to your projects, they immediately draw the eye in ways that your more standardized and formal typefaces don’t. They elicit emotion and a personal connection. You can’t say the same for Times New Roman, for sure.

Of course, handwritten fonts are all unique and can be used for a huge array of design projects. There are script fonts with extensive flourishes which look right at home on wedding invitations and greeting cards, but there are also the more shaky fonts designed to recreate the look and feel of journal entries or rushed messages. There might literally be a handwritten styled font for every occasion.

Naturally, these fonts work as well in digital or web design as they do in print media. Websites can strongly benefit from the more intimate appearance their copy adopts when using a handwritten font. You can charm visitors or make them feel more comfortable with the right font selection, but the key is knowing how to pick and use these styles.

For instance, many of the fonts that look handwritten push the bounds of legibility. There are those which look scrawled out in thick marker, as well as the extravagant scripts which can be obscured by their own ornamentation. These styles can absolutely work well, but they are best reserved for headers or isolated small blocks of text intended to make an impact, because readers absolutely won’t spend their time trying to make sense of blog articles or extensive copy that is hard to read. These styles attract visual interest, but don’t work in excess.

There are plenty of handwritten fonts that do work for blurbs or more extensive copy, though you have to walk a fine line when using them. It is still best to use traditional fonts for comprehensive blogs or anything that will take more than a handful of seconds to read, but front page sections such as navigation or small “about us” blurbs can be made more interesting with a immediately legible but unique handwritten style.

Maryam Taheri collected 12 handwritten fonts that work in a variety of situations. You won’t find the swirly decorative script fonts most tend to imagine when they think of handwritten typefaces, but you will find a wide variety of fonts which will make your site seem charming, intimate, and unique.

WhatIsFont Screenshot

Choosing the right font has always been one of those tasks that sounds deceptively easy, but can slowly drive you crazy. It has become easier thanks to new websites with better searchability, but if anything we are now dealing with the problem of too many options. While we used to have to scavenge for the best fit from the low quality fonts available for graphic design ten or fifteen years ago, now we have to choose the exact best fit from countless options.

Thankfully, as with all design quandaries, there is a new tool to help us out. WhatFontIs allows you to find the exact font you are looking for by uploading an image containing the font or directing the tool towards a URL with the font present on the page.

All in all, the whole thing only takes around 10 seconds. You upload the image or enter a URL, then you confirm the letters the website recognized. From there, you’ll be given a list of font options that you can easily download. It is as easy as it sounds, and if for some reason, you can’t find the exact font you’re looking for, you will almost definitely be given an option that will get the job done well. They currently have a database cataloguing around 280,000 fonts, so you’ll always have options.

Not too long ago, web designers were restricted to a set of universal type faces that were installed on nearly every computer. If they wished to use more extravagant typographical designs, they pretty much always had to create images with them instead of directly placing the text on the page.

With the @font-face CSS rule, designers can input their own fonts on websites, not relying on the visitor to have the font already installed. In a design community where there are literally hundreds of thousands of free fonts available, having the freedom to use any font you desire is like taking blinders off of a horse.

Keep in mind the rules of design however. More than three fonts on one page is going to look excessively busy, and will likely slow down the loading times of your site. Designmodo helps walk designers through adding the @font-face CSS rule, and they urge everyone to use universal fall back fonts, which is smart advice. Not every browser supports @font-face, and you don’t want to ruin accessability for any group of users.