We start dropping the text into the main navigation, just to see how it will fit, work on sizing, colors, etc. Some of the text is fitting pretty tight but that's OK, we'll make room, especially once it turns into HTML/CSS and adjustments are even easier.

We use the same Gotham Rounded for the text. Might as well continue the "Brand" font into navigation (that feels very appropriate).

"Active" navigation simply gets a darker color and reversed text.

We look at my favorite icon font, Pictos, but decide to go with Entypo instead just to switch things up a little. Here's a bunch of more we could have also chosen.

We use the software Font Explorer X to activate the font and explore it. We click "information" to get a grid of all the characters in which to copy from (and easily paste into Photoshop).


  1. daniel.jeffery
    Permalink to comment#

    I remember i had no idea what ‘Almanac’ meant, and so i looked at the meaning and i was like “Oh, that’s a pretty cool name/idea”.

  2. stemlund@gmail.com
    Permalink to comment#

    I didn’t realize you could double-click the T of a text layer to select-all… or that you could change character styles for many text layers at once. sweet!

    • Seth Hall
      Permalink to comment#

      Nice one!!! Yes @stemlund I just realized the double-click on the T as well. Great find.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.