Typography
Does it matter what fonts you use on your website? The tendency is to accept the default fonts that are included with whatever application you are using to manage your content. Most of the time that means your website uses a standard san serif font. There is nothing wrong with that. Those fonts usually look clean and crisp. Your site will be easy to read. That is important. Now for the but — your site will also look like 90% of the other sites out there.
Font selection
In the spirit of wanting to be more unique on this site I went looking for alternative fonts. I tried many and several I liked. I wanted a serif font for the main text areas and a san serif for headings. Why? Because I like to write and serif fonts just feel better for news and information sites. Perhaps because that is what books and newspapers typically use.
There are risks with this approach. On screens serif fonts can be harder to read. That's why the default is sans serif. But with today's higher resolution displays and a nice clean font, it is possible to use a serif font for text display.
Eventually I settled on the Fontin fonts from exljbris Font Factory. The series includes serif, sans serif and small caps fonts. Together these makes a nice combination and I've used them all here.
If you look carefully at this text the serifs are not overbearing. That makes it clearer. In fact the differences between the serif and the sans serif are very subtle. They complement each other well.
There is something about the style of the font that I like. It is a little different from most fonts but not too far off. As an architect it feels right.
Installation
This font was not available from Google Fonts although that is an easy place to load fonts. It was available from Adobe Edge Fonts and I tried that. But I noticed that anytime the site was delayed in loading, it was because it was waiting for the fonts to download. The lesson, avoid dependence on third party sites.
So I looked into installing them myself. They can be downloaded from the exljbris site. But they are still not web ready. The solution to that is the Font Squirrel webfont generator. Take the fonts that you download from exjlbris, upload them to the generator and download web ready fonts. Font Squirrel even includes the CSS that loads the fonts into various browsers. So the hard work is done. You just need to install them on your site and incorporate them into your style sheet.
Now the fonts are downloaded from the same host as the rest of the HTML, CSS and JavaScript for this site.
Font variations
We already mentioned that we installed the Fontin serif, sans serif and small caps fonts. They also included italic and bold variations of each one. It appeared to me that the size of the font files would be huge if I installed all of these. So initially I only installed the base font for each of the three styles.
Out of curiousity I tried marking some text as italic and bold. Believe it or not, it worked. At least it worked on most browsers. The proprietary browser displays italic but not bold text. All the others that I tried worked fine. So I'm not going to install the italic and bold variations. It is good enough.
Where fonts are used
The main body text uses the Fontin serif font, the menu uses the sans serif and headings use the small caps. Other than images and code blocks, everything on the site at this point in time displays one of these styles.
Once I'd settled on the Fontin fonts I went back to the septagon image that you'll find on the expertise page and updated the text there to match. The labels on that image are using the Fontin sans serif fonts. Was this necessary? Probably not. At the conscious level most people are not going to notice. But at the subconscious level the fonts match and I hope that makes the site more pleasing to the reader.
Vertical rhythm
Some designers are fanatical about vertical rhythm. And when you views sites where it is part of the design, they are usually clear and easy to read. What I've noticed, however, is that it is sites that are mostly textual that pay attention to this design goal.
Foundation's default typography looks good but it does not support a good vertical rhythm. So it took some work to adapt styles so that it does.
The first thing I did was to set the default line height on this site to 1.5rem or 24px. Most people would use that as the basis for their vertical rhythm. But I wanted a half a line between paragraphs instead of a full line, so I decided that I would use 12px instead. When you look at text in two different columns, they will either align directly or they will be off by half a line. Either way there will be the same number of vertical lines per inch, as they used to say about print. So they flow together.
This means that everything on the site has to be some multiple of 12px in its vertical height. All text, headings, menu items, images, everything.
Images
Getting text elements to align vertically to a 12px rhythm is fairly straightforward. But images are not so easy, especially on a responsive site where image height changes depending on the width of the browser in which it is displayed.
JavaScript comes to the rescue. Thanks to Daniel Eden, this is taken care of. Install and configure his baseline.js and images adjust the bottom margin so that the total height is always a multiple of your baseline vertical rhythm. Since mine is based on 12px you have to watch carefully to notice that the margin below an image varies between 12px and 23px as the browser window changes in width.
See for yourself
While developing and testing the vertical rhythm, I had a background grid image on the
tag. I've installed that now so that you (or I) can toggle the background grid on and off. In the top right corner of the browser window, you should see a small portion of a grid. Click on that to enable the grid for the whole page. Click again, or load a fresh page, to disable it.It is a 24px grid and our baseline here is 12px. So all text on the page should either be positioned between two horizontal grid lines or it should have a grid line going through the middle. Check the text that follows headings and images. It should all align to a 12px vertical rhythm.
Summary
Default san serif fonts are fine on most websites. But you can make your site more unique by installing your own fonts. The easy way is to load from Google or Edge Fonts. But for more control and improved performance you can have them load from your website.
It is important to select fonts that work well together and to avoid using too many fonts. Keep them simple, crisp and clear.
Depending on the nature of your site, vertical rhythm may be important. If you are using Foundation, be prepared to spend some time getting it right.
For proving vertical rhythm, it helps to have a grid in the background. This site used a grid with vertical and horizontal lines. At the very least you need the horizontal lines.
