San-Serif Fonts that work well with Helvetica
March 8, 2010 7:21 PM Subscribe
Looking for San-Serif fonts that work well with Helvetica Typeface.
Variations on fonts are for header, subheader, and body text. San-Serif is a must.
Arial and Myriad Pro have all ready been suggested.
This is for a photographic website.
Insight encouraged.
Thank you so much.
Variations on fonts are for header, subheader, and body text. San-Serif is a must.
Arial and Myriad Pro have all ready been suggested.
This is for a photographic website.
Insight encouraged.
Thank you so much.
If I understand what you are doing, you should be looking at different fonts within the same type family. Like if you're already using Helvetica, you'd look to Helvetica black, Helvetica ultra-compressed, etc.
Mixing Arial and Helvetica is not too cool. Mixing Myriad Pro and Helvetica is like, "whaaat???"
Other than that, you'd typically find a nice serif font to use along with Helvetica. There are lots of them to fit any mood...technical, artsy, old-fashioned, etc.
posted by circular at 7:29 PM on March 8, 2010 [3 favorites]
Mixing Arial and Helvetica is not too cool. Mixing Myriad Pro and Helvetica is like, "whaaat???"
Other than that, you'd typically find a nice serif font to use along with Helvetica. There are lots of them to fit any mood...technical, artsy, old-fashioned, etc.
posted by circular at 7:29 PM on March 8, 2010 [3 favorites]
Response by poster: San Serif Fonts that work well with Helvetica. That is all. Thank you.
posted by captainsohler at 7:45 PM on March 8, 2010
posted by captainsohler at 7:45 PM on March 8, 2010
Helvetica is a san serif font. I don't get what you're looking for here.
posted by mr_roboto at 7:47 PM on March 8, 2010 [7 favorites]
posted by mr_roboto at 7:47 PM on March 8, 2010 [7 favorites]
Er... so you want several different typefaces that, like Helvetica, are sans serif? Arial is a Helvetica clone, so it seems like it wouldn't work very well alongside Helvetica; Myriad Pro itself is similar enough to Helvetica not to work well with it either, I don't think. But it sounds almost as though you're looking for a clone, in which case I'd suggest Nimbus Sans L, the best free Helvetica clone I know of (much better than Arial), which is available for free download here.
Finally, if you're using this font for a web site... it might not matter at all. Are you using this in a Flash application or some other rasterized graphic thing? Or are you using this font for a standard HTML part of the page, and applying it using CSS or something? Because if it's the latter, finding some exotic font will kind of be self-defeating - because most people won't have those fonts installed, so your web site won't display with those fonts anyway. Myriad Pro, for example, is highly unlikely to work as a font for most people, because most people won't have it installed; so it seems totally pointless to suggest Myriad Pro as a font for, say, body text using CSS, since the document will default to something else in most cases.
Again, Helvetica and Arial don't work well together. If you mix those fonts, they'll look just similar enough for the different texts to look slightly off from font to font. Choosing fonts together, you want them to be different enough to be obviously different fonts; that's why people often choose a sans serif font like Helvetica and then pair it with a serif font.
The most common sans serif fonts used for the web besides Helvetica and Arial are Verdana, Trebuchet, Tahoma, and Lucida. Here they are. Pick one of those five fonts to work with, I guess.
posted by koeselitz at 7:56 PM on March 8, 2010 [1 favorite]
Finally, if you're using this font for a web site... it might not matter at all. Are you using this in a Flash application or some other rasterized graphic thing? Or are you using this font for a standard HTML part of the page, and applying it using CSS or something? Because if it's the latter, finding some exotic font will kind of be self-defeating - because most people won't have those fonts installed, so your web site won't display with those fonts anyway. Myriad Pro, for example, is highly unlikely to work as a font for most people, because most people won't have it installed; so it seems totally pointless to suggest Myriad Pro as a font for, say, body text using CSS, since the document will default to something else in most cases.
Again, Helvetica and Arial don't work well together. If you mix those fonts, they'll look just similar enough for the different texts to look slightly off from font to font. Choosing fonts together, you want them to be different enough to be obviously different fonts; that's why people often choose a sans serif font like Helvetica and then pair it with a serif font.
The most common sans serif fonts used for the web besides Helvetica and Arial are Verdana, Trebuchet, Tahoma, and Lucida. Here they are. Pick one of those five fonts to work with, I guess.
posted by koeselitz at 7:56 PM on March 8, 2010 [1 favorite]
Just to springboard off of koeselitz, if this is for the web, there's always Typekit. If not, feel free to ignore me.
posted by reductiondesign at 8:03 PM on March 8, 2010 [2 favorites]
posted by reductiondesign at 8:03 PM on March 8, 2010 [2 favorites]
It doesn't work that way. Your question is unanswerable.
posted by Optimus Chyme at 8:32 PM on March 8, 2010 [4 favorites]
posted by Optimus Chyme at 8:32 PM on March 8, 2010 [4 favorites]
Insight encouraged.
You say that, but then seem to dismiss those who rightly suggest that another sans-serif font is the wrong choice if you're looking to complement Helvetica.
A second sans-serif font will not complement Helvetica, but fight with it.
Are you asking because you have graphic elements set in Helvetica and need a web-friendly font to use for your HTML elements? In your CSS file, you can specify a list of fonts; the browser will use the first one in the list that is available on the user's machine.
ie: font-family: Helvetica, Arial, Geneva, sans-serif;
Arial is close enough to Helvetica that it makes a fine-enough alternate (even if it will never please the Helvetica purist) in the event that the end user doesn't have Helvetica installed.
posted by Robot Johnny at 8:33 PM on March 8, 2010
You say that, but then seem to dismiss those who rightly suggest that another sans-serif font is the wrong choice if you're looking to complement Helvetica.
A second sans-serif font will not complement Helvetica, but fight with it.
Are you asking because you have graphic elements set in Helvetica and need a web-friendly font to use for your HTML elements? In your CSS file, you can specify a list of fonts; the browser will use the first one in the list that is available on the user's machine.
ie: font-family: Helvetica, Arial, Geneva, sans-serif;
Arial is close enough to Helvetica that it makes a fine-enough alternate (even if it will never please the Helvetica purist) in the event that the end user doesn't have Helvetica installed.
posted by Robot Johnny at 8:33 PM on March 8, 2010
Sometimes when you can't find the right answer, it's because you're asking the wrong question. Finding a sans-serif typeface to work with Helvetica on the web... can't be done. At least, not right now, with web technology the way it is. You're best off to use different sizes & weights of Helvetica itself.
posted by eleyna at 8:35 PM on March 8, 2010
posted by eleyna at 8:35 PM on March 8, 2010
Could you give us more insight into what you're doing? That might help us answer the question more. eleyna is spot-on - sometimes in trying to keep a question short, posters end up asking the wrong question.
posted by radioamy at 9:02 PM on March 8, 2010
posted by radioamy at 9:02 PM on March 8, 2010
It doesn't work that way. Your question is unanswerable.
(Maybe the asker is looking for a typeface that would work well for a callout, title or header?)
Can you tell us where the sans serif will be used? It might be easier to find a good mix of fonts, that way.
posted by Blazecock Pileon at 9:53 PM on March 8, 2010
(Maybe the asker is looking for a typeface that would work well for a callout, title or header?)
Can you tell us where the sans serif will be used? It might be easier to find a good mix of fonts, that way.
posted by Blazecock Pileon at 9:53 PM on March 8, 2010
I think if you used a dramatically different sans serif font with Helvetica, something with character, it would work OK. Of course, then you would have to deal with custom fonts on the web. That's a huge pain unless it's for logo elements that you can bake into an image.
posted by demiurge at 10:01 PM on March 8, 2010
posted by demiurge at 10:01 PM on March 8, 2010
Robot Johnny: “Arial is close enough to Helvetica that it makes a fine-enough alternate (even if it will never please the Helvetica purist) in the event that the end user doesn't have Helvetica installed.”
And, one should add, one pretty much has to settle for Arial instead of Helvetica, because the end user hardly ever has Helvetica installed. Aside from graphic designers, the only people who will usually have the Helvetica typeface on their computers are Mac users, and unfortunately their market share is very small, so you can't really count on people having Helvetica installed.
Long story short: it's a bad idea to design web pages with Helvetica in mind for the final product. Settle for Arial or use another of the common web fonts I linked above (or use reductiondesign's interesting recourse, which I'm checking out.)
Finally: since I have way too much time on my hands, since I'm bored, and since I'm currently unemployed, I have built for you, captainsohler, a handy web page for testing which font you prefer alongside Helvetica: Verdana, Trebuchet, Tahoma, or Arial. Please keep in mind that the text marked as Helvetica will only display in Helvetica if you have that font installed; otherwise, it defaults to Arial, and then to whatever sans-serif default font you've got. I hope this helps.
posted by koeselitz at 10:04 PM on March 8, 2010 [4 favorites]
And, one should add, one pretty much has to settle for Arial instead of Helvetica, because the end user hardly ever has Helvetica installed. Aside from graphic designers, the only people who will usually have the Helvetica typeface on their computers are Mac users, and unfortunately their market share is very small, so you can't really count on people having Helvetica installed.
Long story short: it's a bad idea to design web pages with Helvetica in mind for the final product. Settle for Arial or use another of the common web fonts I linked above (or use reductiondesign's interesting recourse, which I'm checking out.)
Finally: since I have way too much time on my hands, since I'm bored, and since I'm currently unemployed, I have built for you, captainsohler, a handy web page for testing which font you prefer alongside Helvetica: Verdana, Trebuchet, Tahoma, or Arial. Please keep in mind that the text marked as Helvetica will only display in Helvetica if you have that font installed; otherwise, it defaults to Arial, and then to whatever sans-serif default font you've got. I hope this helps.
posted by koeselitz at 10:04 PM on March 8, 2010 [4 favorites]
Nice one koeselitz, nice one.
posted by simplesharps at 10:22 PM on March 8, 2010
posted by simplesharps at 10:22 PM on March 8, 2010
I can't offer any practical advice on choosing fonts at the moment, but I can offer up a tool to make comparison easier. Typetester is a free, very flexible, visualisation tool that is easy to work with. You can choose from fonts that are standard to Mac or PC, or pick from your computer's fonts and then play with the settings from there.
Good luck!
posted by far from gormless at 12:19 AM on March 9, 2010 [3 favorites]
Good luck!
posted by far from gormless at 12:19 AM on March 9, 2010 [3 favorites]
It is possible to get two san-serif typefaces to work together, but it is harder and depends vastly on what you are trying to do. Without more information about the mood and timbre of your site design, it is very hard to choose typeface pairings. It would be akin to asking "What sort of photograph would go with a night shot of New York?"
In general, you want to chose fonts that balance and contrast each other. Traditionally, this is done with a serif and a sans-serif. However, it is possible to use two sans serifs, you'll want to look for a font that share some common shapes and curves, but not so much that they'd considered the same (Arial for instance). (Jason Santa Maria wrote a great article on it a few months back.)
Now, this is further complicated by the fact that there is a very limited set of fonts that everyone has, if you're not embedding fonts, you're stuck with what koeselitz said. Luckily, web fonts has come a very long way in the last 9 months. Many foundries offer web embedding licenses for their fonts, some through typekit, some through their own services. Do not embed fonts that don't come with licenses. It is disrespectful to the type designer, unethical, and illegal. Also, do not use images for all your body content. It is disrespectful of your disabled visitors, unethical (because it means some of your disabled visitors won't be able to use it), and some standardistas may hunt you down and punch you in the face.
circular's suggestion of staying in the family and using different weights of Helvetica is actually quite good, you will have a clean, consistent design that doesn't won't clash.
As a note, if you are using Helvetica in your css font stack, while all Mac users have Helvetica, and some Windows users do, the kerning table is utter crap. Instead you should use Helvetica Neue:
This will allow anyone on a Mac to view it beautifully, all Windows users will go back to Arial (and not have to deal with the bad keming in Helvetica). Though, some people are willing to deal and still use Helvetica:
posted by thebestsophist at 12:30 AM on March 9, 2010 [2 favorites]
In general, you want to chose fonts that balance and contrast each other. Traditionally, this is done with a serif and a sans-serif. However, it is possible to use two sans serifs, you'll want to look for a font that share some common shapes and curves, but not so much that they'd considered the same (Arial for instance). (Jason Santa Maria wrote a great article on it a few months back.)
Now, this is further complicated by the fact that there is a very limited set of fonts that everyone has, if you're not embedding fonts, you're stuck with what koeselitz said. Luckily, web fonts has come a very long way in the last 9 months. Many foundries offer web embedding licenses for their fonts, some through typekit, some through their own services. Do not embed fonts that don't come with licenses. It is disrespectful to the type designer, unethical, and illegal. Also, do not use images for all your body content. It is disrespectful of your disabled visitors, unethical (because it means some of your disabled visitors won't be able to use it), and some standardistas may hunt you down and punch you in the face.
circular's suggestion of staying in the family and using different weights of Helvetica is actually quite good, you will have a clean, consistent design that doesn't won't clash.
As a note, if you are using Helvetica in your css font stack, while all Mac users have Helvetica, and some Windows users do, the kerning table is utter crap. Instead you should use Helvetica Neue:
font-family: "Helvetica Neue", Arial, san serifThis will allow anyone on a Mac to view it beautifully, all Windows users will go back to Arial (and not have to deal with the bad keming in Helvetica). Though, some people are willing to deal and still use Helvetica:
font-family: "Helvetica Neue", Helvetica, Arial, san serifposted by thebestsophist at 12:30 AM on March 9, 2010 [2 favorites]
Quicksand, maybe? Other ideas: Optima, or Audimat? Or Gazole, if you can find it.
posted by en forme de poire at 4:56 AM on March 9, 2010
posted by en forme de poire at 4:56 AM on March 9, 2010
(None of those are really "body text" other than maybe Optima, but for headings they should work fine...)
posted by en forme de poire at 4:58 AM on March 9, 2010
posted by en forme de poire at 4:58 AM on March 9, 2010
Best answer: As a note, I use Typekit, and some fonts from the League of Moveable Type (which use a free font license and are free for embedding).
There are also other commercial foundries that allow font-embedding (I don't think that list has been updated in a little. FontShop now also offers Web FontFonts. Each of these services and foundries offer different pricing schemes, so you also need to figure out what you are willing to afford and spend.
By the way, out of curiosity, I tried using Raleway (my favorite typeface of the month) with Helvetica, and it doesn't look half bad if you're going for a elegant contemporary look. The title text is in Raleway, the first paragraph is in Helvetica Neue Light (emphasis in helvetica neue bold), the second is in Helvetica, and the valediction and name are in Arial.
Note that I used Arial, Helvetica, and Helvetica Neue, as alternatives for each other and not pairings.
posted by thebestsophist at 8:43 AM on March 9, 2010 [1 favorite]
There are also other commercial foundries that allow font-embedding (I don't think that list has been updated in a little. FontShop now also offers Web FontFonts. Each of these services and foundries offer different pricing schemes, so you also need to figure out what you are willing to afford and spend.
By the way, out of curiosity, I tried using Raleway (my favorite typeface of the month) with Helvetica, and it doesn't look half bad if you're going for a elegant contemporary look. The title text is in Raleway, the first paragraph is in Helvetica Neue Light (emphasis in helvetica neue bold), the second is in Helvetica, and the valediction and name are in Arial.
Note that I used Arial, Helvetica, and Helvetica Neue, as alternatives for each other and not pairings.
posted by thebestsophist at 8:43 AM on March 9, 2010 [1 favorite]
Correction, Helvetica Neue Light doesn't look half bad, I wouldn't use Helvetica or Arial in that combination.
posted by thebestsophist at 8:45 AM on March 9, 2010
posted by thebestsophist at 8:45 AM on March 9, 2010
The best sophist: Some part of me feels like I should take your text personally.
posted by wabbittwax at 9:09 AM on March 9, 2010
posted by wabbittwax at 9:09 AM on March 9, 2010
I'm questioning if the OP is sure of which font type (s)he is looking for. As other posters have noted, Helvetica is a sans serif font
(yes, sanS serif, with the 's'. sans meaning without, in this case: without the serifs on the lettering!)
Meaning a font without the little lines across the top/bottom of the lines of the letters. And as stated, if you are already using a sans serif font, just stick with variations in the same family.
But if you are actually wanting a serif font, then any of the basics would work fine: like goudy, perpetua, cambria, etc.
posted by Eicats at 9:25 AM on March 9, 2010
(yes, sanS serif, with the 's'. sans meaning without, in this case: without the serifs on the lettering!)
Meaning a font without the little lines across the top/bottom of the lines of the letters. And as stated, if you are already using a sans serif font, just stick with variations in the same family.
But if you are actually wanting a serif font, then any of the basics would work fine: like goudy, perpetua, cambria, etc.
posted by Eicats at 9:25 AM on March 9, 2010
Ack! Good catch, eicats, sans serif is the proper spelling.
wabbittwax: ha! it was coincidence, I promise! No wabbits shall be harmed by me. (I wanted to use the W.)
posted by thebestsophist at 10:20 AM on March 9, 2010
wabbittwax: ha! it was coincidence, I promise! No wabbits shall be harmed by me. (I wanted to use the W.)
posted by thebestsophist at 10:20 AM on March 9, 2010
I understand. It's a very nice W. Also the two faces did work well together.
posted by wabbittwax at 11:35 AM on March 9, 2010
posted by wabbittwax at 11:35 AM on March 9, 2010
It is totally bizarre that you can't be bothered to clarify this question so the legions of people who want to help you can help you.
posted by Optimus Chyme at 1:38 PM on March 9, 2010
posted by Optimus Chyme at 1:38 PM on March 9, 2010
Response by poster: My Internet at home is down, so I had to cop the question in a coffee shop before I turned in last night. I an aware of my typo with the Sans; I sighed after I posted the question.
To get on, my web designer asked me the question. As I cannot answer it, I turned to the Almighty Internet, as it tends to never fail in providing for me.
I love Helvetica. If a Header or Sub header sans-serif cannot be utilized with Helvetica; keeping in mind its over all compatibility with web in the first place, (thank you koeselitz) then what fonts do work well? The convention for artistic/photographic websites is sans-serif.
I want my site to look clean, straight forward, and absent of whimsy.
Thanks to all for taking the time to wax philosophically on the strength of Helvetica and the strength of my question.
posted by captainsohler at 5:20 PM on March 9, 2010
To get on, my web designer asked me the question. As I cannot answer it, I turned to the Almighty Internet, as it tends to never fail in providing for me.
I love Helvetica. If a Header or Sub header sans-serif cannot be utilized with Helvetica; keeping in mind its over all compatibility with web in the first place, (thank you koeselitz) then what fonts do work well? The convention for artistic/photographic websites is sans-serif.
I want my site to look clean, straight forward, and absent of whimsy.
Thanks to all for taking the time to wax philosophically on the strength of Helvetica and the strength of my question.
posted by captainsohler at 5:20 PM on March 9, 2010
To get a better feel for what you're going for, could you explain why a sans serif is a must?
I've dealt with a lot of artistic and photographic websites and I don't think the convention is sans-serif. I know of several that use serifed faces for their header text while also still presenting clean and professional designs.
posted by thebestsophist at 9:17 PM on March 9, 2010
I've dealt with a lot of artistic and photographic websites and I don't think the convention is sans-serif. I know of several that use serifed faces for their header text while also still presenting clean and professional designs.
posted by thebestsophist at 9:17 PM on March 9, 2010
clean, straight forward, and absent of whimsy.
Helvetica is not only the font that best embodies those adjectives, it may be cleaner, more straightforward, and less-poseessing-of-whimsy than any other human creation.
posted by eggplantplacebo at 9:54 PM on March 9, 2010 [2 favorites]
Helvetica is not only the font that best embodies those adjectives, it may be cleaner, more straightforward, and less-poseessing-of-whimsy than any other human creation.
posted by eggplantplacebo at 9:54 PM on March 9, 2010 [2 favorites]
« Older Did Family Guy Start the "cutaway to gag" trend? | Help me edit named ranges in Excel 2008. Newer »
This thread is closed to new comments.
To sum: keep it in the family.
posted by wabbittwax at 7:27 PM on March 8, 2010 [4 favorites]