Articles Typography

The Forgotten Basics of Website Typography

4.75/5 (4)

Building a website can take time with everything from user experience, user interface, marketing plans, etc. But one forgotten thing is website typography . It’s something so simple, yet effective.
The things typography can do are communicate through words and colors, change the meaning of a group of words, and achieve a greater amount of graphic design appeal. Typography can also alter a message even with the same words applied to it.

The Forgotten Basics of Website Typography

When it comes to creating user interface with words, some things are so easy to forget that it can make a difference in converting a website visitor into a future customer.

Here are some basics that you can keep in mind when it comes to creating your business website .


Typeface

One of the common misconceptions of typeface is the confusion between the words typeface and fonts. Typeface is a family of fonts and font is the style within those typefaces. An example of typeface is Helvetica. Within the Helvetica typeface is Regular, Bold, Black, Italic, etc.

Typeface will give you weights (italic, bold) to choose from without compromising the typeface itself. With italics, it will slant it but you could still tell it’s the typeface Helvetica.

Below are multiple typefaces, more than the average person let alone the average designer can think of.

The Forgotten Basics of Website Typography

Font

As a subset of typeface, fonts create and change in a creative way that lets the creativity of the designer shine through.

Fonts are distinguished by their weight, so it’s important that they keep their same anatomy without discrediting the typeface itself.

In an educational and professional text, it’s often asked to use the basic professional type fonts such a Times New Roman, Tahoma, or Georgia. In web design, it’s more flexible with the use of other creative types such as Rissa , Pacha , or Kust .


Typeface classifications

Those little stems attached on some letters make a difference in the typography of a website. As a standard rule, sans serif is best used for titles and headers while serif is good for paragraphs and bodies of text.

Serif : any of the short lines stemming from and at an angle to the upper and lower ends of the strokes of a letter

Sans serif : a letter or typeface with no serifs

The Forgotten Basics of Website Typography

Color

The lack of color might work for websites such as Craigslist, but color is one of the most important of typography. It invites visitors and can even affect how they buy .

Color choice should be well-rounded as well as learning about your common user. Balance is key when using multiple colors so the user doesn’t get lost in the look of your website. Most importantly, the user is there for your content however the look can deter the user away from your website as color is very strong.


Kerning

Kerning is the individual space between two individual characters. It can make or break a returning visit and even take away your credibility if no one can read any of the words.

Adjusting kerning can be tedious, but in the long run, it can bring great results especially when printing a web page.


Leading

Leading is the amount of space between lines of text. Like kerning, space is important in leading. In CSS, it’s called line-height.

Readability is the crucial part of leading. Lines of text can look cramped. A leading measure of 22pt can look more cramped than a leading of 28pt.

Consider your typeface also as some have smaller kerning and it will look overcrowded.

The Forgotten Basics of Website Typography

Line Height

On my very first website I ever created, my line height had more length than I needed. The words ran from edge to edge. Ask any web designer about their first website and they might tell you the same!

Line height makes a huge difference in making sure the reader reads your content and not skim it. The most important information is skipped over if it’s too long of a line or sentence to read. A common practice is 60-85 characters per line. It won’t matter how long your page is as long as the content is thoroughly read and the user leaves with something educational.


Whitespace

People look at the empty space on a website. Even though there’s nothing there, it’s still a needed space to give that person something to look at when they visit. They’re looking at your website as a whole and not just what is on the page.

A website visitor will see that white space and think if something is missing or not loaded yet. Making use of all space and not the middle part of the page is a common practice.

Fill your website up with useful content and not fluff. No matter your website, there’s a lot of information to fill whether it’s text, images, or advertising.


Weight

As a more creative aspect of typography, weight brings out text or a specific typeface font by bolding a word. Weights are used in the body, title, or images. It’s flexible in what it can do and provides a great deal of creativity to a web page.

Alignment

The four main alignments justified, left aligned, right-aligned, and centered. Text is usually read from left to right so left–aligned is the common and default alignment.

The rag, the ending of the right-hand side of a line of text, sometimes words are hyphenated and make a good balance between line length. Most of the time it’s not the same as letters and number of words are different on each line.

Centered alignment is common in titles or short lines of text. Some quoted words are commonly used as a center alignment.


In the end…

Many of the elements of web design typography are very flexible. You can start with some flexible website templates where you can add your special typography touch.

Related Posts:

Fonts to Add to Your Cursive Typography Collection

10 Typography Trends to Stick to in 2017

20 Unusual Fonts You Will Love Using (Free & Premium)

10 Top Font Apps For Typography Addicts or How to Get out of the Endless Fonts Maze


tm

Leave a Reply

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