Using Google Web Font Variants

With the avail­ability of Google Web Fonts,  many web designers are taking advan­tage of the improved and con­trolled typog­raphy they allow. I did some type redesign over at Bob Rockefeller Photography using the sans-serif face Arimo for titles and headers, and the serif face Lora for body text.

Making a simple font avail­able on a web­site is a simple matter of adding a line like this at the head or your CSS file (using Arimo as an example):

@import url(http://fonts.googleapis.com/css?family=Arimo);

Google’s web­site makes it easy to gen­erate the needed code for any number of fonts and styles. And that’s where a little more knowl­edge is required.

To use the normal style of the font, your CSS just has to assign it to a rule, like this:

font-family: 20px Arimo, sans-serif;

Notice that I’ve included the browser’s default san-serif face as a backup, in case there is some­thing wrong with Google’s servers. At least the user will see a read­able ver­sion of your site.

And get­ting to the italic ver­sion of the font is straight for­ward, too, just use:

font-style: italic;

Now you need to be a little more careful for any of the “fancier” avail­able faces, such as the dif­ferent weights that Exo comes in (100, 200, 300, 400, 500, 600, 700, 800, 900). Obviously simply using:

font-style: bold;

won’t do it alone. The “trick” is to use the font-weight prop­erty, like this:

font-weight: 400;

or:

font-weight: 700;

to get at the var­ious font weights any font face may have avail­able (assuming you’ve loaded them all back in the @import step). For font faces with dif­ferent weights of italics, just com­bine the two.

To be sure you’re get­ting the font face you want in the sit­u­a­tion you want it, your CSS file will have to be sure to define all the sit­u­a­tions in your design:

strong,
b {
font-family: “Lora”, serif;
font-weight: 700;
}

p em {
font-family: “Lora”, serif;
font-style: italic;
}

That’s pretty much it. If you have any tech­niques to add, please add them in the comments.

Genesis 1.7 vs. Headway 3.0

The good news for WordPress devel­opers is that a tremen­dous range of pro­fes­sion­ally designed and devel­oped themes exist that will let you get a site run­ning quickly. Among them are “themes” that per­haps should be referred to as frame­works because they are much more than a simple theme. These frame­works allow the designer/developer to add or create child themes that use the frame­work as their base and simply add in the look required for a given site.

The most well known of these frame­works are prob­ably Thesis, Genesis and Headway. All of them are pow­erful and each are used by a great number of pro­fes­sion­ally done sites. But they are not the same. I have expe­ri­ence with Genesis and Headway and would like to describe how they are the same and how they are different.

The Same

Both Genesis and Headway pro­vide these fea­tures in common:

  • Advance con­trol for Search Engine Optimization (SEO)
  • Personal and Developer licenses
  • Complete flex­i­bility of design using HTML, PHP and CSS
  • Well struc­tured code (espe­cially well orga­nized CSS classes)
  • Available child themes that are ready to go out of the box or that can be mod­i­fied and cus­tomized as needed
  • Available custom widgets
  • Excellent sup­port forums
  • A com­mu­nity of pro­fes­sional devel­opers avail­able for hire
  • Online doc­u­men­ta­tion
Different

And they are dif­ferent in these ways:

  • Extras in the devel­oper license – Genesis gives you all their themes, those they have now and any that are devel­oped; Headway pro­vides spe­cial devel­oper tuto­rial videos
  • Updates – Genesis pro­vides updates free for life, Headway requires a yearly subscription
  • Design approach – Genesis is text based, Headway is visu­ally based
Text vs. Visual

It is the last of the dif­fer­ences that is by far the greatest dif­fer­en­tiator between these two pow­erful theme frame­works. Developing in Genesis is like pro­gram­ming – you grab your favorite text editor (mine is Coda) and make the mod­i­fi­ca­tions and adjust­ments you want. Headway shares a lot in common with the web plat­form Squarespace, but is based on WordPress. While you always have the option to break out the text editor and dive head first into the HTML, PHP and CSS code, the pri­mary inten­tion is that the bulk of your devel­op­ment efforts will be spent in the Visual Editor.

The Headway Visual Editor allows a designer to start from scratch and design a site using drag and drop tech­niques to place the building blocks of the site (the header, con­tent, widget area, footer and such) and then simply click on the options to set the style of the ele­ments used (fonts, colors, align­ment, head­ings, link hovers, bor­ders and so on). Or you can start with a child theme and modify that with the same approach.

The Visual Editor allows a lot of con­trol, but not all of the con­trol. Each block or ele­ment can only be mod­i­fied in the Visual Editor using the tools Headway has cre­ated in that envi­ron­ment. If you want a header title to have a graphic back­ground, for example, you can do that in the Visual Editor.

Headway Version 3.0

For the com­par­ison in this article, I have dis­cussed the just released ver­sion 3 of the Headway frame­work. The basic con­cept of Headway has not changed – it wants to be a visual design envi­ron­ment. Version 3 has just picked up where ver­sion 2 left off and pro­vided more power in the Visual Editor. But ver­sion 3 is still a work in progress and does not yet include all the fea­tures of ver­sion 2. They are coming.

Notably, ver­sion 3 has no upgrade path for web sites from ver­sion 2. That, too is coming.

New with ver­sion 3 is the licensing and pricing model. Gone is the life­time sup­port; now its a yearly renewal. Lucky for me I got a developer’s license before the release of ver­sion 3 so I am grand­fa­thered in for sup­port for life.

Drag-and-Drop vs. Code

I’m not a big fan of the way Headway ver­sion 3 stores CSS in the WordPress data­base instead of in text files that can be easily edited in Coda. And I’ve been a some­what vocal critic of the orga­ni­za­tion and user inter­face of the Visual Editor. The good news, at least for me, is that you can do all your layout work (which can be very tedious in pure text) in the Visual Editor and then do your design work (CSS) in a text editor – a tip I got from Headway Expert.

There’s more for me to learn since I’ve been using Genesis, and liking it, for a while now. But I started work on a new web site for my pho­tog­raphy work and decided to use Headway together with Gallery+ and ProofBuddy. So far so good and it has let me really get down into the HTML and CSS behind the scenes. I’m doing most of the work using Espresso ver­sion 2 as a change of pace from Coda and a way to com­pare those two strong devel­op­ment tools.

So I may have a more in-depth blog post about Headway and Espresso when that project is complete.

Coda: The Web Development App

I do dabble in HTML, CSS and WordPress from time to time. This web site is run on WordPress and the fab­u­lous devel­op­ment frame­work Genesis using a heavily mod­i­fied ver­sion of their Focus theme. And I’ll change the look of my web site when I get tired of seeing the old design, which hap­pened again this weekend.

In making the changes, which included switching from the Prose to the Focus theme, I reminded myself how much I like the web devel­op­ment appli­ca­tion Coda. Since I don’t use the themes just as they come from StudioPress, I need to muck around with the CSS and PHP that forms the theme tem­plate. Coda is so good for that.

Coda comes from the folks at Panic, who make a number of other very nice Macintosh apps. Coda’s claim to fame is that it is a single window appli­ca­tion that han­dles FTP file transfer, text editing, CSS editing, browser pre­views and even ter­minal com­mands. As a bonus, it will dis­play ref­er­ence mate­rial, right in the app, from web-based resources that you can add to. Its smooth, very Mac-like, and allows web devel­op­ment to move easily from task to task. Instead of using pro­grams such as BBEdit, Transmit and CSSEdit to do dif­ferent tasks, you use Coda to do them all. I own all those, and I use Coda.

The sites panel. Click all the screen shots for a bigger view.

Coda’s inte­gra­tion is won­derful. And it is an excep­tion to the rule that stand-alone appli­ca­tions are better at what they do then an inte­grated appli­ca­tion can be. That’s not to say the others don’t have fea­tures that Coda doesn’t, its just that those fea­tures are nice-to-have fea­tures and not the things that you must have to do rapid web development.

The CSS editing panel.

Working on a web site with Coda starts off with the sites panel where I keep the links to sites that I work on most often. Once I con­nect to a site, Coda gives me an FTP file list view on the left and the con­tents of a selected file (or files) on the right. Multiple files open in mul­tiple tabs and indi­vidual files can have mul­tiple views (such as both the CSS editor and the text editor views of a CSS file or both the text editor and browser pre­view views of an HTML file).

The books panel.

From there its pretty much smooth sailing. Double-click a file to edit, make some changes, save it, see the effect in the pre­view panel or in a sep­a­rate web browser and then make some more changes. Coda opens and saves file straight to and from your server so there’s no need to down­load, edit and then re-upload. Because I do most of my web devel­op­ment in WordPress, I use a sep­a­rate browser window to pre­view changes since Coda’s pre­view panel is only for static HTML.

The text edit panel.

The books panel allows you to quickly review web-based ref­er­ence mate­rial and Coda comes with quick ref­er­ences for HTML, CSS, JavaScript and PHP. Its easy to add more—just load in its URL.

The CSS editor is very nice with easy to use and clearly broken down access to all the CSS attrib­utes avail­able. It has lots of but­tons and entry fields to make what can be tedious easy. Using very nice syntax spe­cific text col­oration, the text editor works well and is full of the little things you need to make it more than a plain text editor (things like Un/Comment Selection, Balance punc­tu­a­tion, and auto com­plete for common syntax). For my work, I haven’t wanted for features.

I’ve been very pleased with Coda and the work­flow that it allows. Like a lot of pro­grams these day, there is no sep­a­rate Users Manual, rather it is incor­po­rated into Coda’s help menu. That has worked fine for me par­tially because there’s plenty of infor­ma­tion in there and par­tially because Coda is a real Mac app—you can find your way around pretty easily with no manual. Coda is avail­able on the Mac App Store for $99.