DotYork/NUX Crossover Event - UX & Typography

I was recently given the opportunity to return to York to speak at the second DotYork 🔀 NUX crossover event.

This post acts as a round-up of useful typography resources & links from aspects mentioned during my talk.

Table of Contents

  1. The Adana Letterpress
  2. Design Guidelines
    1. Alignment
      1. Line Length
    2. Repetition
      1. Font Pairing
    3. Contrast
    4. Proximity
    5. Balance
      1. Grid Systems
      2. Baseline Grid/Vertical Rhythm
  3. Vincent Connare
  4. Creating Your Own Font
  5. Further Reading
    1. On-line
    2. Print
  6. In Conclusion

The Adana 8x5

The letterpress I spoke of in my talk was the British made Adana 8x5

Caslon - current home of the Adana letterpress

Design Guidelines

The 5 key design guidelines, which align with useful typographic guidelines were;

  • Alignment
  • Repetition
  • Contrast
  • Proximity
  • Balance

This article - - offers a useful overview of these 5 Basic Principles Of Design.


The research completed by Microsoft I mentioned during the talk on how people read copy, and therefore interact with typography, online can be found here in their article The Science of Word Recognition -

Line Length

Further information on defining an optimal line-length for your users can be found in these articles.


Font Pairing

A useful intro to combining fonts can be found here;

A Beginner’s Guide to Pairing Fonts

These are some great example sites showing font pairing in action;

And these following tools can be used to create and test your own font combinations;

And in this area, Fonts In Use is a really useful site to look at real-world examples of both font combinations and individual fonts in place;


The following online tool is really useful for quick checking of typographic contrast;

And this page rounds up other solutions in this area;

If making use of Sketch App for your UI design, the Stark plugin has proved to be the best I’ve found for checking contrast of text;

Information on the Chrome DevTools browser integration can be found here;


The following resource offers a useful overview of proximity in regard to design with a specific focus on use in typography;


Grid Systems

There is so much written about the use of grid systems in design, and in particular how they apply to typography but this is a useful starting point for research;

The classic 📙 book Thinking With Type also offers some useful information in this area;

Baseline Grid

In regard to the vertical rhythm of typography, look towards information like the following on baseline grids;

Vincent Connare

Information on the Typographer & Designer Vincent Connare can be found here;

Creating Your Own Font

There a loads of useful tools available to experiment with creating your own font of examining other people’s.

Fontstruct is a great on-line, block-based font creation tool;

As is FontArk;

For Desktop based tools, the open source FontForge has always been the classic font/typeface design tool;

FontLab Studio is more an industry standard, but a more expensive solution;

And Glyphs is the middle-ground between these two options;

Further Reading


Butterick’s Practical Typography

Butterick's Practical Typography

An excellent resource by Matthew Butterick ( who also created the legal specific resource. Practical Typography offers an excellent overview of typographic theory and is an excellent starting point for learning more about this area.

The Elements of Typographic Style Applied to the Web

The Elements of Typographic Style Applied to the Web

A web–specific version of the excellent Elements of Typographic Style book maintained by Richard Rutter. Very useful overview and intro to the more in–depth and non web–specific original.


The Elements of Typographic Style

one of the best investments I can recommend when it come to learning typography is to purchase a copy of Robert Bringhurst’s Elements of Typographic Style (

Elements of Typographic Style Book

For a lighter overview of typographic history and use take a look at Simon Garfield’s Just My Type (

In Conclusion

Thank very much to all who attended my talk on UX & Typography

It hopefully offered some useful tips that can be applied to general product design work.

If you’d like to discuss more, or have any questions in this area, I can often be found discussing this topic on-line.

Thanks ツ

UK Design Documentaries, Series & Talks

There are some great documentary films, and more recently series (, about Design. But 2 things I have noticed about these are that;

  1. The same Design related films tend to be promoted across different ( resources (
  2. These films tend to have a US focus, both in subject matter and creation.

As such, I’ve been looking at films that focus at the great Design history here in the UK, both at a general level and on ones that focus on specific, British Designers.

📽 UK Design Documentary Films

Abram Games - Maximum Meaning, Minimum Means

“A film of the life and work of Abram Games features rare archive conversations with Games, interviews with his family and assessments today’s leading designers. All aspects of Games’s is explored from posters to product design.”

📺 UK Design Documentary Series

The Brits Who Designed the Modern World

BBC Arts profiles ten great living British designers … to find out what inspires them to make such phenomenal objects. She reveals how designers have responded to society’s evolving tastes, from the brash 60s modernism of Margaret Calvert’s road signs through to the colourful technology of Rick Dickinson’s ZX Spectrum.

The Genius of Design

This five-part series, made by the team behind the award-winning series The Genius of Photography, tells the story of design from the Industrial Revolution through 20s modernism, the swinging 60s, the designer 80s and up to the present day.

🗣 UK Design Talks

Matthew Carter - My Life in Typefaces

In this charming talk, the man behind typefaces such as Verdana, Georgia and Bell Centennial (designed just for phone books – remember them?), takes us on a spin through a career focused on the very last pixel of each letter of a font.

I’m hoping this resource will expand out over time so if you have any suggestions, let me know, I’m always happy to hear about new Design films ツ

Rely on Your Users as well as Your Analytics

So you have a product.

Product A Product A

And your product has features.

Product A - Features Product A - Features

And you have analytics on your product, to see who is using your features.

Product A - Analytics Product A - Analytics

Your analytics show you that, out of the 50 people who use your product 30 use feature A and only 1 uses feature B

Product A - Analytics Detail Product A - Analytics Detail

Great you think, let’s focus on Feature A, Feature B is a distraction (our analytics show us). Remove that, and we can be a Feature A focused team.

So you remove Feature B.

Product A - Feature Product A - Feature

But what you missed, what your analytics didn’t show you, is the 1 person who used Feature B was the person who chose the product. And, while using Feature A benefited each individual who interacted with it, this 1 key person using Feature B benefitted the whole team.

And you removed Feature B - because your analytics told you to - and you didn’t actually speak to your users to find out what the key people, the influencers actually used.

So this 1 person, who used feature B and has now lost it, finds another product, one that still includes an equivalent Feature B. And the whole team move over to that.

Product B Product B

What do your analytics show now.

Lost Users, Lost Revenue Lost Users, Lost Revenue

Colour Theory & Design Resources

A recent UXDiscuss event looking at the use of colour to enhance the users experience had me digging back through various resources I’ve gathered over time in relation to colour theory and UI design.

A Design Critique Colour Swatches

This post is designed as a future reference and a way to collect these resources together.

An International Guide to the Use of Colour in Marketing & Advertising

Can text in different colors help you tackle the most difficult books?

Canva ‘Colors Design Wiki’—information about colors and their meanings

Color Theory Course

Everything About Color Contrast And Why You Should Rethink It

Handprint—Light and the eye

Handprint—Color harmony & color design

In regard to these ^ two—Basically everything listed here - - is fairly useful ツ

How to Use Color in Design to Guide Your User

How To Use Color To Prove Your Point, From A Data Viz Expert

Practical Rules for Using Color in Charts

The key to color harmony: Avoiding boredom and chaos

The Psychology of Color in Marketing and Branding

The Semantics Of Color, Visualized

This 1939 Chart Explains How Color Affects Legibility

Web design color theory: how to create the right emotions with color in web design

Web UI Design for the Human Eye

We’re Only Just Beginning To Understand How Color Impacts Users

What your users really think about your choice of colors

Why Red Means Red in Almost Every Language

Hopefully these resource will prove useful when looking to learn about colour theory and the use of colour to enhance UX.

On Receiving Design Critique

Evaluate (a theory or practice) in a detailed and analytical way.

A Design Critique Critique ≠ A Personal Criticism

Receiving feedback, receiving it well and being able to act upon this feedback is a difficult skill to master.

No-one likes to be told “That’s wrong” or “I don’t think this works” and getting this type of response to a piece of design work you have done, at any stage of your career, can be a knock to a persons confidence.

The key point I keep in mind myself, and advise people I’ve worked with, is to not take this design critique personally. You are not your designs. Hold your ideas lightly, take on this feedback, both good and bad, and use it as a way to move your design forward.

That single comment on one of your ‘failed’ designs might be the spark, the inspiration, that leads you to the right solution.