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:

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:

    var dropcaps = document.querySelectorAll(".dropcap"); // Set to 3
    window.Dropcap.layout(dropcaps, 3);

2. Add the .dropcap class to the initial letter.

<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.

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 & 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:

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>

2. 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.

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

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.

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.

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.

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 ↓

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 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 ↓

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.

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…

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.

Share on Social Media: