Website Header, typography help.

PhilipReadman's picture

Morning all,

I have been set the task of coming up with a nice large website header, as you can see Im going down the typography path. The first obstacle I have encountered is that I am limited in terms of typeface choice due to it needing to be web safe. I am a big fan of typography that mixes sans and sans serif and also the quirkiness of playing with the reader in terms of where the eye goes.

What I would like to ask you pros is despite my limitation regarding choice of typefaces does arial and century work well together? Are there any issues that jump out? Overall whats your opinion?

This site is a godsend, thanks alot.


typeidea.png501.74 KB
Don McCahill's picture

It might look better if the x-heights of the letters were similar. The moving x-height in the first word disconcerts me a bit.

PhilipReadman's picture

Hi Don,

Many thanks for your post, I will experiment with the x heights and see how it works out.

thanks again, phil

PhilipReadman's picture

Version 2 with x hieghts amended.

penn's picture

Works much better with the x-heights the same, but could you use helvetica rather than arial?

aluminum's picture

I think there's a bit too much going on there. I like the idea of overlaying the phrases, but I'm not so sure it works in implementation. It's a clever idea but is getting in the way of clearly communicating.

I'd suggest keeping the two typefaces, but actually split the phrases (so that 'we are' is in a sans face, but not mashed into the 'welcome' phrase)

EDIT: ah, you are wanting to web-safe faces. As such, I'd definitely suggest not mixing the faces in the same phrase, as you will have little control over x-height given the variety of flavors the faces you choose may come in.

Also, there's no reason you can't also spec Helvetica and then let Arial be the fall-back. I'd suggest letting Georgia be a fall back for Century as well.

Alternatively, maybe use this as an excuse to play with @font-face.

PhilipReadman's picture

Many Thanks for the posts,

I really like playing with the double phrase and double faces, but i also agree with the communication issue. I need a way to keep the quirky double message but also clearly communicate 'welcome to redup digital media' and 'we are ...etc'.

whatever sans-serif face is used (arial or helvetica) will be continued throughout the site as body copy, i may use the serif face for menu items and headers, call outs etc. therefore continuing the mixed face theme throughout the site.

In this example I have used colour to identify between the 2 phrases but kept welcome as century.

apankrat's picture

I think double phrase idea is A-Ok, it is trivial to recognize both parts. I agree with aluminum in that there is too much going on, but I think there's an alternative to what he is suggesting. Differentiating parts using both color and type is what is excessive. I would stick with the color difference and keep the type the same. It should work just fine that way.

Also, as a side note - I really do not like this new trend of highlighting parts of the content by using different background color. Your version is probably one of the better ones, done with taste and restraint, but this still has too much of NLP context to it. Like 25th frame kind of thing. I am left with an impression that you are trying to hard to force me to notice things. If you want to highlight, do it conventionally, through italics or text color variation. Just my 2c, feel free to ignore.

aluminum's picture

I think it's working out better with we and lcome being the same face.

Alas, that leaves 'are' sticking out a bit much. I'd suggest setting 'are' in the serif face as well.

@apankrat, I think the highlights are to indicate links. As such, italicizing them wouldn't be enough to indicate that they are links. That said, I'm not sure the background color shows they are links either. I'd look at working on some sort of traditional underline or going with an actual color.

PhilipReadman's picture

again thanks for the feedback, i have amended the 'are' to century and it does look alot cleaner. the colour alone suggests the double phrase. Another idea i toyed with is changing the phrase to:

redup digital media
are etc...'

this then eliminates the 'to are' which obv makes no sense...

sapitau's picture

I'd move the 'are' up to the second line, and put the 'web developers' underneath that. Now the name is the thing that disturbs the 'we are'-design (that looks most important), which is not what you'd want.

Syndicate content Syndicate content