PDA

View Full Version : font styling


walkamongus
01-25-2009, 08:00 PM
hi all, wondering if anyone has any tips as to how to style the standard fonts in dreamweaver. ive been using geneva, and id really like it to appear thinner/lighter but the weight settings in the div dont seem to have an effect. any ideas?

Ricky55
01-26-2009, 12:23 AM
I'm not even sure that Geneva is a web safe font, I think it may get replaced by Verdana on some systems, not totally sure on that one though.

Going back to your question, with CSS you can't alter the weight settings but only certain browsers support them, IE not being one of them.

The only weights it will render are bold normal and italics.

This is something that we have to deal with, I usually think its fine and for my body text use Verdana or Arial. Trebuchet is getting quite popular or Georgia. If I need a really nice looking light weight font I tend to use an image but only for headers.

You are better using real text for everything if you can but sometimes you just can't get the look you want.

Don't use an image for body text though.

This is a site I need recently, here I have used Myriad Pro for my headers these are images, that replace real text behind them using the image replacement technique and all the body text is verdana.

http://www.spenvalleykitchens.co.uk/

Hope this helps.

Ps
What I mean by the image replacement technique is that text is actually there its just replaced with an image using CSS. Don't just use an image without doing this for two reasons, search engines won't see them and neither will people using screen readers.

Ricky55
01-26-2009, 12:24 AM
Sorry just read that back, of course I meant to say that the weight settings can be changed with CSS but only certain browsers support them.

domedia
01-26-2009, 12:53 AM
hi all, wondering if anyone has any tips as to how to style the standard fonts in dreamweaver. ive been using geneva, and id really like it to appear thinner/lighter but the weight settings in the div dont seem to have an effect. any ideas?

If you want it thinner than the default state (font-weight: normal;) you're outta luck. There's only support in FF3 for linux afaik.

walkamongus
01-26-2009, 03:07 AM
thanks for the advice! never heard of that image replacement technique. as of now im using text with image headers only(no text behind them). looks like ill just have to settle for geneva or verdana for the body...:(

peace

WallyJ
01-26-2009, 01:45 PM
Create a css class called "MainBodyText", then apply it to all of your body text. That way you can set whatever font you want, editing site-wide when necessary.

WallyJ

Corrosive
01-26-2009, 01:56 PM
Create a css class called "MainBodyText", then apply it to all of your body text. That way you can set whatever font you want, editing site-wide when necessary.

WallyJ

Why not just correctly use hx and p tags and style those? It's also a bit misleading to say that 'you can choose any font you want' as you have to accept that not all fonts are available on every PC. This is why it is best to stick to the usual suspects i.e. Times, Ariel, Verdana etc. as these are common place on most PCs/Macs. It's also why you should specify a range of fonts in CSS in case the first font in the list is not available.

What are you selling WallyJ?

WallyJ
01-26-2009, 02:14 PM
I should have been more clear in saying that "you can choose whatever font you want... remembering that your choice should come from a limited list of safe-to-use-and-widely-accepted fonts."

You could change the css to affect all p tags, but that would make EVERY font in a paragraph tag the same. It's safer to give a style it's own name. Then you could use a different thicker font for certain styles, etc. I like the flexibility.

Selling? If you look at the site or read my sig, you can see that I have created a new IRC channel for Dreamweaver users. I searched for a good one online and couldn't find one. So I made one. Just trying to give IRC users a place to gather and chat about Dreamweaver issues. I'm not selling anything, other than the cool idea of helping each other in a chat format.

WallyJ

Corrosive
01-26-2009, 02:28 PM
You could change the css to affect all p tags, but that would make EVERY font in a paragraph tag the same. It's safer to give a style it's own name. Then you could use a different thicker font for certain styles, etc. I like the flexibility.

Consistent fonts make a page/design readable IMO. If you want a bold paragraph or two then you can always add a class to the p tag or even use the <strong> option. Plenty of ways to change fonts without losing correct mark-up. Have PM'd you on the other btw. :wink:

Ricky55
01-26-2009, 06:20 PM
or a new one for you.

div.test p:first-child {
font-weight: bold;
}

this would make the first paragraph in a div with a class of test bold.

Ricky55
01-26-2009, 06:22 PM
Does IE 6 support the first child pseudo class

domedia
01-26-2009, 06:35 PM
Does IE 6 support the first child pseudo class
Nope unfortunately not :-/

Corrosive
01-26-2009, 06:35 PM
Does IE 6 support the first child pseudo class

Does IE6 support anything?????

walkamongus
01-28-2009, 09:25 PM
in a somewhat related topic, i found this list of fonts that are claimed as browser safe...

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

is this correct? i was thinking i only had about six choices!

Corrosive
01-29-2009, 09:29 AM
in a somewhat related topic, i found this list of fonts that are claimed as browser safe...

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

is this correct? i was thinking i only had about six choices!

That looks about right for the fonts that come with most common OS. The most important thing is to have a couple of back-up fonts specified and then test your design in browsers with all the fonts chosen to make sure it doesn't break.

walkamongus
01-30-2009, 01:15 AM
cool, i appreciate it