Typography for Web Design

Typography

What is typography?

Typography is defined as the art and technique of arranging and presenting written language in an aesthetically pleasing manner. The primary objective of a website is to convey information in an easily accessible way. A great design can be ruined by the inappropriate presentation of content in it, such as, by using fonts that are illegible and unattractive. Every web designer should have a basic idea about typography and be able to recognise which font would present a website in the right way, and convey the right look and feel effectively.

What can the designer do?

There are certain typographic properties that is entirely upto the designer to select and use appropriately. The most important of such properties is the font family. Selection of which is how the font for the required page is chosen. And there is the font stack which is a collection of font families that you will be using for you precious website. Font stack is like your list of font families that you prefer to use.

Next comes font weight. Font weight refers to the relative thickness of a character’s strokes. Remember how we make the text light, regular, bold, and extra bold etc. in a text document. Similarly the font weight can be specified using stylesheets as well. The weight of a typeface is determined using the TrueType scale, which runs from 100 to 900. In this range 400 is what we see as regular weight, getting bolder as it goes higher and lighter as it goes lower.

Casing is another call that the designer usually takes. Casing refers to size of the letters. Uppercase would comprise of capital letters and lowercase would be smaller letters. Uppercase and lowercase letters go together to make these forms such as sentence case, title case, toggle case etc. These are essentially used to present the content in such a way that it is recognizable based on its intent.

Letter spacing is the space between consecutive letters. Manipulating the letter space can dictate the readability of the content on your website. Letter spacing can manage the trade off between readability and aesthetic attractiveness. Letter Spacing should be carefully managed to obtain the right look and feel for the content. Letter spacing is also known as tracking. Like letter spacing, another variable that determines the readability is word spacing. Word Spacing refers to the spacing between words.

Another important concept is Kerning. Kerning is the adjustment of the spacing between individual letter forms. Appropriate Kerning also contributes to readability.

Readability is also affected by line-height. Line-height refers to the vertical space between each individual line in the content. It should be a balance between cluttering text and the lines appearing too far apart.

Selecting a typeface

There are two kinds of typefaces to select from, serifs & sans-serifs. Serifs are the name given to those additional strokes that terminates a main stroke. San-serifs are such typefaces that are devoid of any such additional strokes.

Serif typefaces are said to provide fluidity and an easier reading experience. But the main disadvantage being their characteristic of tiring out the reader with too many elements. They are said to complicate the typeface at times.

Sans-serif fonts are much better suited for web development as they are easily readable with enough white space between individual letters in the type form. And their less complicated appearance has led to their constant increase in popularity as the typefaces suited for the web.

We have established ourselves as a provider of enterprise class solutions with the technical prowess gained in over 13 years of industry experience.With the help of our talented rails developer FromRailsCarma We started working on client projects based on Ruby on Rails Development right in the initial days of this technology and have, since grown into RoR experts along with its development.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>