Effective Web Typography / Learning Kerning
The right word is worth a thousand pictures and that's why quality web typography is a field every designer should be familiar with. We'll teach you typography basics, css tactics, & enough typography terminology to get you rolling.
Typography is a niche of design focused around the technique of arranging words together in an aesthetically appealing manner. Put plainly - It's the union of words and art. As the internet grows in importance, providing striking web typography becomes a larger piece of the puzzle. In this post we'll briefly introduce you to the concepts involved, useful typography terms, and show newcomers how to tailor their typography with CSS. All of these elements make a good web designer better and make decent web designs absolutely stunning!
It could be argued that typography first came about when Gutenberg dropped his first bible, but in a more general sense it existed long before that. Hieroglyphics, handwritten drop-caps, these we're artisan crafts going back thousands of years. While this may not convince you of the importance, it should at least indicate that people derive some sort of pleasure from seeing a little art mixed in with their written word. As humans pushed technology to allow for faster content production, we saw a massive decline in the beauty of the written word. This evolution and decline can be seen pretty clearly if you follow the history of Western Typography. While typewriters do have a minimalist appeal, but that's more novelty then intent.
With the growth of graphic design, the public once again found the joys of mixing words and art. One notable standout in the modern era is certainly the Swiss International Style that truly excelled in the mid-1900's. The amazing work of the schools like Bauhaus, played a huge part in reintroducing the general public to the value of well thought out typographic elements. This is when we we're formally introduced to such highly regarded typesets as Helvetica, which still puts a smile on a designers face to this day. With the expansion of the home computer, the general public found that they had the ability to contour type to their liking. In my opinion, the recent rebirth of typography in the design world is in large part a celebration of that.
I remember vividly the time I learned that I could adjust letter spacing while creating book reports in Microsoft Word. While that may have just been youthfully tinkering, I later realized that
Kerning was a real thing and that I wasn't the only one in the world who preferred not to see the two
T's touching one another. This illustrates an important point, a large part of dissecting typography terminology is knowing which parts are which. Without getting too deep in the weeds, here are a few of the most important elements you can use to identify specific parts of any given typeface.
Typography in Web Design
While many of the previous elements are defined by the font family, quite a bit can be controlled using CSS. Every designer has a different approach, but here are a few tips we'd suggest when considering how to handle your web typography.
Web Typography Trends and Sources of Inspiration
Like any other aspect of design, typography changes along with the times. Below we've included a selection of awesome posts, documentaries, typographic resources, and collections of unadulterated
"type-porn". These resources combined should help you gather a significantly more advanced perspective on web typography as a whole.
More Typography Resources that Answer "What is Typography"...
Hopefully this post has helped many of you assess your web typography approach and given you the terminology to discuss it accurately. If you have any typography related advice, send them this way and if you've found this post helpful - Please feel free to share with the buttons below.