Use the right font to transform your web design

When designing your web page, it is important to understand how your fonts will affect the layout of your imagery and web design. It is amazing what the right font can do to your product. You can essentially affect the way readers interpret the information you are presenting just by the font you use.

You can break down these simple instructions and ensure you use the right font for you.

Most people have either a Windows or a MacIntosh machine at home, so when choosing a font, knowing the most common font families on both these systems will make life a lot easier for you, guaranteeing clear, consistent design.

If you examine both machines you will see that there are numerous common generic fonts of the same name on each, but these fonts can actually look different when you use them.

To counteract this problem we recommend you include both a Windows and a MacIntosh font choice in your font listings. This way you will not be surprised by how your page looks in various situations and you will receive the best possible results from your site.

A few common examples are:

• Arial = Sans Serif
• Comic Sans MS= Cursive
• Courier New = Monospace
• Impact= Fantasy 

Changing your text to your favourite font will definitely make your webpage look great on your browser, but if your readers don’t have the same font as you, their computers will adapt to the nearest option in the generic family. When compiling your list of fonts, include a standard font near the end of your list and a generic font as your last choice. By including these in your list, you can have your favourite fonts, but also know that if a reader does not have the same font as you, your web design will still look good on their browsers.

When choosing your font, it is also important to bear the syntax of the font property in mind. Using CSS, you can experiment with all their great features which are easy to use and will allow you to add additional designs to your page.

The font property is a shorthand property used to set the following styles of fonts: font-style, font-variant, font-weight, font-size, line height and font family. Of all these options the font-family and font-size are the minimum styles required for this style of property.

To make font property work on most browsers, it needs to be written in the correct order, for example: font: 1em “Times New Roman”, Times, Serif;, but there are also other factors to consider, such as line height, bolding, small capitals, italics which can be easily added to the previous programming by making a few alterations to the ordering:

Line Height: to add line height, place it after the font size preceded by a slash

Font: 1em/1.5em “Times New Roman”, Times, Serif:

Font Bold: font: bold 1em/1.5em “Times New Roman”, Times, Serif: 

Small Caps: font: small-caps bold 1em/1.5em “Times New Roman”, Times, Serif;

Italic: font: italic small-caps bold 1em/1.5em “Times New Roman”, Times, Serif;

By using these basic instructions you are half way to guaranteeing that your web design is viewed the way you want it to be seen. But if you are interested in using your font style to increase the success of your graphic design, by also introducing font-style and font-variant, they can really make a difference to your page: 

1. The font-style - defines whether the font is italic, oblique or normal

E.g. to use Italic font style, the programming you must write is:

1. The font-variant – defines whether the font is normal or small-caps

E.g. to use italic font style, you must write:

1. Font weight – defines how light or dark the font displays on your webpage. You can choose from normal, bold, bolder, lighter, 100, 200 to 900 and lastly inherit

E.g. normal corresponds to 400 weight

       Bold corresponds to 700 weight

So if you want a bold font weight, you must write:

1. Font Size – ranges from , , and

E.g. for absolute size write:

1. Line-height- sometimes described as ‘leading’, line-height defines the height of each line. From a choice of , ,

E.g. Uppercase:

1. Font-family- defines the font family that the text should be displayed in and follows one simple formula [family-name| generic family-name]

E.g. 

These 6 basic tips can make the difference between your readers making a purchase to viewing another site. All you need to do to make them work to your advantage is simply change the phrasing on the part of the programming and your web design will successfully be received by most computers.

For more complicated professional designs, web design firms such as Soula.com can help you translate your ideas, product or company onto the internet fast and effectively.