There are quite a few terms thrown around with regards to typography. Hopefully this article will help you understand more about the world of typography. If this is your first true introduction to typography you probably underestimate the effect it has on the world.

What Is Typography

Typography is the process of designing, arranging and modifying type. Arranging type involves a number of techniques:changing point size, width, leading, letter-spacing and kerning. Don’t worry if you do not know what these terms are, we will cover them shortly.

The study of typography involves understanding readability and legibility.  A lot of thought goes into choosing the correct techniques to apply to type as it has an effect on the reader. When you are driving down the highway and notice the road signs are all the same font, that’s for a reason.

What Are Typefaces?

Typefaces are a created set of characters of a single size and style. Examples of well known typefaces include: Arial, Helvetica, Verdana, Times New Roman, etc. If you have ever written a paper for school/work you have probably used one of these.

What Are Fonts?

Fonts are specific styles and sizes of a typeface. For example, Arial is a typeface, while a font would be Arial Black 18pts, a specific styling of that type.

What does Sans-Serif and Serif mean?

Serif is a type of typeface that includes serifs. Serifs are the little endings on the end of a letter stroke. If you look at the character below you will notice that there are details at the end, those serifs are what define a serif font. Serif typefaces are primarily used for body text especially in print material as it is considered easier to read. Furthermore, Serif is deemed as a more professional font then San-Serif fonts.

Sans-Serif are typefaces which do not have serifs. These are used more often for headlines, headings and small sections of text. Serifs are considered to be easier to read on computer screens

Typography Terms

Point Size/Height

The point size of a letter is its height. One point equals 1/72 of an inch, therefore size 72 letter is one inch high.  There are twelve points in one pica, another type of measurement; type can also be measured in pixels.

Abbreviations

72 points = 72pts

72 pica = 72p

Width

Width is the set horizontal size of a letter. Some fonts are narrow, while others are wide. Wide fonts are usually called heavy.

Letter-Spacing

Letter-spacing refers to the amount of space between the characters in a word. Increasing or decreasing the letter-spacing can be used to improve legibility by making characters easier to identify.

Kerning

Kerning is often confused with letter-spacing. Kerning is the technique of aligning characters together so they are visually even. A well kerned set of characters has equal horizontal space between characters.

This is just an intro to typography, we will be writing more articles about typography in the future. In the meantime you can check out these other resources for more information.

Further Readings

Thinking With Type - Ellen Lupton

I Love Typography

MyFonts.com

Basic Design Principles - Part One

Information on basic design principles, part one of a series of articles providing useful design information. This article covers hierarchy, balance, contrast and proximity.

Hierarchy

Depending on what you want your reader to view first will depend on the hierarchy you have set up. By changing the position of an item on the page, its size or color you can improve your hierarchy.

Hierarchy is a valuable to guide your readers or viewers through your design. Remember to keep in mind what you want your viewers to see first. Without hierarchy your viewers might find it hard to locate important or useful information.

Balance

There are two types of balance: symmetrical balance and asymmetrical balance. Symmetrical balance is achieved through creating equal amount of objects/elements on either side of an ‘imaginary line’ separating the  page. Asymmetrical balance is achieved by balance through different techniques.

For example pretend you are weighing your page on a scale. Different elements will weigh different weights based on their size, and content. As you can see below although there is a lot of text on one side by placing a design element  of equal weight on the other side you can balance the design.

Contrast

Contrast goes beyond differences in color, it can be applied to size, texture, type and more. By providing contrast you can add interest to your design. Increasing contrast can improve readability by making type stand out.

Proximity/Clustering

Individual design elements that are grouped together are perceived as a group. By increasing the proximity of similar objects in your page you can help your viewers locate similar information.

I would love to see how you have applied this techniques to your designs. Leave a comment and share you work with others!

Woothemes has released a new premium wordpress theme called Papercut. The new theme is a great addition to a list of high quality themes.

Papercut is a grungy news theme with beautiful alternating stylesheets, built-in widgets, and layout control via a hand crafted theme options page. It’s the perfect out-of-the-box solution to give your website a stylish new look.

The theme is attractive and easy on the eyes. The colors and grungy watercolor effect makes a warm background and contrasts easily to the content text color, making it easy to read.

The theme uses a three column layout on the front page to show more content and a two column layout for the rest of the site.

The sidebar stands out well and is easy to access. It is quite spreadout so sometimes what you are looking for is further down the page then you would like, which makes it important to prioritize your widgets.

The navigation is attractive and unique, the sub category navigation is easier to read then the primary navigation.

The theme is also available in other colour schemes including: wood, floral, red print, and newspaper.

Woothemes is well known for their Fresh News theme which is used for many sites for its great layout and ability to style into however design you might require.

There are lots of ways to improve your site’s web design but sometimes you need help thinking of new ideas. So we have collected a list of creative techniques to help you come up with ideas for your designs.

This will be part one of a series we hope to be writing on simple ways to improve your sites design. If you have any techniques that you like to use or find attractive leave us a comment.

We also plan on offering tutorials on how to do some of these techniques so if you want to know how to do something, leave us a comment!

NAVIGATION

Rather then a traditional horizontal or vertical link setup, try something like a map. This is creative and a great way for your viewers to enjoy your sites navigation. There are a lot of ways to make your navigation different, such as instead of ordinary tabs, try styling them in unique ways such as the tabs on a folder.

BACKGROUND

Grunge in design is a great way to add character to flat colors. Using grunge can add a subtle texture that makes your backgrounds and images stand out.

Find Brushes

There is a fine line between being too simple and being cluttered. Using patterns in your designs correctly can be the perfect addition to your site. Try patterns that you don’t usually see to really stand out.

Find Patterns

Wood is a popular design trend of recent years and is gaining popularity for its ability to blend well with many designs. A subtle use of a wood element is a great idea to fill in a space that could use some life.

Find Wood & Similar Textures

Another trend that is starting to pickup is watercolors. Web designs are evolving further into pieces of art with trends like watercolor. A great way to add texture to your background.

Find Watercolor Brushes

Notebook-like paper lines are great elements for designs that are writing related.

Find Notebook Paper

Adding items like coffee cups, books, pens and other items that you might find on your table are good ways to add personality to your designs,

Find Desk Items

SMALL ADDITIONS

A paperclip is a great way to make a part of your design more realistic; tied together with the notebook paper lines can make realistic looking paper. Nails, tacks, pins etc. could be other objects to use. Tape is another small way to add something to your design.

Find Paper Clips

Post-It Notes are simple ways to style a small sections of your site. If you have a twitter update section using a post it note background could be a way to make the updates stand out.

OTHER

Stitching is another cool technique one can use in their designs to create borders or shapes.

Adding a background to your text can help it stand out. This technique is also effective when you have a background that might make it hard for your readers to see the text.

An interesting addition that I have always found unique is the use of elements such as doors, windows etc. to frame items of your site.

Are there places that you know of to find great resources for your website? Leave us a comment and help others.

Have any other ideas? Give us your and you’ll be credited for them, just leave a comment below the post.

I have collected a list of 32 great movie posters that you might find useful for design inspiration. A good poster does not necessarily make a good movie, nor does a good movie make a good posters. We don’t necessarily like these movies but we do like their posters.

1. Sex Drive

The symbolism is clear and effective. The red colour of title and speedometer needle contrasts with the white background which makes it stand out.

2. The Midnight Meat Train

The Midnight Meat Train has great colour and tone. The blurring of the image allows the title to stand out and still manages to create an effective mood.

3. Wall-E

This Wall-E poster is a great example of the use of the rule of thirds method in which an image is broken into 9 section which supposedly creates tension, energy and interest. You can clearly see this technique being used. This is an important design technique and is worth learning more about.

4. 28 Weeks Later

The red background makes the eyes of the women stand out extremely well, focus is also drawn to them and ask the questions, why focus on her eyes? and what is she looking at?

5. Little Miss Sunshine

This simple poster effectively uses a vibrant color to attract attention. The typography is simple but stands out well.

6. Poseidon

The colors and tone of this image is very effective in drawing interest. Although the title is upside down it is still easy to read because of its simple and bold lettering.

7. State of the Union

The symmetry of this poster is what interested me; symmetry can be an effective design technique because in our minds we view symmetry as beautiful and balanced.

8. King Kong

This poster does not even need a title because it uses a character we are all familiar with. This poster also uses framing to cut out what we don’t need to see.

9. Band of Brothers

The two parts of this poster I like are the background image and the typography. The top is unique because it is much like a silhouette of the soldiers, the background color and harsh clouds helps display the tone of the image. The typography is interesting because it is spaced to fit equal distances between the edge of the poster and the text.

10. Saving Private Ryan

A similar poster to the band of brothers also uses the silhouette effect. The four faces blend effectively into the clouds. The typography uses all lower cases and separates the words “saving” and “private ryan” by bolding one and narrowing the other.

11. Scarface

The background is whats interesting in this poster, as the two colors fuse together through Al Pacino’s image making his expression, gun and closed fist stand out.

12. Fear And Loathing In Las Vegas

This poster is just wacky, it is an example of how experimentation can turn out great results.

13. Walk The Line

Vector Art stands out quite well as it increases the simplicity of the colors, making each layer stand out more.

14. American History X

Another simple black and white image chooses what it wants to display and stand out. When you use black on white the black images stand out because of the strong contrast.

15. Vacancy

This is personally one of my favorites, the tone is extremely strong from the multiple dark textures which also allow the creatively placed title to stand out. A tip here is to think of creative ways to display your content.

16. The Spirit

The textures and colors give this image a gritty dark feeling.

17. V For Vendetta

This retro inspired poster was not afraid to take elements from old wartime propaganda images.

18. The Invisible

This poster uses a creative way to display something which ordinarily would be… invisible. The rain also helps seperate the dark outline from what would be a dark night.

19. Underworld

The poster uses backlighting to make the character stand out. This is an effective technique, use a dark background but behind text or an image try putting a lighter color or glow behind it.

20. The Dark Knight

The blurred image in the background helps to make the title stand out.

21. The Matrix Reloaded

This is an incredibly simple poster but is a perfect example of simplicity and black on white. The posters character stands out incredibly clear against the complete white background.

22. Shaun Of The Dead

This poster is extremely creative. The typography is unique as it uses a zombies reaching arm to create the letter A. The doors are unique framing tools. I really like designs who use images such as doors or windows to frame objects. The faces of the zombies are all saturated while the main character is coloured and holding a vibrant yellow bouqeut, which heavily contrasts the depressing faces of the zombies. The slogan is also perfect as it explains exactly what is going on.

When your viewing this poster ask yourself, “would this image be the same without the color placed on the main character?” Simply adding the color turns the movie from a zombie movie into a romantic comedy.

23. Day Watch

This image is a great example of focal point. The funneling crows helps draw the focus down the image into the center, which is conveniently where the title is.

24. Casino Royale

The use of shadows and different focuses helps to make specific images of this poster stand out.

25. Batman Begins

The bright sun behind Batman helps draw your attention to the character, while the white title also stands out prominately against the black.

26. King Arthur

If you do not know the controversy behind this poster you should probably look it up. But that aside this poster is different, rather then using a simple background to allow the title to be easily seen, the poster uses a somewhat cluttered background which blends together allowing the title to be seen prominently.

27. The Nightmare Before Christmas

Yet another silhouette effect, this may be one of the best examples of how using contrasting colors can draw attention to wherever you would like.

28. Sideways

The rule of thirds and the use of hand drawn images is a refreshing change from the movie shots traditionally used. The one thing I do not like about this poster is how dark the title is.

29. Big Fish

The warm use of colors, large title text, silhouette and unique display of lettering summarizes many techniques that can be found in interesting designs.

30. Pirates of the Carribean

The use of a well known symbol in a creative way is a great way to stand out and drawn in attention.

31. Secret Window

This is a moody image, it uses framing effectively to inspire curiosity into what is outside the frame. It also uses the title of the movie effectively by creating a eerie mood and having the shadow of a window frame on the face of the character.

I hope that you find this list useful.

I would also like to hear where you get your inspiration from so if you have something in particular leave a comment!

Download our new free wordpress theme, Old News. This hopes to be one of many free unique wordpress themes that we will be offering on our site.

Old News Wordpress Theme

View Demo | Click to view a working demo of the theme

The design is simple 3 column layout with inspirations from scrap paper. This theme would be perfect for someone looking to make a simple and easy to read blog.

Old News Wordpress Theme

The theme is widgetized and ready to use right away.

Sharing

If you like our theme and would like to share it with others just send them this link : http://observin.com/2008/07/free-theme-old-news

*Note - You do not have permission to upload and distribute this design without our permission.

Download The Theme

Download Theme

We hope that you enjoy our theme.

When you are offering a service online you need to think of how you are going to offer it and at what price. But before you decide on a price you should decide how you are going to benefit from offering your service.

There are variety of different users on the internet and have many different needs. How you fill these needs will determine your success.

There are three basic ways that you can offer and service and earn money from your hard work.

1. Free Content

Internet users greatly prefer getting their content free, well who wouldn’t right?

Well the problem is how are you going to earn money from offering content for free? What you can do is offer your content for free, which will increase the readers and visitors to your site then you need to monetize your website by placing relevant ads for your readers to click. You can earn quite a good income from clicks alone. There is an infinite source of information on the internet about ads so we won’t go into that.

You could also use referral links or sell ad space on your site.

2. Paid Content

Paid content can be a huge earner if you have the right product or service. With paid content it can be much harder to earn an income because there is so much competition. There will always be people willing to pay for getting a better service.

If you can provide a unique/better service or product then this could definitely be the option for you.

3. Free and Paid Content

I prefer this option because it can really provide you with various options. If your paid content is not doing so well then you have the revenue from the ads to make up. If you are a wordpress theme site you could offer free content such as lesser quality wordpress themes and possibly turn the viewers that were looking for a free option into customers buying your premium paid content.

If you have had to make one these choices and would like to share your experiences we would love to hear from you in the comment section.

In this article we have gathered a list of some excellent free earthy wordpress themes. We defined earthy as either using earth colored tones (greens, browns etc.) or earth related elements the theme.

Earthy designs are relaxing and easy on the eyes - which is always important for your readers. These themes would be useful for a variety of different blogs such as hikers, photographers, environmental sites, etc.

There continues to be an improvement in the free templates available for wordpress. We have found some great wordpress themes that we have not seen on other lists.

*As always we encourage you to submit themes in the comment section that you think should be added.

Outdoorsy

Free earth wordpress theme from wpdesigner

Peaceful Rush

A free earthy wordpress theme from template monster

Tropical Grunge

A free earthy wordpress theme

Livegreen

Free Wordpress Earthy Theme

Everlasting Bloom

Free Earthy Wordpress Theme

Japanese Flower

A free earthy wordpress theme

Peace on Earth

Free brown wordpress theme

Chronicles

Free Earthy wordpress theme

The Hobbit

A website theme is the overall look of a website. An example is if you were creating a website for a gaming community you might use elements from specific games to make your website more creative and unique.

The benefits of creating a theme for your website is that it allows you to seperate your website from the competition and create a lasting impression on your users. A theme also helps to inspire creativity as you can style ordinary elements such as buttons or a sidebar with elements that are inspired from your theme.

There are so many websites on the internet, how are you going to make yourself unique?

As we have already discussed, creating a theme can help individualize your site from its competitors. Creating a theme that is relevant to your topic can make your site much more unique. Using textures, elements and images can improve your websites overall look.

Deciding On A Theme

What your website theme is going to be will depend on what type of website you are creating. For our purposes we will pretend we are making a web design site. One benefit of this genre is that there are a million directions that you can go.

When you have so many directions to go with there are two general choices you can make: Make a completely unique theme or make a theme that relates to your website name. If your website was called Pirate Designs you could make a theme using elements related to pirates.

Designing With Your Theme

Alright so lets pretend our web design site is called Pirate Designs, how are we going to design our website? First lets think of what comes to mind when we think of pirates. When I think of pirates I think ships, swords, cross bones, guns, gold and treasure.

We could use wood for the background, a treasure chest pieces to build a sidebar, cross bones for a logo. For colors its best to use colors that work well together, using different shades of brown from dark brown to a light tan would work well for a pirate inspired theme.

Other elements that you can style are things such as list bullets which could be gold bullion’s, input boxes could have a gold border etc.

You can see that once you decide on a theme and start designing it, it gets easier to think of creative ways to style your site. If your stuck on your theme search on a image site using the keywords related to your theme to get inspired.

Finding & Making Your Theme Elements

You can find some great free patterns and textures from these sites:

Squidfingers

DinPattern

Shizoo

For images you can check out:

Flickr

stock.xchng

I hope that you found this post interesting and useful.

We would love to compile a list of website that use unique and creative themes for their websites so if you have one leave us a link in the comments below and maybe your site will be featured.

We just launched our new site which you can obviously see is quite barren. We are working on a few things such as articles, tutorials, free wordpress themes etc. So there will be lots to look forward to.

What is Observin

Observin is a web design blog with articles, tutorials, resources and themes. We will be discussing a variety of topics in the blog which we hope will be beneficial to our readers.

We also hope to be offering web and graphic design services shortly.

You can keep track of us through our feed : http://feeds.feedburner.com/observin.