The process of creating a considered scale for the output of typography on the University of Bath website

1. A new typographic scale
Discovery and implementation
@liammcmurray
(all images sourced from unsplash, it’s awesome check it out)

2. Background

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

4. 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 72
6 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

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

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

7. Music & type

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

9. Creating a new scale

10. 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 = ratio
i = interval
f = frequency
Creating a new scale

11. https://wiki.bath.ac.uk/display/webservices/Typographic+scale+discovery
Creating a new scale

12. 14 16 18 20 24 28 32 36 42 48 56
+2 +2 +2 +4 +4 +4 +4 +6 +6 +8
r = 2
i = 4
f = 2
Creating a new scale

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

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

16. In the wild

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

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

19. .summary h1
h1
h2
h3
h4
h5
h6
p
.small
Next steps
.page-summary-heading
.title
.subtitle
.sub-subtitle
.paragraph-heading
p
.small

20. Thank you ♥
@liammcmurray