Use the right font to transform your web design
This article covers different fonts, choosing the right font and how to implement it within your website.
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:
E.g. to use
Italic font style, the programming you must write is:
E.g. to use
italic font style, you must write:
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:
and
E.g. for
absolute size write:
each line. From a choice of , ,
E.g.
Uppercase:
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, , product or company onto the internet fast and
effectively.
About the author
Tags: comic sans ms, consistent design, courier new, cursive, fantasy, font choice, font families, font property, imagery, macintosh, macintosh font, macintosh machine, monospace, sans serif, syntax, web design, web page