Upload
liam-mcmurray
View
47
Download
0
Embed Size (px)
Citation preview
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