CSS Properties 3 – Fonts

AD

A week has passed and I’m back with another insight which will help you in discovering the beauties of CSS. As promised, the third part explains everything there is to know about Fonts. There is obviously no need to stress the prominence of Fonts in terms of typography and web design, but before we begin this article, if you haven’t checked out the previous two, you should.

CSS Properties 1 – Units and Colors

CSS Properties 2 – Text and All About It

 

<style type="text/css">
.h1 {text-align:center; color:#ccc;}
p {color:red; text-decoation:underline;}
</style>
<h1>Designzzz</h1>
<p>This is a test code</p>

So now, without much further ado, let’s begin.

The Fontastic CSS

Logo of CSS

Basic sum of font properties contains:

  • Font Family
  • Font Style
  • Font Variant
  • Font Weight
  • Font Size
  • Font

Font Family

Syntax

font-family: | It is possible to enter more separated by commas.

Possible values

  • family-name
  • generic-name

Deals with the typographic aspect. In case you don’t know much about typography, consider to quickly skim through our Typography article or its extended version in form of a subchapter in our Photoshop Crash Course eBook.

Example

.h2 {font-family: Arial, "Lucida Sans Unicode", Verdana, "sans-serif"}

An important note is that if you select only exact font names, you face a danger that the browser of your visitor will be unable to recognize the specific font. You should therefore always list the generic font family as a backup, and let the particular browser come up with another font from the same family.

In our example, in the unlikely case the browser lacks Arial, Lucida Sans Unicode and Verdana, it will obtain an instruction to provide any sans-serif font available – if we didn’t include the “sans-serif” command, the browser would supply its owner with any basic font of its choosing, which would also both ruin your multi-browser compatibility and might even cause crashes.

Another important note is that if a font has a longer name than one word, you need to put it in quotes, otherwise the syntax will be misinterpreted.

Font Style

Syntax

  • font-style

Possible values

  • normal
  • italic
  • oblique

A very straight-forward property modifying the style of the font. Three basic values, nothing much to speak about, expect perhaps the word “oblique”. It’s nothing fancy really; oblique style resembles the classic italic we’re all used to, it only doesn’t use different glyph shapes. See the Wikipedia article for more reference.

Example

.h3 (font-style: oblique)

Font Variant

Syntax

  • font-variant

Possible Values

  • normal
  • small-caps

A rather obscure property, I admit I’ve never heard of it before I wrote this tutorial. Normal is self explanatory and small-caps is an interesting style that will show everything in capital letters, but uppercase characters will be a bit larger than lowercase letters. Could be useful for interesting visual effects, play with it!

Example

.h3-visited {font variant: small-caps}

Font Weight

Syntax

  • font-weight

Possible values

  • normal
  • bold
  • bolder
  • ligther
  • 100
  • 200
  • 900

Font Weight is a basic property which you can use to influence highlighting of your text. The values are divided into relative (normal, bold, bolder, lighter) based on inherited properties of the font and absolute (100-900).

Be advised that not all fonts are available in every weight, so in case you go for the absolute values, there are three groups from which the actual value will be assigned:

  • 100-300
  • 400-500
  • 600-900

Example

h4 (font-weight: bolder)
h5 (font-weight: 300)

Font Size

Syntax

  • font-size

Possible values

absolute size

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

relative size:

  • smaller
  • larger
  • length:
  • px
  • em
  • pt
  • in
  • percentage – e.g. 60% – will take parent value from the usual font size

One small note is that Internet Explorer proves to be a bad browser once again and tends to bug both when you use the direct size (in px, em etc.) or the percentage value. Either stay away from it or rigorously test your site in IE.

Example

h1 (font-size: x-large)
h2 (font-size: 15px)
h3 (font-size: 70%)
h4 (font-size: smaller)

Font

Syntax

  • font

Possible Values

  • every property we’ve talked about so far

If you want to modify every font element, you may as well use the top “font” command and do it all in one line. As you can see, all the values we’ve talked about prior to the Font property come into use here.

Example

.h3 {font: bold, small-caps, 300, small, 8px/12px, "serif fonts"}

Conclusion

I sincerely hope that you enjoyed the third part of DesignZZZ CSS Tutorial. As always, in case you have anything to add, just use the section for comments below. Next week, we shall examine the Box Properties and believe me when I say – that’s where the real fun begins.

Thank you for reading!

create free website wix below post

Further Related Readings

Comments
  1. Fareed khan May 24, 2011 at 1:10 am

    hello, i really getting impressed with your great blog, i am using this CSS properties really helps in my H2 tag

  2. Johan Vromans May 28, 2011 at 12:19 pm

    The description of small caps is not correct. It is better described as “a font with all lowercase letters replaced by smaller (usually 80%) uppercase letters”.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved