Typography is the art (some say science) of arranging typed words to make a language visible. In other words, typography is what makes the words on your site legible.
Although having a solid understanding of typography isn't a must-have skill to become a web developer, it is something that will spice up any site or app you design down the road. The right mix of typefaces/fonts and their styling can make a dreary design pop.
Typefaces and fonts
I'm not going to split hairs between the nuanced definitions of typefaces and fonts. For our purposes, they are the same thing. If you want to start your own type foundry, however, you should learn more about their distinctions. Henceforth, I will refer to them as fonts.
A typeface is simply a set of characters that share the same or similar characteristics. There are general typeface distinctions between serifs, sans-serifs, slab-serifs, handwriting/scripting, display, and monospaced. And there are more specific distinctions like Helvetica, Verdana, Arial, Georgia, and Times.
Serifs are great for headings or titles. Sans-serifs are excellent for large blocks of text like on blogs or in books. Displays, scripting, and slab-serifs are generally utilized in logos or graphics.
Font pairs
It's common practice to employ two or more fonts in your website's design. However, choose them carefully because not all fonts look good together. To avoid delving deeply into the art of font pairing, the more curious can read this excellent tutorial on the topic.
I have one rule when choosing fonts for a website: they have to feel good together. Every font has a personality and pairing two personalities together means getting to know them a bit first. Google Web Fonts is a great free tool for looking at different fonts side-by-side. We'll look at using "web fonts" in living websites in a future post.
In general, I like to pair a serif and a sans-serif that feel right together. This usually means they share a similar weight/thickness, height, lean, and mood (serious or light-hearted).
Styling fonts
There are many ways to style an existing font. Some common styling options are bold, italic, bold-italic, black (very bold), and condensed (thin). These styling options can generally be applied via CSS if the font supports it.
Take care when styling fonts. Sometimes styling fonts can get out of hand and ruin the reading experience.
Typographic infographics
What better way to illustrate the power of typography than with a bunch of infographics on the topic?
No comments:
Post a Comment