Font Family

Font Family refers to the ‘name’ and/or ‘family of the font you want to use on the website. This can be described as the name of a font you would select from the drop down menu in a word processor, common examples are arial, verdana etc.

Example:

p {

font-family: arial, verdana, sans-serif;

}

What this selector does is tell the browser that the font you want the text to be displayed in mostly is arial but if the browser cannot find the primary font, use your second choice, third choice etc. If the browser cannot find any of the fonts specified then it should use any ‘sans-serif’ font on your computer instead.

I would suggest using no more than 2 fonts and a family when using this property in your website styles.

Font Size

Obviously this attribute controls the size of the text on your webpage.

Example:

p {

font-family: arial, verdana, sans-serif;

font-size: 12px;

}

You can specify the font size in many different ways. I would suggest using pixels (px) which is the same as you would see in a word processor, you can also specify a percentage, so obvious using this technique requires some experimentaiton. You can also specify a size in words. For example:

“xx-small, x-small, small, medium, large, x-large, xx-large”

Font Weight

You can use this attribute to bolden the text and set how bold you want it to be.

Example:

p {

font-family: arial, verdana, sans-serif;

font-size: 12px;

font-weight: bold;

}

You can specify the boldness in words, “normal, lighter, bold, bolder” or in numbers, “100, 200, 300, 400 etc”.

Font Style

This attribute allows you to specify the ‘style’ of your font, being italic, oblique etc.

Example:

p {

font-family: arial, verdana, sans-serif;

font-size: 12px;

font-weight: bold;

font-style: italic;

}

The possible values are, “normal, italic and oblique”.

The attributes mentioned above are the ones that you are likely to come across or use most often, however i will specify some others which you may need to use in special circumstances.

Font Stretch

Using this attribute you can expand or condense your text, meaning you can stretch smaller text to fit the width that you need. It can be described as a manual ‘justify’.

Example:

p {

font-family: arial, verdana, sans-serif;

font-size: 12px;

font-weight: bold;

font-style: italic;

font-stretch: wider;

}

Possible values are, “normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded”.

Font Variant

This attribute is used to provide one special effect tot he font, which is making it all small caps.

Example:

p {

font-family: arial, verdana, sans-serif;

font-size: 12px;

font-weight: bold;

font-style: italic;

font-stretch: wider;

font-variant: small-caps;

}

The only possible values are “normal, small-caps”.

That concludes the second installment of the BowlOfPixels Basic CSS Series. Thanks for reading and good luck in all of your CSS ventures!

The full size image can be seen Here.

Any feedback appreciated.

Aperture can be defined (in photography) as being a “hole or opening through which light is emitted”. But how is this applied in modern photography. Well, put simply, Aperture’s main use in photography is to control the depth of field (DOF) but Aperture is also used in conjunction with your Camer’a shutter speed to control exposure. For those that don’t know, the definition of depth of field is the distance in front and behind an object which remains to be in focus.

Therefore a larger depth of field keeps more of the image in focus and a smaller depth of field focuses on one main part of an image (the focal point) leaving more of the image out of focus.

How is Aperture Measured?

Aperture is measure in f/stops or f/numbers. The lower the f/stop, the greater the aperture (size of the hole that light can pass through) the smaller the depth of field. Therefore more of the image will be out of focus than on a higher Aperture setting.

Therefore, the higher the f/stop, the smaller the aperture and the greater the depth of field. Meaning more of the image will be in focus.

Wow! Now I understand Aperture, how can i use it?

Typically, larger aperatures are used when you want the most of the image in focus, Landscape photography, HDR etc. A smaller aperature are more often used when a photographer only wants a viewer to focus on his chosen subject/focal point, macro photography is a prominent example.

The principles of aperture can also be applied with more creative photography and can produce some interesting and unique effects.

How do i change the aperture on my camera?

Before we move any further, please understand that aperture of course works with shutter speed, so for know i would suggest that whilst practicing this technique, that you shoot in Aperture Priority Mode, (Av). This allows you to set the aperture, and the camera will choose a suitable shutter speed. This feature is avaiable on pretty much every modern DSLR.

There are too many cameras on the market for me to list how to change the aperture on each. But the appropiate information will be available in your camera’s manual. I might later post a short snippet on how to change the aperture on a popular enthusiast camera. Such as the EOS 400D.

If you have found this tutorial useful, please share with your friends, fell welcome to link here from a forum etc. I will be releasing many moer tutorials and if your interested in learning more about photography subscribe to the RSS feed and be alerted whenever a new post is uploaded. To suscribe to the sites RSS feed, simply click the link in the side bar. I hope to see you again soon!

Comments are also appreciated as it proves to me that someone found the tutorial useful.

Not a bad day eh? Has anyone else got this lens? I’ve only played around with it in the garden so far. But it’s lookin pretty promising. I snapped some great macro shots from 10-20ft away.

Bascially it’s a graphics competition website. We’re companies in need of new layouts, logo, promotional designs hold competitions. Where anyone registered to the site can enter. The prize pots are usually quite large, $200+ for a logo etc.

In my opinion this is a great way to ‘wet your beak’ in the designing world as it where and find out how you stack up against other designers.

I haven’t joined the site yet but certianly intend on doing so tomorrow. I’m pretty busy tonight and it is 2:15am.

If anybody knows of any website similar, i’d love to find out about it. Leave a comment :D