New type scale

A new typographic scaleDiscovery and implementation

@liammcmurray

(all images sourced from unsplash, it’s awesome check it out)

Background

6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72

These are the standard point sizes by which type was set by hand for printing.

Background

6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72

8 9 10 11 12 14 16 18 20 22 24 26 28 36 48 726 8 9 10 11 12 14 16 18 24 30 36 48 60 72

9 10 11 12 13 14 18 20 24 36 48 64 72 144 288

The scales from Word, Photoshop, and Sketch.

Background

6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72

15 18 20 24 26 32 35 43 46 57 62

The scale used in our Beta.

Background

15 18 20 24 26 32 35 43 46 57 62

This is based on two important numbers (18 and 26),and the perfect fifth musical interval.

We used a website by Tim Brown called Modular Scale.

Background

Music & type

The intervals between notes, the frequency (pitch) of those notes, and their ratio are what makes music.

Same for typography, the relationship between different font sizes for different page elements should make content sing.

Music & type

Creating a new scale

A goal of a new typographic scale based on the traditional typographic scale, using rules from musical theory to create a harmonious result.

The defining properties of the scale will be:

r = ratioi = interval

f = frequency

Creating a new scale

https://wiki.bath.ac.uk/display/webservices/Typographic+scale+discovery

Creating a new scale

14 16 18 20 24 28 32 36 42 48 56 +2 +2 +2 +4 +4 +4 +4 +6 +6 +8

r = 2i = 4f = 2

Creating a new scale

14 16 18 20 24 28 32 36 42 48 56

15 18 20 24 26 32 35 43 46 57 62

Creating a new scale

14 16 18 20 24 28 32 36 42 48 56

15 18 20 24 26 32 35 43 46 57 62

Creating a new scale

14 16 18 20 24 28 32 36 42 48 56 mobile

14 16 18 20 24 28 32 36 42 48 56 tablet

14 16 18 20 24 28 32 36 42 48 56 desktop

Creating a new scale

In the wild

●http://www.bath.ac.uk/campaigns/bring-your-year-10-students-to-a-university-taster-day/

●http://www.bath.ac.uk/events/management-consultancy-networking-event/

● http://www.bath.ac.uk/projects/new-website-and-publishing-platform/

In the wild

●http://www.bath.ac.uk/case-studies/choosing-a-placement-prepares-you-for-your-career/

● http://www.bath.ac.uk/locations/parade-bar-and-grill/

Not so good

.summary h1h1h2h3h4h5h6p

.small

Next steps.page-summary-heading

.title.subtitle

.sub-subtitle.paragraph-heading

p.small

Thank you ♥

@liammcmurray