Feature
Post

Category
Design Focus


Design Focus: Type Specimen

Here’s another roundup that’s not only inspiring but useful for web designers: websites showcasing the elegant and exciting qualities of typefaces you can purchase.

Designs of the Week

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

Fontwalk

Fontwalk

Like a photowalk, replace the “photo” with “font” and “walk” with “scroll”. One of the highlights of this interactively scrolling one-pager is seeing different fonts of the same family morph from one into the other in the same context, as well as their varying ligatures. There are even cool transition effects for it, like a diagonal transparent gradient gliding over the screen, mimicking uncovering a page, and fun examples like slot machines, medals, and badges.

Concourse by Matthew Butterick

Concourse by Matthew Butterick

An insanely in-depth page with multiple layouts showing the typeface specimen—articles, headlines, signs, letters, book spines—all in live HTML and CSS. So you can see some cool effects like stroked text, shadows, and gradient fills. But the best part is, everything is editable! Now that’s true interactivity for people who want to try before they buy.

Greta Sans Type System Specimen App from Typotheque

Greta Sans Type System Specimen App from Typotheque

This site takes a glyph by glyph approach and off-canvas transitions to display the families: clicking on the edges of the page slides to that adjacent page. On the bottom you can pick the letter or number that’s displayed. A darker yellow signifies a heavier font weight.

House Slant by House Industries

House Slant by House Industries

Strong elements all around—on top of all the capital letters, even the striped background isn’t one to shy away. The googly eyes in “look” are animated left and right. Layout and text sizing is responsive. I wish all of the form elements were done with live HTML, and for even more brownie points, the animated stripes.

Hello Denver.

Hello Denver.

Simpler compared to the other designs featured on this list, but still quite pleasant. Good call to add accolades on the page and photographic evidence of the typeface usage in real life.

Open Hand Type

Open Hand Type

Dark look brightened up by a couple of greens and a spirnkle of red. Several kinds of textures are in use here, somewhat echoing the use of various typefaces as well.

Stacked Font

Stacked Font

Cheerful illustrations coupled with tongue-in-cheek examples of the font in action. I just wish that the complete glyph listing were in a more creative presentation than a lightbox.

Canapé Font Micro Site

Canapé Font Micro Site

There’s a more educational and informative slant for the design and content of this page, and the speciment is relegated to the PDF like most other fonts are, but it’s still an appealing site.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

Web StandardsDiagnostiCSS
“Visually detect any potentially invalid or inaccessible HTML markup”

CSSSizing (Web) components
“So how can we make it easier? Well, by sneaking aTrojan horse into your components and use it to control all the size related CSS properties.”

JavascriptWhich JavaScript Library Should I Pick?
“Since a JS library is often used when developing a user-facing product, I think of the strategy as satisfying two audiences: the developers that must code and maintain the use of the library, and the users that will interact with it.”


  1. By Joey Djemal posted on July 24, 2013 at 3:57 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice post, really cool site. Great font play.

  2. Trackback