A Fresh Design – Part 1: Typography

For the next few weeks, I will be adding posts here going through some of the process of the newly redesigned robsawyer.me. Entering into web design, I was greatly helped by reading what others have done and picking apart different websites and I want to give something back. Look for the “Fresh Design” series.

Beginnings

While I do occasionally do some paper prototyping, my work flow generally begins with Illustrator. For a while, I have been collecting various font stacks that I find for free through different sitesIllustrator is simply the program which I find most fits my uses for digging through fonts and rough designs. Illustrator also provides an easier way to interact with letter forms, should one wish to make small tweaks. I also find that working in vector, especially during the beginning stages, is far safer as one can later scale things as needed without having to worry about the initial size, but I will touch more on that when I come to speaking about layout.

Rob Sawyer logo version 1
The final design for a logo

Beginning the redesign, I knew I wanted to build a responsive site and to use bold typography and colors. Typography began the process (and looking at color, but that I will save for the next post). I was quite happy with the typeface from v1 of my site and so decided to begin there. For version 1, I had taken Tw Cen MT and modified it in illustrator to get the forms and flow that I was searching for—this became my starting point for the new site. Though this font remains in the form of the typographic logo, it is discarded throughout the rest of the site due, in part, to its lack of web-support. Instead I fell on Edmondsans (bold) as my primary heading font; it is a wonderfully clean typeface from the Lost Type Co-op (a site that I urge everyone to support). I also wanted something more delicate to pair with the bold Edmondsans variant. The lighter variants of Edmondsans did not provide enough contrast, so I landed on Quicksand (book) as the complement headline font.

portfolio font choice
Balance between Edmondsans bold (left) and Quicksand book (right)

Body Type

The next major typography question was for body type. Though I feel that Edmondsans (in its regular weight variant) would provide perfectly reasonable body copy, I wanted something with a yet different feel to, once again, provide some contrast to the headlines. For this, I turned to google webfont in search for a nice, free sans-serif. I may yet experiment with a serif font for body type, but I felt a clean sans would easily fit in with the strong lines throughout the overall design. Though I had planned to use Droid Sans, a very nice font from google, when I fit it in with the actual page, I did not find that it read very well. One of the most important things, when choosing a body font-stack, is to test it out with actual content (not just lorem ipsum). Take some time and put in some real text then try to read through it as a visitor would—there is a somewhat intangible quality that one must look for in a font, sometimes you just need to see whether or not it feels right in actual use. For this blog, I also wanted an italic serif variant to serve as a descriptor for each blog post—I chose to simply use Georgia for this, as it has great support across different devices and was a simple addition.

In the end, I chose Open Sans for the body of the site and set it to display at 19px and a line-height (vertical distance between each line of text) of 1.7 for larger screen sizes. 19px may sound huge, but, for the font I chose, it appeared slightly smaller (around the 16px size that should be used as a rule-of-thumb). You may be thinking, “Sure, but it is still way too big.” And it certainly may be large, compared to what is seen on a majority of websites; bigger than anything you would see in a book; and definitely larger than you are used to using in MS Word documents. But this is the internet—we are designing for screens, not print. Smashingmagazine has a great article on why we should all use 16px.

As I stated above, the 19px font-size and 1.7 line-height were used for larger screen sizes. As screen width decreases, the font-size also decreases and line-height increases. Font-size is decreased in order to maintain a readable line-length (so each line of text doesn’t only have a few words) and because the smaller screen widths targeted are also those more likely to be held closer when reading. Even though the font-size has been decreased in the measure of px, it will be viewed from a closer distance, thus making its visible size no, or only slightly, different. Line-height is increased as well in order to provide the letters a bit more breathing room on the smaller screen—this was done largely based on feel (and feel free to disagree with my choice in the comments!). The geniuses over at Information Architects have an excellent, in-depth article on web-type that addresses issues with responsive design as well. If you are unfamiliar with responsive design, take a minute and resize your browser window and see how the page changes–this is far more marked on robsawyer.me.

Wrap up

Typography is an incredibly huge part of web design and I am thankful that, gradually, browser support for more in-depth typographic techniques is coming. @font-face is an incredibly useful tool, but it still cannot match what could be done in a more controlled environment. Kerning pairs, ligatures, and a number of other things still have limited support through text-rendering: optimizeLegibility; (and may possibly bring speed considerations). Web type is also far more temperamental: some fonts will look beautiful in a mock-up, but are hardly legible when displayed on the web. For an excellent explanation of font rendering, you should absolutely read this article by Smashing Magazine.  Be sure to always prototype text in various browsers: nothing beats actual testing when it comes to picking the right font-stack, font sizes, and other typographic considerations.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>