Open navigation

A web designer’s guide to

Typography-First

Step 1: Typecasting Learning to read. Again. Reader segment analysis Creating reader personas Font identification

When we visit a new website or blog, not only does the page have to load in 2 seconds flat (according to Kissmetrics), but the design and the content have to work seamlessly together to answer one overriding question: Is this really worth reading?

And the clock is ticking. If the font looks cheap or too many pop up distractions get in the way of what might be great, problem-solving content, that great problem-solving content will go unread.

Which is a major problem for your client and for you as a web designer because fundamentally it is your job to get your client’s great problem-solving content read. So you have to do two things:

  1. Know your client’s content inside-out
  2. And know what your client’s readership consider to be a read worthy of their precious time

In this step, we’ll cover both.

The 10 Steps & Guide Content ↓

Using a Typography-First approach to website design adds many more exciting options to be creative, not less.Stephen Shaw · via @anartfulscience

Learning to read. Again.

 Web designers don’t read, right? We’re artists. We went to art school. The pop art comic strips on our walls aren’t meant to be a joke.

But unfortunately our clients – whether they sell blueberry muffins, swimming goggles or blue-chip HR consulting – are artists too. Actually, they are writers.

They might want a snazzy logo and savvy graphics to help them stand out but it is their sales pitches and brand stories that will engage their customers – readers – and sell more muffins, goggles, and engagement surveys, not the design. Not alone. This is lesson número uno. So we’ll make it tweetable:

Web designers have to think of their clients as writers and their client’s customers as readers. via @anartfulscience

Read everything your client writes.

If you’re going to read one book on typography, beg buy or borrow a copy of Robert Bringhurst’s The Elements of Typographic Style. In it, he starts by urging you – as a designer – to read everything your client writes. And we mean everything:

  1. The homepage and sales pages
  2. The brand story in the company section
  3. The minutiae of product descriptions
  4. Brochures, ebooks, white-papers and flyers
  5. Blog posts and tweets

Even if it sucks, make a brew and stay the course. Here’s why:

As a web designer, your design won’t sell anything if you haven’t read what your design is selling – and ultimately it is the words that sell stuff, not only the design. via @anartfulscience

Use your designer eye to spot creative opportunities.

As you’re reading the content, look for typographical opportunities:

  • Does the sales content use stats or references or quotes or tabular data? If so, think how you could highlight them.
  • Can you leverage the provenance of the brand for historical context, cultural or local identity?
  • Does your client churn out long-form blog posts? If so, consider how side-notes, numbering systems, symbols, fig captions, subheads and drop-caps might enhance the read.
  • Is their brand story a rags-to-riches drama or an environmental horror story? If so, which group of typefaces might bring that story to life?
Poetica Ampersands

Even correctly referencing footnotes, using correct smart quotes or alternative ampersands, are all important. As type designer Erik ‘The Typomaniac’ Spiekermann sagely puts it in Typographic Design in the Digital Domain:

Typographic Design in the Digital Domain with Erik Spiekermann & Elliot Jay Stocks
A typographic designer starts by looking at the copy - so what is your smallest element? The copy? Maybe even the footnotes? - and then you go up from there, whereas the graphic designer has an image in his or her head […] and will make that page look that way, whatever it takes.Erik Spiekermann · via @espiekermann

To illustrate what Erik means – with some quick code wins you can use right now - let’s look at two small elements that designers can focus on and emphasise to great effect: drop caps and ampersands.

Entities, clips & code

How not to drop the ball with your drop caps ↓

 Examples of drop caps have been discovered as far back as the 4th Century. And used to visually and creatively mark a new section in the text you’ve got to work with they are still great ways to ensure your client’s “readers” find their place in the copy.

The problem is that due to browser incompatibilities aligning drop caps in CSS can be tiresome. Fortunately the initial-letter property currently being reviewed by the W3C & Adobe have both developed solutions that are straightforward to implement.

  1. Download and link to Dropcap.js within your page followed by this script:
  2. 
        var dropcaps = document.querySelectorAll(".dropcap"); // Set to 3
        window.Dropcap.layout(dropcaps, 3);
  3. Add the .dropcap class to the initial letter.
  4. <span class="dropcap">E</span>xample Drop cap

How to use alternative ampersands ↓

The ampersand is a mark that represents and or et in Latin and is a great design detail to use and discovering a font (see also ) for your client with a creatively appealing ampersand is like unearthing a rare creative gem.

Ampersands

Some of my favourite ampersands:

  • 1. Poetica. Regular
  • 2. Palatino. Bold Italic
  • 3. Adobe Garamond Pro. Italic
  • 4. Trajan Pro. Regular
  • 5. Charlotte Sans Book. Italic
  • 6. Superclarendon. Italic
  • 7. Adagio Serif. Italic
  • 8. Adobe Caslon Pro. Italic
  • 9. Argent CF. Demi Bold Italic
  • 10. Charlotte Sans Book. Italic

Using an alternative ampersand

The below script automatically finds any &amp; and adds a class which you can use to display an alternative ampersand font.

  1. Include jQuery and then add the following script to your page:
  2. jQuery(function($) {
        $('h1,h2,h3').each(function() {
            $(this).html(
                $(this).html()
                    .replace(/&amp;/g,'<span class="amp">&amp;</span>')
                    .replace(/\s([^\s>]{0,10})\s*$/,'&nbsp;$1')
            );
        });
    });

    ¶ Depending on your chosen ampersand font-face you may need to update the HTML entity within the span class. The above example targets the h1, h2 & h3 tags.

    Output

    <span class="amp">&amp;</span>
  3. Embed your font-face or use a service like Adobe Type-kit and apply the font to the .amp class.

Okay, so you’ve got some quick technical wins under your belt. Now you need to match up this deep nitty-gritty understanding of your client’s content with a deeper warts-and-all understanding of who their readers are.

So let’s show you how to do that – using you as an example. We’ll start by showing you the tools we used to find out who you are and what you’re looking for (how to conduct reader segment analysis).

Then we’ll show you how we went further to use first-hand knowledge of your reading tastes and habits to help us create and structure content we knew you’d like – before we even started to write or design it (how to create reader persons).

How to conduct reader segment analysis

 Creating reader segments & reader personas is an invaluable way of narrowing in on the kind of fonts and layouts that you know they already like. Of course, your client should be able to tell you a lot of demographic detail about their archetypal super readers. But if they can’t, you’ve got access to a load of great tools and options.

Here are several we used — in the nicest possible way — to ‘segment’ you. Note that with all of these tools you will often need to get permission from your client to look at their marketing data or log in to their accounts. Make sure that they know what you’re doing and why.

Get out the treasure map

Web designers are everywhere. But we wanted to get a closer look at where the majority came from and the language preferences we might have to cater for with the content we were creating.

LanguageLocation
en-us50.67%London21.89%
en-gb28.59%Manchester19.03%
es2.04%New York12.66%
c1.89%Lynchburg4.09%
de0.76%Bletchley1.66%

Get interested in marketing

Obviously web designers are interested in learning how to do better design, because there is a financial incentive for doing so. And this guide is all about how to help web designers use a typography-first approach to design better sites – and in doing so get better clients. That’s what we are ‘selling’.


Get on the couch

You might not think that knowing the lifestyle preferences of your client’s target readers would help too much, but you might be wrong. Lifestyle preferences can help bring your target audience to life and start to give you an idea of the kind of look and feel your future design could focus on.


Get some wings

If your current client doesn’t have a Twitter account, you can skip this. But most of your clients will be on Twitter, so it is always worth exploring these analytics tools. In our research – into you – we used three great tools:

Twitter Audience Insights

Twitter’s Audience Insights tool helps you to review accounts demographics. You’ll want to focus on the “Audiences” tab.

Followerwonk

We also used Followerwonk. Followerwonk provides some of the best Twitter analytics out there and you can use it to analyse any account’s followers/followed to see a gold mine of profiling data.

Tweetchup

Tweetchup provides benchmarking reports and pretty much all the information you need to analyse your client’s Twitter account. Simply enter their Twitter screen name to analyse the account.


Get into list building

Again starting with Twitter data, we paid particular interest to the interests of our followers to see if the content we might offer actually would appeal to them - never generate any content that people don’t already want!

Quantcast

Quantcast

You can also use Quantcast here. Quantcast is a free audience demographics measurement tool & gives great insights into your client’s readers. When you or your client “get Quantified,” you’ll receive audience information including demographic, geographic, affinities and stats.

  1. To get Quantified sign up for a Quantcast account.
  2. Place the Quantcast tag just before the </body> tag.
  3. Once verified you’ll be able to view demographic reports

Get reading biographies

Do this to get both single keyword info and two-word phrases. Again, this was useful for a number of reasons for us, including SEO, so if your design work encompasses SEO services then you might find this step invaluable.

Bio word cloudTwo word bio cloud
designweb design
websocial media
marketingdigital marketing
digitalgraphic design
designerweb developer

Get on LinkedIn

Leaving Twitter, we hopped over to LinkedIn to analyse who was following our company page. Again, your client might not have a LinkedIn company page, but if they do you can extract some great insights into the professional background of the people interested in your client’s content and niche here.

SeniorityFunctionCompany Size
Entry34.6%Design20%1-1043.8%
Senior33.3%Internet16%11-5020.5%
Partner15.4%Graphics15%51-20013.7%
Manager6.4%Marketing8%Self-employed12.3%
Director6.4%E-Learning7%1001+5.5%

Get into the gender divide

Last but not least, we asked Google analytics some obvious questions:

  1. Are you male or female?
  2. How old are you?
  3. What’s your education level?
  4. What do you earn?

You can do this in various ways. Most people are used to using Alexa to get information on gender, education, and browsing locations for example.

Note that for us, even though this research told us that most of our visitors were male, we knew that the guide we were looking to create would be gender-neutral. We include this data here to show you what information is available and how to find it if you need it.

AgeGenderIncome
25-3441.45%Male80.90%£0-30k40%
35-4441.37%Female19.10%£30-50k30%
18-2410.35%£50-70k14%
45-545.46%£70k+16%

Bringing it altogether

All this might seem nosey-parkerish – and it is – and like we say your client might be able to tell you a lot of this straight off the bat. At the same time, you probably use some of these tools yourself, so applying them to your clients should be easy.

The point is that you are creating a picture of a real customer. Someone who lives in a certain place, likes certain things and is looking for the real solutions to real problems that your client’s content is selling.

For us, the result was pretty much as we expected (you’ll get the full bio at the end). But as you might expect that wasn’t enough for us to start writing and designing this guide. And this is important, so we’ll make it tweet number 3:

Knowing who your client’s readers are and where they live and what they do for a living isn’t enough. You need to know the kind of content – even the fonts – they like to read, share, and link to. via @anartfulscience

And to do this you need to look hard at your client’s super readers.

* Reports taken from top 5-10 results.
† Segment analysis of anarfulscience.com.

How to create reader personas

 The segment research you do should have put you into contact with super readers, the people who most actively consume create and disseminate content published in your client’s niche. You now need to read what they read.

To do that, look at their social media accounts and personal blogs and ask two questions:

  1. Which blogs, forums, magazines or newspapers do they use, read, talk about, link to and respect?
  2. What kind of layouts and fonts do these have in common?

How to find the kind of content your client’s customers read

AllTop.com ↓

AllTop.com

We used four tools here. The first one was AllTop.com. AllTop curates the best blogs in every industry, so you can use this for any client you have. Just search using one of your “Interests” Fig. 8 or “Reader Bio” keywords Fig. 9. In our example we used “design” or “tech”. Now review the results for an appropriate sub category and make a note of all these super reader hangouts.

Epictions EpicBeat ↓

EpicBeat

EpicBeat spots trends in content, audience and influencers. Just enter a relevant search to view the popularity of content and the influencer type. The results dive right into the makeup of the content (word count, reading level, sentiment, etc.), the sharing behaviours of the community and channels you are after, as well as the super readers you should profile.

  1. To discover niche related blogs register with your client’s Twitter account and enter one of your “Bio keywords”
  2. Click into the Content Insights tab
  3. Using the dropdown filter sort by “Top Domains”
  4. To discover super readers, view Content insights/Top authors or Multichannel Influencers

Quantcast ↓

Quantcast

In Quantcast the Sites Report will show you the sites that share a common audience with your search. This can be sorted to find similar sites or sites whose users make up the largest portion of a user base.

  1. Enter one of your “Single” Bio keywords Fig. 8 or a website url.
  2. Be sure to “see all * profiles”. If there is more than 10 results, edit the website address and change the count= to 1000.
  3. Select any of the results and review the site for relevance.
  4. In the left had sub navigation click into the “General Interests”, then “View details”.

Lastly, you can also check out media.info, who have a great database of magazines and newspapers.


Discover alternatives

To expand your search head over to SimilarWeb and enter any of the blogs you’ve discovered. As well as providing user engagement insights you can use to compare with your target profile this tool also lists similar sites frequently visited by the same users (“Also Visited Websites”), or where people were diverted to/from (“Top Destination Sites”).

If you’ve done your detective work, you’ll be able to start collating reader profiles, keywords, common hashtags and any sites or publications that resonate with a large part of your client’s audience that you can leverage for inspiration.

Now you need to look at the content and in particular for a budding typography-first designer the font choices that super readers and the top publishers in your client’s niche prefer. And there are font identification tools to help you do that too.

Font identification

 To help your research, there are a bunch of services and browser extensions that enable you to identify a particular font used on any web page – a much more preferable option than sifting through the page CSS.


Tools to speed up your research.

Font identification tools for your browser ↓

WhatFont, Fontface Ninja, Fount and Type Sample are browser extensions that give you font information on any text you hover over.

WhatFont browser extension

Here is the WhatFont browser extension in action. After you have installed it, visit any website and click the bookmarklet or extension. If you hover over the desired font, only the type of font will be displayed. Notice how much information this handy font spotting tool gives you.

Font identification tools for screenshots ↓

What Font is, WhatTheFont! and The Font Matcherator allow you to upload a screenshot of the type to find the name of the font.

Online font identification tools ↓

Through a series of questions Identifont helps you find fonts by name, similarity, image and designer/ publisher.


Ta-dah! Your reader persona revealed.

You’re done.That’s it for step one. But we couldn’t end this step without revealing the results of our market segment and reader persona analysis – into you. So click on the link to see the results. Yes, you might not tick every box on the list. But if you’re here…

Reader persona for @anartfulscience ↓

  • You’re in your mid 30s, married, earning a decent salary as professional web developer in London.
  • In your spare time you enjoy art/culture, political news, photography, arts and crafts and reading.
  • As a consumer you focus on technology, hobbies and home/family. Brand affinities far stronger than the Twitter average include Smashing, Dribbble, Econsultancy, Indiegogo and 500 Startups.
  • On social media you talk most often about technology, business and games.

You also love to read and engage with content from the following sources – who use these fonts for their headings and body copy:

BrandsHeadingBody
A List ApartFranklin ITCGeorgia
SEJProxima NovaProxima Nova
MozRoboto SlabLato
SlideShareHelvetica NeueHelvetica Neue
TutsplusRobotoArial
InfluencesHeadingBody
Smashing MagSkolar BoldSkolar Regular
The Next WebAvalonARS Maquette
Wallpaper MagPortraitPortrait
MashableMuseo SlabHelvetica Neue
WiredAmbroise FrancoisExhange SSm 4r

Summary

 Once you start thinking of every client as a writer and every one of their customers as readers, you can see how vital it is to read everything you’re designing.

But reading your client’s content critically and creatively isn’t enough. You need to track down their super readers and read what they read, looking for the fonts used in the content they love to read and share too for inspiration.

This can take time, but given the tools now at your disposal and a little practice you’ll soon be able to create reader personas for every project you work on. And doing so will take the guesswork out of everything that comes next because:

Web designers who ground their design on reader personas have the unique advantage of being able to create reading experiences they know their client’s readers will love. via @anartfulscience

Now, talking of what comes next, it’s time to get all emotional and turn to the emotional power of fonts. But not yet – we’re still busy polishing it. So in the meantime, make sure you’ve signed up to the newsletter and shared this content on social media. Naturally, we know you want to.

Step 2: The emotional power of fonts.*
* Coming soon. Subscribe to get a notification of the release date. † Go back to the introduction.

Subscribe to the Free Artful Science Newsletter…

You’ll be the first to receive links to each step in my Typography-First guide. When every step is complete, you’ll be sent a copy of the full guide including the bonus chapter: “Raising your Typesetting Game with OpenType”

Subscribe to the Newsletter
TopMenu

Newsletter

Keep updated. You’ll be the first to receive links to each step in my Typography-First guide before they're released.

Close