Need input on fonts for a website design

[sethgoochdesigns]

Ok, so I’m currently working on a website for my buddies company. The logo is using the fonts Myriad Pro and Museo. Should the fonts of the headings throughout the site include any of those fonts or does it really matter? In the process of the web layout design, I currently have an intro heading (i.e. Welcome to Company Name, a multimedia company based in blah blah blah) using the font Quicksand with the company name in Myriad Pro so it would pop out a little bit. I like the way it looks, but I was told to stay away from using Myriad Pro as a web fonts. What are your thoughts? Also, if I stick with Quicksand for the intro heading phrase, what would you recommend for body copy and other headers (h1 ,h2, h3, etc.) I think I remember reading that its not a good idea to use more than 3 fonts. Any feedback would be great! Thanks!

[chrisburton]

Who told you that and why?

[sethgoochdesigns]

Just a friend…he said its not a web safe font, which is true.

[chrisburton]

That is true however, we have evolved into using @font-face for a while now, that is nothing new. I would strongly disagree with your friend about not using Myriad Pro. I would say it is more than okay to use it.

[sethgoochdesigns]

And the fact that it’s owned by Adobe so I couldn’t embed it using @font-face. His words, not mine b/c I don’t know much about it

[chrisburton]

According to Adobe’s font permissions, Myriad can be embedded.

[sethgoochdesigns]

Oh ok, that’s good to know. Thank you! Do you think different sizes/weights of Myriad would be suitable for the headings? Quicksand wouldn’t be a wise choice for body copy huh?

[chrisburton]

Not sure. I would have to see it in the mockup.

– Also, you can only embed Myriad Pro if you have it legally. Which I hope that is the case :P.

[sethgoochdesigns]

I’ll post up a link of the mockup I have so far here in a little bit. And of course I have it legally :D

[sethgoochdesigns]

Here’s the mockup so far…

http://test.seth-gooch.com/ILM/ILM-home.jpg

[TreeTopStudio]

The fonts in the logo work well together and I like the contrasting weights used in “welcome to…” To continue the contrasting weights you might have to use @font-face for a font that is that thin but, I wouldn’t use it for a lot of body copy – maybe some subheads or call outs as an accent to a heavier sans-serif for the heads (much like your example). I might make the heads even a little heavier to increase the contrast a bit.

[chrisburton]

Don’t be afraid to go extremely heavy on the header tags. I’m not sure I like the quicksand typeface. I would take a crash course on typography to give you an idea on how to combine multiple styles. Also, on the accordion info it would be better to have one that is legible when scanning (try condensed bold).

[stevendeeds]

Rule of thumb: Don’t use more than 4 fonts total on a design. Most designs call for no more than 2 fonts.

Also, a good rule of thumb, mix and match font styles. Don’t use Century Gothic and Futura as your two fonts. They look similar, and they’re both sans-serif. Sometimes it’s good practice to use one sans-serif and one serif or slab… Or one decorative, one slab, and one sans-serif. I find its good to establish a font in three font types that work seamlessly together before beginning my design. Then pick 4 or less main colors, etc.

This is simply MY opinions, and part of MY design process/theory.. Take it or leave it.

[Author]

Posts