Website Design – Typography Tips

What is typography? Typography is the technique and art of arranging the type or printed characters as a way to make the language visible. It’s a very significant part of website design. Many webmasters think content is king. That is true, but if that content is not presented in a visually appealing manner, it’s a waste of the reader’s time and the webmaster’s efforts. In other words, typography reels in the reader’s attention to the document in addition to the images if present.

Here are some tips on how to improve the typography of your webpage.

Serif or Sans-serif Fonts?

Semi-structural fine details at the ends of some of the strokes which make up letters and symbols are called serifs. Those without these fine details are termed sans serif (from the French word which means without). There are studies done on which of the two are better on a webpage and the results are helpful. Some studies suggest that for offline and on print, it’s better to use serif fonts because they are more readable. For online purposes like webpages, serifs are more difficult to decipher and some studies concluded that san-serifs are cleaner and clearer.

For me, I think san-serif fonts are convincingly better for webpages than serif fonts. Corollary to this are variable-width fonts. They produce the same effect. This is due to the fact that variable-width font letters are placed close to each other and therefore appear more cohesive. On the contrary, fixed-width fonts, in which the letters have fixed spaces in between, appear awkward and rigid.


Among the three style attributes, bold is the most important. It also stands out the most. The main purpose of a bold style attribute is to attract immediate attention to important and significant parts of a webpage. Secondarily, it can also be used to quickly scan the page and get a gist of the material on hand. In addition, location of information is made easier if one uses bold style attribute


The primary purpose of italics is to emphasize a particular word or phrase while the reader is reader the text. It’s not used to draw attention. Phrases that are commonly in italics are metaphors, similes, foreign languages, book titles and other phrases of different contexts.


In a decent webpage, we seldom see underlining. Its main function is also to show emphasis while reading like italics. Additionally, it’s also employed when citing sources in a page. On a side note, underlining is also utilized to show grammatical errors like in MS Word.

The take home message here is that the use of the appropriate style attribute and font typeface (serif or sans-serif) is dependent on the primary purpose of the content of your webpage or site. Use them judiciously in conveying your message and your readers will stay and continue reading what you have to say.

Web Typography: These Tips Will Make Your Website Look More Professional

Spacing: Change the letter-, word- and line-spacing in your headlines. The bigger your font gets, the bigger the spaces between letters, words and lines. This is a problem, as it creates the illusion that your headlines are disjointed and that the letters are floating. To help unify your headlines, shorten the white spaces just enough so that the headline can be read clearly. In doing this, you are also adding weight to the headline, creating a contrast with the body of the text.

Font Sizing: Stop sizing your text with Px and PT. Pixels (Px) are a static measurement and cannot be adjusted by the reader to their preferred size. Points (PT), is comes from a print design background. Don’t use this on the web. Instead, start using EMs. Ems is a relative measurement, and a website’s typography set with Ems can adjust as the reader zooms in and out.

Leading: Add extra space between lines. By doing this, the body of your texts becomes less crammed, less overwhelming, and therefore easier to read. As a general rule, you can set line heights to 150% the size of your text.

Serif or Sans-Serif: Use serif font for headlines, and sans-serif for the body. Serifs, as we talked about before, have the tails, which help to guide your eyes along the letters and through the words. They also look elegant. Sans-serif fonts, like Helvetica, don’t have these accents. These appear more clear and modern. Serifs don’t look as clear in smaller fonts, as the detail is lacking, therefore the serif shows up a lot more in the headlines, and less so in the body. Sans-serifs are easier to read in small fonts because they are more simple. I have to admit that I sometimes break this rule, but hey, nothing is set in stone ☺.

Ellipsis: Use ellipsis instead of three periods. Three periods are too far apart to cause an interruption in the text. Use …, for the correct ellipsis symbol.

Typography Contrast: Use proper sizing for different typographical elements on the page. Often the default sizing styles in content management systems like WordPress, are too exaggerated. Yes, the main heading needs to be the largest, but there is no need to have extreme differences.

Number Of Fonts: Same as in print typography don’t use too many font styles. Maximum two will be fine – one font for headings and one for the body. Actually, using just one font family on the website can be very pleasing.

Paragraph Alignment: Never use justified text on web page. It will space-out the words awkwardly and it will make it much more difficult to read. Use only left alignment for main body. At times centered text might also work, depending on the overall design.

Visual Hierarchy: Create a strong visual order or hierarchy for readers to be able to navigate quickly and with ease. It gives them a visual guide to quickly find specific content they’re looking for. A good visual hierarchy will take into account the size, color and spacing as well as the use of white space on the webpage.

Typography Tips for Your Banner Stand Marketing

Creating a banner may be a hard task, specially in case you do not have a heritage in layout. Here are some hints to comply with to get you at the proper song to make certain that your cash is properly spent and your message is effective.

Emphasize with Scale

The not unusualplace phrase, “cross large or cross home”, isn’t always the satisfactory answer in layout. It surely has its place, however it’s miles critical to recall that the usage of one massive font for the whole lot can truely eliminate out of your universal message. By scaling, you could carry interest to the maximum critical part(s) of your message with larger/bolder fonts, whilst leaving the filler phrases or much less critical elements of it in a smaller/lighter font.

Go Easy at the Font Choices

While there are lots and lots of fonts to pick out from, odds are which you have a variety of favorites. As a ways as branding is going though, it’s miles satisfactory to pick out only some fonts to symbolize your emblem. A brilliant manner that will help you with that is to create a emblem fashion manual. Within the fashion manual you could designate which fonts have to be used and where. The concept is to now no longer use 20 exclusive fonts for your advertising pieces. 2-four fonts is a really perfect amount.


It might be secure to mention that the principle reason of a banner stand is to attract interest and benefit new business… proper!? Keeping that during mind, you usually need to make sure that human beings can examine your message. That being said, you furthermore may do not need human beings to must decipher the font or try and difficult to decide what it says due to the fact the reality is, they won’t. If they can not examine it immediately, they may flow on and by no means provide your message a 2nd thought.

Readability can frequently grow to be a trouble whilst the font that has been selected is wavy, curly or fancy in nature. While there isn’t always something incorrect with a font like this, you will need to be cautious with the software of it and make sure that your message isn’t always being compromised with the aid of using the selected font. A brilliant rule of thumb is to remember the x-peak of your font. A steady x-peak approach that every one of your letters (apart from ascenders and descenders) are the identical peak and is plenty simpler at the eyes making it without problems readable.

Quadruple Check for Typos

You’d by no means agree with what number of typos are observed at the maximum fundamental banner designs after they’re already printed. It is straightforward to get stuck up withinside the layout factors or your banner and to miss the real replica. Don’t neglect about to test, re-test after which test once more some greater times. Overlooking typos may be an exceedingly costly mistake.