I need to match a font from a designer to something similar for web

Question

I don't know if this is an Illustrator spec or where exactly, but a designer gave me this spec for a font:

Helvetica Neue (T1), 35 thin, 20 pt, off/ 454545, on/70a63a

There are other similar ones for different areas of the page, but if you can tell me how to match this one using CSS, hopefully I can figure out the rest.

Thanks!

Answer 1

It may be difficult as only a SMALL subset of fonts are supported by all browsers, and MAY look completely different in one browser as opposed to another (see Fantasy type font in Firefox vs IE).

Here is some css to get you started though

.myCss {font-family:Helvetica;font-size:20pt;font-weight:100;color:#454545}
.myCss:hover {color:#70a63a}

Font-weight, in current browsers supports pretty much NORMAL and BOLD. But in new browsers will range from 100 to 900, with 700 being todays BOLD, and 400 being todays NORMAL.

NOTE: Hover will only work on link elements in stupid IE 6, support for it is MUCH better in IE 7 and waaay better in firefox.

Answer 2

The font name is Helvetica Neue. The T1 means PostScript type 1. 35 Thin is the weight/variation. 20 pt is the size. off and on are the colors.

Helvetica Neue (or Helvetica or Arial--all three are very similar) is present on just about every computer. The thin variation is not. I recommend doing font family Helvetica Neue, Helvetica, Arial, font-size: 20pt, and setting the font weight to the lowest possible: 100. Some variations of Helvetica/Arial may not have lighter font-weight variations, so setting the font-weight may not do anything.

If you absolutely need the exact font (and if your designer expects this in anything but headings when designing for the web, you need to go have a talk with said designer), you can use SIFR or images.

Answer 3

This will get you as close as possible on all platforms:

font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight:100;
font-size:20pt;