As so much of the content available on the web is text it’s essential for web designers to understand the basic principles of good typography. Having such knowledge allows designers to communicate more effectively, enabling them to create better designs and websites that are easier to use.

For more experienced designers setting text may come naturally but for those who are just starting out I’ve decided to put together a list of the basic do’s and don’ts. Not only will this list teach you the fundamentals but you can also use it as a check list to work through on future projects. Here goes:

DO establish a typographic hierarchy

A typographic hierarchy can be established by using a variety of methods such as size, weight, color, and contrast. Its purpose is to give pages structure and guide the user through the content. Without a clear hierarchy the text becomes much harder to scan and therefore generally harder to read. Just take a look at the examples below. On the left the text is one size and one weight so it’s hard to differentiate between headings and body text. Meanwhile, on the right, we have the same content but with a clear typographic hierarchy, so it’s much easier to distinguish between the different elements.

Here I’ve only used size and weight to establish my hierarchy but for even better results you can try to experiment with color and contrast as well.

 

DON’T make the text too small

Not everybody has 20-20 vision so it’s important to make sure that your body text is big enough for people to read comfortably. Personally I would recommend no smaller than a size of 14pt.

 

DO choose an appropriate font for the body text

Another important factor when it comes to your body text is legibility. Although a typeface like Satisfy might suit a design with a hand-made aesthetic, using a typeface such as this for your body text will have a negative impact on your users. This is because it’s much harder to read than your average serif or sans-serif. Look at the examples below and you will notice how much harder your brain has to work in order to make out the words on the left compared to those on the right.

 

DON’T use too many different fonts on one page

Services like Typekit and Google Fonts may give you access to thousands of fonts but it doesn’t mean that you have to use them all. As you can see from the example below, unless it’s done really well, using multiple fonts can be very distracting. This is why I usually recommend using no more than 2 or 3.

 

DO give your text room to breathe

A lack of white space between each line can affect readability because it makes it difficult for the eye to track from one line to the next. However, this problem can easily be solved by increasing your line-heights, but be careful not to overdo it, too much space can also affect readability in a negative way.

 

DON’T make continuous use of all caps

People aren’t used to reading large chunks of text set in all caps and because of this it’s actually harder for people to read. Not only that but people often associate all caps with shouting or aggression and when it comes to marketing copy it can come across quite spammy. Due to this it’s important to think about how and when you’re going to use all caps and to make sure that you use it in moderation.

 

DO try and limit paragraphs to 40-60 characters per line

If a line is too long the reader gradually begins to lose focus and can often have trouble reading from one line to the next. If a line is too short it causes the reader’s eye to travel back too often, which disrupts their rhythm. This can also make them start reading the next line too soon, causing them to miss words from the previous line. This is why the optimal line length for body text is said to be around 40-60 characters per line.

 

DON’T use large amounts of centered text

Centered text is difficult to read because the edges of the text block are uneven which makes it harder to scan because each line has a different starting point. Centered text blocks are also difficult to align to other objects on the page and are often considered to look quite amateurish. This is why, like all caps, it’s best to use centered text in moderation, opting for left aligned text as standard instead.

 

DO make sure there is enough contrast between your text and the background

Contrast is another aspect of typography that can affect readability. If there’s not enough contrast between the text and the background, the content can become illegible.

 

Do you have anything to add? What tips would you give new designers just starting out? Let us know in the comments.

Magnolia: 150+ Professional Infographic Elements – only $9!

Source

I’m a lucky person. Every day I get to do what I love, which is helping clients work out what their web project is going to look like.

As any good account handler or project manager will tell you, their primary role is to make sure that a project goes as smoothly as possible. This can mean managing people on both sides of the fence, and keeping everyone happy is no mean feat.

I’m a big believer that getting a project off to a strong start is integral to the success of that project, and for me that means helping the design team hit the ground running, and making sure they can begin doing what they do best as soon as possible.

I’ve read plenty of material recently describing account handlers as having a negative effect on the creative process of a project. These criticisms range from the account handler not allowing the designer access to the client throughout the project, through to making the designer jump through hoops on the whim of a client. Whilst I’m sure these aforementioned criticisms occur every day in the industry, I want to discuss how I believe an account handler can make a designer’s job in a typical web agency so much easier.

1. Planning

For me, the initial stage of a project is one of the most exciting parts of a new website project. It’s the time you get to speak to the client and really get to understand what they want to get out of working with you and your company. However, clients can sometimes be unsure of what they want, and if there’s a big team working on the project at the client’s end, it’s easy to get mixed messages and issues like design by committee becomes a genuine concern.

Whilst it can be beneficial, at times, for the project’s lead designer to be part of these initial discussions, I don’t feel that’s the best use of a designer’s time. This is especially relevant in agencies where a designer might be juggling several projects at once, and their time is even more valuable than usual. I would hate to think of the impact including the design team on all initial meetings would have on the productivity of an agency!

I believe the ability to extract and define a clear set of high level project objectives is one of the main signs of a strong account handler, and putting some of the elements mentioned below in front of the lead designer in an internal kick-off meeting can get things off to a great start and increase the designer’s confidence in yourself and the client:

1. In the client’s words, define what the company does.
2. What is the ultimate goal for the website, and how will it benefit your business?
3. What are the objectives of the website?
4. Describe a typical user of your new website.

It constantly surprises me how often clients struggle to answer these questions, and I don’t feel a designer’s time is best spent helping a client come up with those answers. I want my designer to feel motivated by the task at hand, not be fatigued by helping the client work out the finer details of the project.

 

2. Assets

If you’ve briefed the team on the project and had that all-important kick-off meeting, it’s more than likely time to begin the project’s wireframing stage. By the time these stages begin, it’s important that an account handler has collected a number of project assets, which could/should include:

1. A signed off website sitemap.
2. A signed off project specification which details features and functionality. This may be absent in the case of an agile process being implemented, but some idea of the intended functionality is always helpful.
3. Brand guidelines and the files associated with this such as logos, typefaces and colour palettes.
4. The content for the website, to allow for accurate wireframes and visuals. This is even more important in a responsive design project, as Steve Fisher and Alaine Mackenzie recently wrote about. This can range from text through to video content.
5. Whilst not being vital, I also provide a project planning document which the client has filled in. This details things like objectives and goals in the client’s own words, which means the team will always have access to a client-orientated brief throughout the process.

Nothing will dampen the enthusiasm for a project quite like the absence of vital materials like the ones listed above. This is the point in the project where it should be all systems go, and having to chase for assets at this stage can really kill momentum.

 

3. Embracing change

Plans change, and it’s how you adapt to these inevitable revisions that will decide the overall outcome of the project. However, it’s also important that your process is set up to protect a designer and keep their work streamlined. If your designer is complaining that all they’re doing is revision after revision, then something has fallen down in the project process and it’s the designer’s workload that is going to feel the effects of that. If we have successfully:

1. Taken ample time in the planning stage to understand the project’s objectives.
2. Agreed the project’s core features.
3. Produced a set of signed off wireframes.

Then change, especially to visuals, should be minimal. It’s also important however, to be open to change and accept the possibility that even though we have gone through a lengthy planning stage, additional value can still be brought to the project in the shape of revisions. I treat a project plan/specification as a detailed guide, but refusing to budge even a little from what has been agreed can have a detrimental affect on the project.

Filtering a list of additions or changes from the client, before they get to the design team, can ensure team members stay focussed and do not begin to grow tired of constant tweaks and changes.

 

4. Rejecting change

We’ve spoken about the need to sometimes embrace change, and how that can be of a benefit to the project, however there will be times in most projects where a client may request something that sits outside of the agreed specification. This may also have a knock-on effect to deadlines, possibly affecting the rest of the project team.

How we approach revisions in general, very much depends on the account handler’s knowledge of what the designer’s role involves. I’ve heard stories of account handlers needing clarification on what a client was referring to when they mentioned a ‘URL’, I imagine this makes it a challenge to appropriately filter revisions. If, however, you have an understanding of the design and development process, you will know that even the smallest requests can cause hours of work to be undone.

It’s an account handler’s job to process, filter and sometimes reject change, in the interest of the project. This, in my opinion, is one of the most important responsibilities that an account handler has, and it’s a vital that we protect the project and its team from unnecessary work where possible.

 

5. Working collaboratively

Let me start by saying an account handler should never dictate. The designers are the creative part of the team for a reason. I do see it important to give steer where necessary though, and you should have an opportunity to do this in your internal progress meetings, or just by catching up with the team whilst they’re working.

How much steer you provide will depend on your knowledge of a) the project and b) the ‘industry’ itself. Taking the time to read up on and understand latest industry practises such as responsive design, UI/UX and the discussion around designing in the browser can give you a great platform on which to positively influence a project.

If you have an opinion on how certain things might look or work, mention it. If the designer dismisses this or suggests a route they think is more suitable, go with it. You’ll get a chance to provide full feedback before the client sees anything, and you can review things when the designer is happy to share their work.

It’s important you provide a designer with the freedom to do what they do best. This can only result in an increase in trust between between yourself and the designer and in turn, they should value your input from project to project.

 

Summary

To work efficiently, a project team needs more than just a middleman who will pass things from A to B. Take your chances to positively influence the project and continually put yourself in the shoes of your teammates and clients.

A strong working relationship with your design team is key to a successful project, and I believe the steps I’ve detailed here can only improve the chances of them producing the best work possible.

 

Do you work as an account manager, are you a designer working with an account manager? What benefits does the relationship deliver to clients? Let us know in the comments.

Featured image/thumbnail, steering image via Shutterstock.

Magnolia: 150+ Professional Infographic Elements – only $9!

Source