What is typography?
Typography is the art of arranging letters, words and paragraphs, and how they interact with each other in order to make them more readable, or more visually appealing. Good typography is just as important on a Web page as it is in the other mediums and it should be easy to read and pleasant as in every magazine or newspaper. Sometimes typographic style and its accompanying attention to detail have been overlooked by website designers, forgetting that 95% of web design is actually typography and the fonts you use are important as they will affect your website’s overall visual impact so it’s important for every designer and developer to know the basics of typography.
The basics of typography
There are few most important things that every designer should know. Here is a short list of the basic terms used in typography:
- Weight is actually the boldness or lightness of certain font. Usually two font weights: normal and bold are used.
- Leading is the height of the spacing between any two lines in a section. The best amount of leading is usually half the height of the font’s size. Or if the font size is 12px then the leading should be 6px.
- Line Height is the height of a line including the leading added. So in the previous example, if using a font size of 12px and consequently 6px of leading that makes a line-height of 18px.
- Letter Spacing also called tracking, refers to the amount of space between a group of letters to affect density in a line or block of text i.e. is the default width of space between any given set of characters.
- Kerning should not be confused with letter spacing. Letter-spacing refers to the overall spacing of a word or block of text affecting its overall density and texture. Kerning is a term applied specifically to the adjustment of spacing of two particular characters to correct visually uneven spacing.
- Word Spacing is the width of the space between two given words.
- Rendering is the way every browser, application, and operating system interprets type. Usually every browser will render type differently.
- Baseline is the line upon which the text rests.
- Ascender & Descender are any lowercase letters that rises above or drops below the baseline.
The Tips
Now let’s take a look at few Web Typography tips that can make your web page or blog better looking:
1. Size
Don’t set body text below 10 or 12px and, if possible, make it bigger. Remember, what’s legible on your monitor, might not be so on a 15 inch MacBook. If any doubt, make it bigger. Also reading on a computer screen is more tiring than reading on paper, what you see on the screen is not as clear as black print on white paper.
2. Space
Make your type comfortably spaced. Leave enough blank spaces in your pages especially in content-heavy layouts, where spacing considerably contributes to the readability of content. By leaving enough white space you help the reader to offset large amounts of text and his eyes to flow more smoothly through the text as well as providing a good separation between elements in the layout. A good rule of thumb is line-spacing that’s at least 140% of your text size.
3. Contrast
Contrast is huge factor if your text will be easy to read. Cool looking text on a colored background, might seem like a good idea, but it makes reading the body text a lot slower and even painful. Text is primarily to be read and the contrasts should make it easy on the eyes and easy to scan quickly so make sure that it contrasts enough with the background . Avoid long stretches of reversed out text i.e. light text on a dark background which cause that effect of light lines in front of your eyes minutes after you turn your look off the screen. Black on white is still the standard contrast colors and for a good reason so stick to it.
4. Headers
Headers are the first element in typography that the user notices. Their size is equally important as the size of the body text. Don’t use too big headers that can cause users to lose their spot and ruin the flow of the content. Don’t use small headers too, because they will ruin the hierarchy of the article and will not draw the user’s attention as it should. It’s important to find the balance and provide enough space between the header and body text.
5. Be consistent
Consistency is also very important for usability and readability. When you choose a header size, color and font, it should be the same size, color and font for all the headers of the same importance. For example All <h1> and <h2> headers in an article should look identical.
