logo type image

SEO: Insight

This is a fictional design for an article for a legal information website.

01

02

03

04

05

06

07

08

09

10

Insight banner image
One of the mockups of the Insight web article design

Designing Typography for the Web

I was asked to choose soe online content that was article length to use as a study in typography in an online contexts. The intent was to reformat the content and create a website design and branding to go with it and present it as a new online entity. At the time, the New England Patriots and Tom Brady were engulfed in Deflategate with the NFL Commissioner, Roger Goodell.

I chose a conversation a writer named Zach Abramowitz had online with a legal expert, Stephanie Stradley who was interested in the case and also familiar with similar cases in the NFL.

Insight article image
Insight article image

Typography For Copy

One major task in this was to choose a good typeface for the copy in the article. The tpye needed to be as readable as possible and not at all a strain to the eye as the article is longer than most copy on the internet. I chose Avenir Next Std as the typeface because it's open and easy to read on the web.

TLDR or "too long, didn't read" is a common term on the web for explaining when a page or piece of information is too type heavy to bother reading. On the internet, we are all very lazy readers and prefer not to do it at all if we can avoid it. So, the goal with an article is to present the type in as pleasing a way as possible.

Drop Caps

One technique I experimented with was to use drop caps at the beginning of each section. This is a technique for visually communicating the logical organization of the article into sections. The use of headers of course is also geared to provide this visual definition.

Another technique I used was to style the first letter of the paragraph in bold. It's a subtle styling and almost subconsious, but it does work to help the visual grouping of each paragraph.

Insight article image
Insight article image

Questions & Answers

My chosen content consisted of an introduction and a conversation. This presented the need to give visual cues in a question and answer format so the user could clearly see which voice was speaking.

I handled this in two ways: I first styled the questions in an italic version of the chosen font. Then I added a serif Glyph letter symbol of "Q" for questions and "A" for answers. These glyphs were given a very faded neutral grey color and set as an overlap background for the name of the person speaking.

Insight banner image