Using CSS to create anti-aliased text Headlines?

[bassa]

Hello!

I am unsure as to how these guys do this, but here's an example of what I'm looking for:

http://www.alistapart.com/articles/sprites

On the above webpage, there's a headline (and many others) that says:

"How do CSS Sprites work?"

This headline looks really good, and I would like to create similar headlines with the anti-aliased font on my new website.

But how do I add them?


Cheers,
Bassa

[Medyman]

The headlines are created using the following CSS. There is nothing special going on there. The typeface is Georgia.

h2 {
-x-system-font:none;
font-family:Georgia,"Times New Roman",serif;
font-size:1.5em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:1px;
line-height:normal;
}

The rendering of the font is highly dependent on the OS and browser you're using.

[bassa]

Yeah, I've looked into his .css files and checked it out myself.

Couldn't see anything I didn't recognize either.

It just looks as if he's somehow able to create that headline and I'm not.

I've tried creating an exact copy of his headline, though I end up with a bigger font than his.

Font size is 1.5 ems. I've tried that as well, but it appears quite alot bigger in my test run than on his website.

I tried using font size 14 px and 16 px as well, but I am not getting any anti-aliased effect on those sizes, only 17 px and above. And 17 px is way too big compared to his.

No idea what the issue is, or what his "secrets" are.


Cheers,
Bassa

[TheJoshMan]

Well, the reason your font size looks different is because by specifying the unit as "em"s, you're just adding onto or subtracting from the default font-size you already have specified in your stylesheet.

[bassa]

I see.

So, how do I change that?


Cheers,
Bassa

[Medyman]

Using A List Apart to mimic A List Apart...
There's something poetic about that.

http://www.alistapart.com/articles/howtosizetextincss
http://www.alistapart.com/articles/elastic/

[bassa]

Those were great links, thanks.

(For the record, I use Dreamweaver to setup my layouts in html and CSS, so please bear with me if my questions may seem ridiculous or "weird". I am no programmer, whatsoever, I am simply trying to create a new website with the best possible use of programming and web-standards, such as not using tables anymore to dictate my layout.)

With that aside, I, of course, have more questions.

I am currently using this setup in the Body of my html markup;

<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(images/bg.gif);
}
-->

First of all, I will likely try to create a CSS class/Div ID container (I am unsure what these are called) to control the "surroundings" of the main content, and also add my background image. Like shown above. But that part is in my .html file, at the top, and I think it may be better to put it inside my default.css file to have everything CSS-related put together in one place.

Anyway, I'm rambling on and on.

So, here's my question;

How do I find out where my default font is activated? Is it defined by Dreamweaver itself, or perhaps a Browser default? For example, if I open up Dreamweaver and create a simple .html file to start out with - the default font in that .html document simply says 'default' - lol.

I noticed that there's a difference in the charset iso between my .html file and the one used on alistapart.com - shown below.

My setup:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

alistapart.com setup:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Perhaps this is where font behavior and looks are defined?

[Medyman]

I am currently using this setup in the Body of my html markup;

Not a huge deal, but you can shorten that to:

body {
	margin: 0;
	background-image: url(images/bg.gif);
}

How do I find out where my default font is activated? Is it defined by Dreamweaver itself, or perhaps a Browser default? For example, if I open up Dreamweaver and create a simple .html file to start out with - the default font in that .html document simply says 'default' - lol.

I'm not sure how you're testing for the "default" font. This is set in the browser's settings.

For example, in Firefox... Go to Tools > Options > Content > Fonts & Colors
This is where the default font is identified. If you don't add a font to your CSS and/or markup, this will be automatically used. It's best practice, however, to supply a font in the CSS as you can't be sure what a user has selected as his/her default system font.

Perhaps this is where font behavior and looks are defined?

No, the charset has nothing to do with how a text renders. It simply sets which character set is allowed on the page. For most Western European languages, iso-8859-1 is good enough. Read more about it here.

You can control the look/feel of all web typography through CSS. Here is a good article detailing the options available to you. You will find a search at A List Apart helpful with this subject as well.

[bassa]

Ok, I am getting a little more hang of it, however, I always find myself in immense trouble whenever I try to use my Div containers.

I have used a <h2> tag for my new headline, but now there's grey spaces above and below the headline.

What did I do wrong?

http://www.ufodesign.dk/css.html


Cheers,
Bassa

[bassa]

Also, this line here has a link in it; "Frøsø Køkkenfornyelse ApS", and has been assigned with a new selector (?) and a :hover option so taht it changes slightly when you hover your mouse on it.

It's part of this text part; "Frøsø Køkkenfornyelse ApS tilbyder måltilpassede låger efter dit ønske. Vore veluddannede montører monterer dit køkken for en aftalt pris med fuld garanti. Køkkenlågerne produceres af MDF-plader som folieres."

Here's the .html part:

<p align="left" class="content">Velkommen hos Fr&oslash;s&oslash; K&oslash;kkenfornyelse.</p>
                <p align="left" class="content"><a href="#" class="contentlink">Fr&oslash;s&oslash; K&oslash;kkenfornyelse ApS</a> tilbyder m&aring;ltilpassede l&aring;ger efter dit &oslash;nske. Vore   veluddannede mont&oslash;rer monterer dit k&oslash;kken for en aftalt pris med fuld garanti.   K&oslash;kkenl&aring;gerne produceres af MDF-plader som folieres.</p>

And here are the CSS classes:

.content {
	background-color: #fefff9;
	color: #444;
	text-decoration: none;
	word-spacing: 0.2em;
	text-align: left;
	letter-spacing: 0;
	line-height: 1.8em;
	font-size: 1.2em;
	font-family: Arial;
}

.contentlink {
	background-color: #fefff9;
	text-decoration: none;
	word-spacing: 0.2em;
	text-align: left;
	letter-spacing: 0;
	line-height: 1.8em;
	font-size: 1.2em;
	color: #B41414;
	font-family: Arial;
}

.contentlink:hover {
	text-decoration: none;
	word-spacing: 0.2em;
	text-align: left;
	letter-spacing: 0;
	line-height: 1.8em;
	font-size: 1.2em;
	color: #000000;
	background-color: #F0F0F0;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
	font-family: Arial;
}

However, the "Frøsø Køkkenfornyelse ApS" part appears bigger in size than the rest of the text.

Any suggestions as to why that is?


Cheers,
Bassa