Travel Oregon Font

evanbrog's picture

Any body know what the font on the travel Oregon website is? (The upper navigation bar)

http://traveloregon.com/

HVB's picture

Believe it or not, there are at least two different fonts used.

One is Emigre's BlockheadUnplugged;

I'm not sure what the other one is. Note the differences between two different uses of the letter 'S'.

The second, lighter one is from BlockheadUnplugged. The first, darker one is not, and as far as I can tell, it's not from any other weight of Blockhead.

Ryuk's picture

According to the css, the font is called 'scrappers'.

HVB's picture

I think that 'scrappers' might be used only for the bicycle image. The wording itself is actually an image (.png), as found with 'view page info' in Firefox. I found the reference to BlockheadUnplugged in a flash file elsewhere on the site.

And a question for Ryuk: How do you get to the CSS to look at and interpret it?

- Herb VB

Ryuk's picture

'scrappers' is actually used on the as webfont. Very easy to check it using WhatFont Chrome Extension. With this extension, you can easily inspect web fonts by just hovering on them. I agree the top main menu is actually made with images but when hovering "welcome to oregon" (bottom left), it reveals 'scrappers'.

HVB's picture

Thank you. I guess I have to install yet another browser :)

evanbrog's picture

Why thank you!

I remember reading about something like that extension. Was it on Firefox as well??

riccard0's picture

It exists as bookmarklet, and Chrome and Safari extensions: http://chengyinliu.com/whatfont.html
There could be a Firefox one out there too.

stlandau's picture

Hello all. I'm the Creative Director at Substance (http://findsubstance.com), the agency responsible for the design of the Travel Oregon site.

Regarding the fonts, we used a variety of them... the top navigation is a font called Scrappers, which was custom-made for the client. There are some variants in the font so that's why you're seeing two different S's. Because of the control we wanted over the layout and active states for the top navigation, we ended up making those graphical, but everywhere else across the site where you see Scrappers it is displayed using @font-face. Regarding Emigre's Blockhead - we had used Blockhead prior to having the custom Scrappers font in the Flash file on the Cities & Regions page, so that reference might be a legacy item in the Flash file.

For the slab serif font, we wanted to use Hoefler & Frere-Jones font Archer (http://www.typography.com/fonts/font_overview.php?productLineID=100033), but unfortunately they haven't created a web font solution yet. Instead, we're using the Google font Rokkitt (http://www.google.com/webfonts/specimen/Rokkitt) for headlines, and Sanchez (http://www.myfonts.com/fonts/latinotype/sanchez/) for italic slab serif uses. Unfortunately Rokkitt doesn't have an italic version of their font and the psuedo-italic the browser was rendering didn't look very good. Hopefully once H&FJ has a @font-face solution, we can implement that.

hrant's picture

How directly was Scrappers derived from Blockhead?

BTW, FYI: http://ernestinefont.com/
And it's one of the best-rendering webfonts out there.

hhp

stlandau's picture

The Scrappers font was used originally by having to piece together a handwritten set of characters, so it was pretty time consuming to write out long messages. And of course for web use, we also needed a full character set we could dynamically use and display. Prior to having Scrappers converted to a font format we could use, we chose Blockhead for dynamic text because it looked kind of similar. So Scrappers wasn't derived from Blockhead; we chose Blockhead because it was close to what we were doing with the handwritten Scrappers font.

And thanks for the link to FF Ernestine. Looks like a good option instead of Archer, especially if H&FJ aren't going to come out with a @font-face solution anytime soon.

hrant's picture

OK, good to know about Scrappers - thanks for the clarification.

Note that Ernestine has a large x-height which makes
it particularly suitable for onscreen typography, plus
the wizards at FontFont (I think it was Jens Kutilek in
this case) did an incredible job hinting it.

hhp

stlandau's picture

You bet.

One challenge we've had with Rokkitt is the baseline height is kind of weird (and limited from a font weight standpoint), which makes it a bit challenging, so Ernestine looks like a good replacement that might be easier to control.

Syndicate content Syndicate content