Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Helvetica Neue with CSS

Helvetica Neue with CSS
Thread Tools
Nerozwei
Forum Regular
Join Date: Dec 2002
Status: Offline
Reply With Quote
Jul 25, 2003, 06:09 PM
 
Is it possible to choose the "sub style" of fonts... For example if I'd like to use Helvetica Neue 25 Ultra Light specifically.. Is it possible with current CSS versions and browsers?

This is just experimenting, so don't yell out that it's not supported by most browsers etc.
     
arson
Fresh-Faced Recruit
Join Date: Jul 2003
Status: Offline
Reply With Quote
Jul 25, 2003, 06:17 PM
 
Yes, but the end-user needs the font installed, make sure to havea few fall backs, just in case.
I'm what Willis was talking about.
     
piot
Forum Regular
Join Date: Oct 2001
Location: London
Status: Offline
Reply With Quote
Jul 25, 2003, 06:26 PM
 
Very unlikely that many people will that font installed!
I assume you want to use it for a heading...?

Best to create an image.
Piot
     
Nerozwei  (op)
Forum Regular
Join Date: Dec 2002
Status: Offline
Reply With Quote
Jul 25, 2003, 06:48 PM
 
Thanks for your replies guys.

I know the users would need that font installed. I think Helvetica Neue is included with every copy of OS X? I could be wrong though. And maybe my original question was a bit unclear. I'm looking for access to sub styles of specific fonts. Most fonts (all? ) have normal, bold and italic. Helvetica Neue, for example has more than those basic ones. You can see them in Photoshop by choosing the font and then choosing the style from the dropdown.

If I really needed to create custom headers, I'd probably use images. If it was database driven with lots of headings I'd look into server-side generation. I guess a small block of flash with embedded fonts could be used (along with a connection to the DB). Sort of a hack, but... isn't everything

The bottom line is: I'm just wondering can this be done? Can specific font (sub) styles be chosen with CSS and can any browser (Safari, Camino maybe?) display them correctly?

But anyway... I'm off to sleep, nighty-nighty
( Last edited by Nerozwei; Jul 25, 2003 at 07:10 PM. )
     
mzllr
Registered User
Join Date: Jul 2003
Location: San Jose
Status: Offline
Reply With Quote
Jul 25, 2003, 08:04 PM
 
yuuuuuuup,

[style]

.text {
font-family: helvetica;
font-size: 10pt;
font-style: italic or none;
font-weight: bold, bolder, lighter, normal, or 100 - 900;
color: #000000;
}

[/style]

if a font has the word 'medium' in it, it would be assigned a weight of 500. all fonts with the word 'bold' are at 700...
( Last edited by mzllr; Jul 25, 2003 at 08:12 PM. )
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Jul 26, 2003, 06:05 AM
 
Originally posted by mzllr:
yuuuuuuup,

[style]

.text {
font-family: helvetica;
font-size: 10pt;
font-style: italic or none;
font-weight: bold, bolder, lighter, normal, or 100 - 900;
color: #000000;
}

[/style]

if a font has the word 'medium' in it, it would be assigned a weight of 500. all fonts with the word 'bold' are at 700...
But if a font has different styles included, aren't those specially made? For instance, Garamond's italic style is custom made and not just slanted by a computer. I was actually wondering about this myself... BTW, point is a print value, not for computers
     
mzllr
Registered User
Join Date: Jul 2003
Location: San Jose
Status: Offline
Reply With Quote
Jul 26, 2003, 05:59 PM
 
Originally posted by Synotic:
But if a font has different styles included, aren't those specially made? For instance, Garamond's italic style is custom made and not just slanted by a computer.
gotcha... i see what the original poster was asking now.

for the pt size, this is what i generally use without any problems... and from the o'reilly css reference:

if you use a length value for the font-size attribute, choose a unit that makes the most sense for fonts, such as points (pt)...

BODY {font-size: 14pt }
so, i don't know if it's considered bad form, but it's just always worked well for me...
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Jul 27, 2003, 06:31 PM
 
Originally posted by mzllr:
for the pt size, this is what i generally use without any problems... and from the o'reilly css reference:

so, i don't know if it's considered bad form, but it's just always worked well for me...
Well font size is a pretty controversial subject. Essentially it's completely impossible to maintain the same size of a font on all platforms. But the general consensus is:

px: Bad because it cannot be resized in msie. Zeldman prefers it because it does somewhat give you the same font size, but you have to use a javascript text sizer, which can be a problem.

pt: Not really for screen, it's a print size.

em: Generally this is what is preferred because it can be resized in all browsers, it's not exactly the same in all browsers but it works well enough. Because it is a relative, you can do interesting effects such as making the font-size 1em (an em is the height of the letter 'm' and the line-height 2em. This doubles the leading as the text size increases.

Anyways, I thought this would be useful to some people.

P.S. Nice site
     
mzllr
Registered User
Join Date: Jul 2003
Location: San Jose
Status: Offline
Reply With Quote
Jul 27, 2003, 08:01 PM
 
Originally posted by Synotic:
Well font size is a pretty controversial subject. Essentially it's completely impossible to maintain the same size of a font on all platforms. But the general consensus is:

px: Bad because it cannot be resized in msie. Zeldman prefers it because it does somewhat give you the same font size, but you have to use a javascript text sizer, which can be a problem.

pt: Not really for screen, it's a print size.

em: Generally this is what is preferred because it can be resized in all browsers, it's not exactly the same in all browsers but it works well enough. Because it is a relative, you can do interesting effects such as making the font-size 1em (an em is the height of the letter 'm' and the line-height 2em. This doubles the leading as the text size increases.

Anyways, I thought this would be useful to some people.

P.S. Nice site
thanks, synotic... i'll play around with em's and see how they turn out.
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 07:19 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,