9 replies [Last post]
Suusie
Offline
newbie
Last seen: 10 years 6 weeks ago
Joined: 2004-08-09
Posts: 6
Points: 0

Are there ways in css to make text look better (like anti-aliased) when the font-size is big?

Thanks,

Susanne

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

how to make big text look better

Anti-aliasing on text within a browser is purely down to the system. Mac OS X does it by default; Windows XP allows the option to turn it on (called ClearType... why they've deeply hidden this option I don't know!)

You can specify type-sizes in most measurements, with CSS. You can use inches, mm, pixels, ems, cm, points, picas, titled-units (such as small, large), percentage, and ex.

Ideally, we'd all use pixels. But IE won't allow for user-resizing of pixel specified type-sizes in CSS. If you are worried about this, then try percentage and ems.

As a quick guide to using type-sizes with CSS:

HTML:

<p id="example">Text Here...</p>

CSS:

p#example
{
font-size: 24px;
}

Smile

The next sentence is true. The previous sentence is false. Discuss...

Suusie
Offline
newbie
Last seen: 10 years 6 weeks ago
Joined: 2004-08-09
Posts: 6
Points: 0

thanks

Thanks for the help, but I was looking for something else. I found that you can fake a sort of anti-aliasing by making a blur:

In the <head> or in your stylesheet:
<style type="text/css">
.blur
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 700;
color: #363636;
width:100%;
height: 24px;
padding-top:2px;}
</style>

in the body:
<div class="blur" style="filter: blur(color=#151178, Strength=2, direction=120);">text</div>

It looks a little better in IE but doesn't work in Mozilla. But well, it's more than nothing...

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 10 years 35 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

how to make big text look better

That looks really awful on my set up.
The blur gives a ragged effect and looks worse than the plain text.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Suusie
Offline
newbie
Last seen: 10 years 6 weeks ago
Joined: 2004-08-09
Posts: 6
Points: 0

oops?

Don't know how you see it, it worked for me on my pc with IE 6.0 and didn't do anything in Mozilla (so didn't look awfull either)....

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 10 years 35 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

how to make big text look better

I have put a screen shot of the blur and standard image here

http://www.stunicholls.myby.co.uk/cssforum/text.jpg

The blurred image is on top and the 'standard' IE text is below.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Suusie
Offline
newbie
Last seen: 10 years 6 weeks ago
Joined: 2004-08-09
Posts: 6
Points: 0

how to make big text look better

I suspect your pc is antialiasing for you. Otherwise the letter on the bottom would look terrible. I can try to reproduce this on my pc and show you what I would see if you tell me what typo you used?

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 10 years 35 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

how to make big text look better

The font is verdana (as per your style sheet).

...and I have my display settings - 'Smooth edges of screen fonts' turned on.
I believe that this is the 'normal' setting and that most PC owners have this turned on. I can see no good reason to turn it off these days with the speed of modern display drivers.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Suusie
Offline
newbie
Last seen: 10 years 6 weeks ago
Joined: 2004-08-09
Posts: 6
Points: 0

how to make big text look better

Thanks for your help. I found out that it is standard off on the windows 2000 machine I'm working on but standard switched on on windows xp. I'd better not use it anymore, since it really looks horrible when smooth edges is switched on.

greetings, Susanne

Suusie
Offline
newbie
Last seen: 10 years 6 weeks ago
Joined: 2004-08-09
Posts: 6
Points: 0

how to make big text look better

Thanks for your help. I found out that it is standard off on the windows 2000 machine I'm working on but standard switched on on windows xp. I'd better not use it anymore, since it really looks horrible when smooth edges is switched on.

greetings, Susanne