Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Bulletproofing a menu

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 10, 2011 at 11:38 am #34712
    mpanic
    Member

    I’m having a problem with bulletproofing a menu. Here’s the problem, the site uses a custom font from fonts.com

    	font-family:'HelveticaNeueW01-55Roma', Helvetica, Arial, sans-serif;

    Now, if HelveticaNeue fails to load and it falls back to Helvetica which is a much wider font the menu falls apart.
    This is my markup:

    This is my CSS:

    #main-menu{
    
float: right;
    
margin: 51px 0 0 0;
    
max-width: 700px;
    
}
    
#main-menu li{
    
float: left;
    
}
    
#main-menu li a{
    
display: block;
    
padding: 0 0 5px 0;
    
margin: 0 25px;
    
font-family:'HelveticaNeueW01-77BdCn 692722', Helvetica, Arial, sans-serif;
    
font-size: 2em;
    
color: #fff;
    
text-transform: uppercase;
    
text-decoration: none;
    
text-shadow: 0 1px 0 #946439;
    
}

    First list item should align to begining of #main-menu, and the last list item should align to the end of #main-menu. How do I get it to work the same when I have Helvetica or Helvetica Neue as my font?

    Thanks for any help.

    October 10, 2011 at 5:00 pm #88827
    mpanic
    Member

    I’ll have to check about the legalities of hosting the font myself…
    So you would suggest against using services like fonts.com or typekit.com?
    What if self-hosted font is not an option?

    Cheers

    October 10, 2011 at 5:49 pm #88828
    chrisburton
    Participant

    I’m pretty sure you can’t use Helvetica Neue with @font-face. Typekit I believe is an alternative option.

    October 10, 2011 at 10:26 pm #88849
    chrisburton
    Participant

    I previously went through this as I was designing my menu. In the license it states I cannot use @font-face in which I had to rely on a simple image sprite.

    Edit: You can use Helvetica with webfonts.fonts.com (owned by Monotype which owns Helvetica)

    Neue Helvetica

    October 11, 2011 at 5:33 am #88862
    mpanic
    Member

    I am using Helvetica Neue from webfonts.fonts.com. I need a backup plan if loading the font from webfonts fails, since my fallback font (Helvetica) is much wider than Helvetica Neue Condensed.

    See: Your text to link…

    It needs to be 100% bulletproof so if for any reason webfont loading fails the menu musn’t fall apart.

    Any ideas?

    October 11, 2011 at 9:12 am #88872
    chrisburton
    Participant

    @Paulie_D What about..?

    font: normal 22px "Helvetica", Arial, sans-serif;

    Obviously Arial isn’t the right choice but if Helvetica fails, Arial will take its place.

    October 11, 2011 at 9:45 am #88880
    chrisburton
    Participant

    I don’t think you’re wrong but merely a personal way of doing it. I do the exact opposite.

    Also, you edited your post therefore my comment doesn’t fit what you previously said.

    October 11, 2011 at 10:43 am #88884
    chrisburton
    Participant

    I’ll just say this: If you know typography, choosing the right fallback should never break your layout. Also, would you stay on a site that is poorly designed? I think it matters what every aspect of the site looks like.

    October 11, 2011 at 11:01 am #88888
    chrisburton
    Participant

    Agree. Helvetica was not the right fallback choice in a typeface that has a weight of black and is condensed.

    I have actually never looked into the probability of the fonts failing to load. I think I’ll put that on my list.

    October 12, 2011 at 4:37 am #88937
    mpanic
    Member

    You guys have a point, there is almost no chance of the font failing to load…
    Could you recommend another web-safe fallback font insted of Helvetica, Arial?

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.