Typography Layout and Website Design

May 3, 2020 By [email protected]_84 Off

Typography on the Web – Layout

More important than either appearance or style is the arrangement of text. On web pages, text needs to be short, concise and to the point.

Make every word count and don’t use passive language. Instead of “This link will take you to another one of my graphics pages” – use command verbs such as “Click here for more graphics” or simply “More Graphics”.

White Space

Break content into chunks of information separated by white space (i.e. blank spaces between text blocks and/or graphics). Use this white space to distinquish the different sections of your site.

Reading is more difficult onscreen; avoid long paragraphs. Don’t let your paragraphs, or any text, run the full width of the screen.

Use margins and/or tables to keep the width of text to within 10 to 15 words per line.

Internal Navigation Links

Links to other sections of your site should be visible on the opening screen – don’t make visitors scroll to find them. If you are offering a number of links to other sites, don’t just list them – group them under categories.

Stay consistent

Keep in mind that not all visitors will enter your site through the “front door” (your home page). They could access any page on your site directly. So, it’s important to have the following things on every page of your web site:

The site or company name – A link to the home/index page – Links to other sections of the site – Email address of contact person = Copyright information

Website Basic Checklist

1. Select your web site name and theme

2. Know what graphics and/or photos you’re going to use and have them ready

3. Know what information you are going to put on this site

4. Have determined the main sections and subsections and listed them in order of importance

5. Have a basic outline of your web site

You need to select the type of font you want to use and the colors you will use for the bulk of your text, links, and visited links.

Remember to consider your background color or image. Determine if it is going to make reading the text difficult and make changes if needed.

If you are going to use a specialty font for your title and/or section headings, create them as graphics.


The layout of your website’s typography can make or break your webpage design. It is the difference between a professional looking site and one that shows a lack of thought and planning. Spend as much time as needed to plan and execute your webpage typography layouts as this will pay dividends in the long run.