CSS Fonts


One of the most important but overlooked aspects of a web design is the typography. The fonts you use and how you present those fonts can really make or break your website design. Thankfully you can use CSS to really make your fonts look great!

The first thing to learn when it comes to CSS fonts are the selectors and what each of them do. Here are the main font selectors and what they do:

font-family
This selects which font you want to use for your text. You can specify more than one font family, then if the browser cant find the font you use first it will move on to the next one and so on until it finds one it recognises.

font-size
As you might of guessed this defines the size of the font. You can define this as a pixel size (e.g. 12px), as a general size (e.g. large, small etc.).

font-style
The font style attribute defines extra styles to your font such as italic.

font-weight
The font weight sets the weight of the font. To define the weight of your font you can use words (such as normal, bold or bolder) or you can use values (e.g 100, 200, 300 etc.) the higher the values get the bolder the font will get.

These are the main font properties you will use. Now lets have a look at defining a font in CSS. We will add the font to an id called content. Basically this means that everything in the content div will be given the font style we define whilst everything outside the div will have a seperate style.

#content{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;}

In the example above we first define the font family, you might notice I slected three fonts all seperated by a comma. This is (as described above) so the browser can find another font to use if it cant find arial. Next we define the font size which is pretty self explanitory. Then we define the font weight and font style. As the default for these two values is normal if you didn’t want to have italic or bold text then you wouldn’t have to define them so your css style would look like:

#content{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;}

Now we will move on to writing the above style in shorthand. Writing in shorthand has the same effects as writing it the long way, it just saves some space.

The way the style should be layed out is:

#content{
	font: font-style font-weight font-size font-family}

So an example of a font style would be:

#content{
	font: italic bold 12px Arial, Helvetica, sans-serif;}

And that’s all you need to know for the basics of text styling with CSS.

  • http://www.my-template.org Raaj Cena

    Thats cool but what about the font smoothness
    Here is code but I cant understand How to use in stylesheet this code

    Testing the word group

  • http://www.magicsurveytool.com Online Survey Software

    Amazing Online Survey Software takes just a few minutes to launch, does not need to be downloaded and is interactive to respondents as well. All one needs to do is use the survey wizard in the web browser and get started. The first step to build a survey is to select from the given templates, where questions and answer choices can be selected. Questions can be single, multiple response, and matrix type or open ended. An entirely new survey design can be created without any programming skills.

  • http://vpwfqof.com/xrwcpf.html Nadine Dyer

    hi
    2z88mo8b7u51e7ow
    good luck

  • http://txysgv.com/wtlmj.html Andres Silva

    hi
    2z88mo8b7u51e7ow
    good luck

  • http://thumbshit.blogspot.com/ Radith

    TQ.. now i have better explanation on why do people use 3 type of font-family in their style sheet

  • http://www.burakgulnar.net burak

    Good info.Good Share
    .-= burak´s last blog ..Warez nedir?Seo da önemi =-.

  • http://altamiraweb.es Diseño Bamug

    Really great, Janko. Thanks for all the work and for sharing. Have you thought about Posterous, SlideShare and Google Buzz? Cheers, C

  • http://www.westernsoftwares.com/ Internet marketing C

    i truthfully enjoy your own writing kind, very remarkable,
    don’t give up as well as keep writing due to the fact that it simply just worth to follow it.
    looking forward to see a whole lot more of your current well written articles, enjoy your day

    Internet marketing Company

  • http://www.townsdelight.com/main.html Tagaytay Weddings

    It a great pleasure to visit your site and to enjoy your excellent post here and gain more knowledge as well. I like them very much. I can feel that you paid much attention to those articles, as all of them make sense and are very useful. Thanks so much for sharing.

  • http://www.veloxtelco.com.au 1300

    I have a question for you?

    Have their ever been any studies in regards to the effectiveness of each font?

    I would love to find out if a certain fonts would be more profitable, what ages or generations are attracted to each font.

    It sounds like a pointless excercise however, this info could really come in handy.

    Specifically if your products are designed to target a certain age group.

    Long shot in know

  • jmz

    I’m no expert on typography so I had a little look around on the net and found this which may or may not be of use to you: http://psychology.wichita.edu/surl/usabilitynews/81/PersonalityofFonts.asp

    I certainly think that you have a valid point though!

  • http://www.veloxtelco.com.au 1300 Number

    i am currently so much into typography. i think this blog post is very informative and thus very helpful to beginners like me