There is a whole world of people out there obsessed with typography. They talk about things like "kerning" and "x-height" and other specifications of "glyphs." I am most definitely not a part of this world; however I have always been very curious to know what fuels their discussions and how typography influences design, especially on the web. As I have heard before, 95% of web design is typography. With this mindset I dove into Fluid Web Typography by Jason Cranford Teague.

Fluid Web Typography was such a joy to read I made time for it while visiting the Galapagos Islands and lounging on the beach

The concept of fluid typography

More than anything, I appreciated that Teague assumes you are a newb and draws out the playing field of typography on the web so you are aware of what's out there. Teague's approach is called "fluid typography" which is comparable to "progressive enhancement" when we talk about CSS. Basically you as a designer need to accept that the web is not a static medium and that your pixel-precise Photoshop comps are not a reality. Fluid typography instructs us to take control of typographic styling by relinquishing all control from the browser ("leave nothing to default"), styling text so our content is outfitted with a proper voice, and insuring that our typography styling is versatile enough to change when the reader needs it to, and appear in a different font when the primary is not available (establishing a font stack). This philosophy seems sound to me and in-tune with the direction of progressive enhancement CSS, where we have learned to expect uniformity neither cross-browser nor cross-platform (especially when we think of mobile web…)

The first two chapters of the book really fill you in on the basics. "Foundations" explains the importance of typography, gives an overview of digital font formats, and analyzes the past, present, and future technical implementations of typography in web design. Chapter two, "Characters and Symbols" teaches the basic terminology that typographers use and succinctly explains the types of type (serif vs. sans serif, monospace vs proportional, etc.) as well as how character and text-encoding on the web work. I really appreciated this explanation as well as the clear explanation of HTML ampersand symbols. Teague also points out common symbols people forget about (ellipses, link arrows, fractions, etc.)

Font embedding, font linking, or JavaScript- take your pick

The rest of the book illuminates the present-day situation of typography on the web: we can start to move away from the usual suspects (Times, Arial, Georgia, Verdana, and Trebuchet MS) and into others. This book will teach you how to expand your font repertoire, through web safe fonts (Teague lists 68 fonts which are likely pre-installed on both Windows and Mac OS), font-linking services or JavaScript embedding technologies. Teague provides the practical knowledge of how we can now use CSS, font files, and/or type foundry services to use new font-faces on the web. He points out the most popular options for font linking/embedding (TypeKit, Cufón, FontSquirrel, etc.) to help those truly out-of-the-know (aka me) get a foot in the door.

Typography 101

Aside from this analysis of the technical possibility of using new type faces, Teague teaches us things about typography we should all know. How to size columns optimized for readability, line-height formulas that makes sense, using ems for sizing so things are fluid and scale properly, the effect text alignment has on your copy (if you don't know this word, it refers to the body text of a page) and what sizes and type of text are readable on the screen. The chapter "Emphasis and Contrast" is helpful in understanding how typography affects how the reader's eye scans a page and how you can use things like font weights, opacity, text shadows, color and contrast to insure your readers catch the important stuff.

The book's last chapter, "Grid and Composition" is awesome because it puts everything together and discusses font stacks, scales for sizing text elements (from h1 down to copy), and interestingly a discussion about fixed versus fluid grid design and how to size your typography in both cases. I thought it was very interesting that Teague advises new typographers to limit themselves to a single font rather than experiment with multiple in their designs. However with all the cool nuances you can achieve with font-weight, color, contrast, etc. one properly chosen font should be enough to keep you busy.

Conclusion

As you can probably tell, I really enjoyed this book. It filled in a lot of little blanks for me as a web designer and has given me the knowledge and tools (there is an awesome appendix with font resources) necessary to start taking control of how my content speaks to the reader. The one thing I think Teague left out was a discussion of the limitations of typography on the web because of readability issues. Many fonts will look great in print, but not necessarily on the screen, because printed material can be at a much higher resolution than your monitor. The problem is that many fonts do not have proper font hinting, which helps the operating system interpret how to display the font and avoid jaggy edges. Macs do a better job of this than PCs. The bottom line is that most cool fonts still are not usable for body copy and smaller sizes. You need to be very careful. So just because you can now successfully use all of these cool fonts in your pages with the new technologies, you may not be able to because they cause readability issues. For more information on this, I highly recommend you check out episode #1 of The Big Web Show.

In conclusion, if you are new to the typography world, I highly recommend Fluid Typography as a way to raise your awareness of the possibilities out there and start to get more involved in the typography community.