Style chooser

Fonts & fonts

Personally I try to avoid tools like sIFR (a flash loading utility) or custom css font loading. So unless the design really needs it I try to avoid them and keep the code as simple as possible (and the site will load much faster).

Still, I found that you can do a lot with fonts. Below I've placed two examples that use purely web fonts. Please use them as an inspiration but do not blindly copy them!

This is a Spring title

And the text will look something like this

This is fall title

And there is a bit more text that displays in a very different font style.


The css code for these examples is:

Spring example


title{

font: 28px georgia, serif;
color:#315D17;
letter-spacing:3px;
text-align:center;

}

paragraph{

font:12px arial, sans-serif;
color:#132509;
text-align:center;

}

Fall example


title{

Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size:30px;
color:#863A00;
letter-spacing:-2px;
text-align:center;
line-height:32px;

}

paragraph{

font:12px verdana, sans-serif;
color:#301700;
text-align:center;
letter-spacing:-1px;

}

Leave a reply.