AB Design
AB Design
I work with small and medium-sized companies worldwide. My services generally include full stack website design, SEO support, PageSpeed optimization and ongoing consultancy.
Typography is an important aspect of website design. It impacts heavily on the site's look and feel, and at times can help transform even the blandest website into something inspiring. The most basic considerations when choosing a typeface are whether you like the characters and how they render at different sizes. For a brief overview of typographical terms, click or tap any of the icons below.
Serifs
Kerning
Ligatures
Descenders
Serif typefaces differ from their sans-serif counterparts in that they feature small, decorative flourishes at the end of the strokes. These flourishes are called serifs and were traditionally thought to increase readability and reading speed.
On websites, especially at smaller sizes and for short passages of text, sans-serifs are usually a better option. Popular choices include Open Sans, Roboto and Helvetica.
Kerning is a typographic term that refers to spacing between two consecutive letters. The term is not the same as letter spacing (or tracking), which refers to spacing between letters throughout an entire word, sentence or paragraph.
The word above features two examples of kerning: the W "pulls back" the letter o that follows it, and the y occupies some of the space used by the letter a. The reduction in white space creates a uniform appearance that's easy on the eye and easy to read.
Some fonts are notorious for poor kerning and by default will display excessive white space between letter combinations such as Va, We, Wo and Te.
A typographic ligature is a special character that represents two letters joined together. Ligatures generally occur only in serifs, though Gill Sans and Futura (both sans-serif typefaces) include them as standard characters. The text below is displayed with Gill Sans and features two ligatures.
The letters f connect to form a single character, and the second f joins with the letter i to form a character without the dot. The result is interesting, though not necessarily more legible.
Descenders are the parts of letters that descend below the baseline. The word below is displayed with Gill Sans and includes three descenders. What I particularly like are the straight lines in the letters p and y, as well as the "goggles" shape of the letter g.
Font weights warrant consideration. With clever use and subtle variation, they can help delineate blocks of content, provide visual cues, and break up the monotony of long walls of text. Use the dropdown below the Hello World text to see how different weights affect presentation.
Hello World
Content strategy is a core part of web design. As well as assessing how to deliver content effectively to target audiences, a site-wide strategy might include social media drives to promote new products and services, or gap analyses to detect opportunities for fresh content that could rank well on Google.
Content strategy also involves deciding what type of media to use. For example, while clients sometimes request home page slideshows, usability studies have shown time and again that this sort of media isn't particularly effective. Most users tend not to sit around and watch slideshows. Generally speaking, media that's known to work best on websites includes:
Whatever type of network you're using to access the internet, it's essential that websites load quickly. To help web designers assess page loading speeds, Google has developed PageSpeed, a tool that monitors performance and gives technical advice on how load times can be improved. I use this tool to optimize my clients' websites and at times have achieved near 100% scores.
Responsive design describes the techniques that ensure websites can be viewed on desktops, laptops, tablets and smartphones. These devices all have different screen sizes, so websites need to adapt accordingly. All sites I make are responsive and tested thoroughly on all platforms.
Want to learn more? Get in touch.
Contact