[siddes]

Couldn't find anything on the topic, so here goes.

I'm making this homepage and I use an H1 for the heading.

The problem is jagged edges, even on web safe fonts like Verdana and Arial.

I've seen some graphic designer sites that have have no jaggeds whatsoever, but I can't figure how to achieve that using CSS.

Do i really have to use Photoshop, because I don't want to? My homepage must be plain, simple and quick.

[djhektik]

afaik it depends on three factors: browser support, user os settings, and the unit used for font size.

i'm not 100% sure but if you are using px as a font size unit, try changing to ems or % (you should not be using px anyway)

+edit+

i'm pretty sure there's no css attribute to define that; if that is what you were looking for

[Ftju]

There is a great Flash project for this. It replaces the Headline tags with flash files that contain an font in any form or shape could be an font that the viewer doent have, and present it in Anti-ailising ones. If you dont have flash or javascript on than you see the normal Headline tags.

project called Sifr. site: mikeindustries.com/blog/sifr/

[siddes]

But won't the flash make it a little heavy?

On my current homepage, all my images are in bytes. The point is, I want to make a highly customizable page with themes and other such effects, only through the use of CSS. Adding too many images spoils that.

Check my current page at sid-deswal(dot)110mb(dot)com

[siddes]

@ djhektik

I'll try what you say. Right now, all my sizes are in px, so maybe that's where the problem lies.

Thanks

[djhektik]

you see, it depends on the os/browser also: this was captured on my mbp: macos 10.5, flock 1.1, default settings



and this one is rendered from win 2k3 server, ie7, default settings

[Ftju]

Originally Posted by siddes

But won't the flash make it a little heavy?

On my current homepage, all my images are in bytes. The point is, I want to make a highly customizable page with themes and other such effects, only through the use of CSS. Adding too many images spoils that.

Check my current page at sid-deswal(dot)110mb(dot)com

well all the headlines are made Trough 1 flash file and not different files for every headline. And yes it makes it more heavy, but it solves the problem.

[blacksmoke]

better~

[siddes]

@djhektik

90% of the market is IE, and thats what the majority of my audience will be using, even though FF is much better.

@Fjtu

I guess if IE doesn't show it nice, I'll have to start using flash and then somehow create a lot of money to spend on bandwidth.

[siddes]

better???

[pgo]

Originally Posted by siddes

@djhektik

90% of the market is IE, and thats what the majority of my audience will be using, even though FF is much better.

@Fjtu

I guess if IE doesn't show it nice, I'll have to start using flash and then somehow create a lot of money to spend on bandwidth.

The font rendering really has nothing to do with the browser and everything to do with the OS. FF on his Win Server 2k3 virtual machine will look the same.

It's a user setting. No sense in worrying about it. Use sIFR if you want, but very sparingly. It's not too heavy in terms of bandwidth, but it is in terms of client-side processing.

Why can't you just use plain old image replacement? A PNG or a GIF is easier to process (and more widely supported) than sIFR!

[djhektik]

it is not locked to the user setting. the following screen is one of my sites on my w2k3 server, ie7, without changing any settings in the browser or os:



you can see the text is antialiased, though its not as smooth as the previous example from macos.

the following is the css code that styles the text on that site:

body {
	font: 13px "Lucida Grande", Verdana, Arial, sans-serif;
	line-height: 1.22em;
}
select, input, textarea {
	font: 99% arial,helvetica,clean,sans-serif;
}
pre, code {
	font: 115% monospace;
}

so i guess it throws the unit idea out of the window. experiment and see what happens.

personally though, i would not use flash or images for text, especially when the only reason is anti aliasing.

[siddes]

The page looks different on different browsers in the same OS.

I've checked the page on Safari, IE, FF and Opera on WInXP Pro SP2

The best looks are obviously on Safari.

[abbasinho]

are you viewing the page on a mac or pc?? if it's a mac fonts will look smoother because the screen resolution is higher on a mac than a pc.

i think mac's show the screen at 96dpi - whereas pc's show at 72dpi.

[djhektik]

Originally Posted by abbasinho

are you viewing the page on a mac or pc?? if it's a mac fonts will look smoother because the screen resolution is higher on a mac than a pc.

i think mac's show the screen at 96dpi - whereas pc's show at 72dpi.

the os will not affect this. screen resolution, as in pixels per inch is defined by the monitor specs and user setting. my macbook pro 15" screen runs at 1440x900, so assuming the screen measures 13.5 inches wide, that calculates to about 100 dpi.

if i restart the computer in windows, the dpi value will be the same - the screen will still run at 1440x900 and the screen itself will still measure 13.5 or so inches wide.

different screens will have different "real" resolutions, which is why a high resolution on a small screen makes everything on screen look small.