Typography

[guylepage3]

Description Define typography that is the most esthetically pleasing and usable as possible.

Discoveries

• There are actually two style sets for interface design
  1. Regular Typography for interface design and layout within graphical user interfaces. ie. List of songs, play button, settings.
  2. Editorial Typography for lengthier content sets of copy that are for written communications. ie. promotional pages, blog posts, documentation, etc.

Reference(s)

[guylepage3]

Content Style Set

Typographic Definitions

• Scaling ratio options
  • 1.067 [15:16] - Minor Second
  • 1.125 [8:9] - Major Second
  • 1.200 [5:6] - Minor Third – Mobile
  • 1.250 [4:5] - Major Third – Desktop
  • 1.333 [3:4] - Perfect Fourth – Exploring Responsive Type Scales
  • 1.414 [1:√2] - Augmented Fourth
  • 1.500 [2:3] - Perfect Fifth
  • 5:8 – Minor Sixth
  • 1.618 [1:1.618] - Golden Ratio
  • 3:5 – Major Sixth
  • 9:16 – Minor Seventh
  • 8:15 – Major Seventh
  • 1:2 – Octave
  • 2:5 – Major Tenth
  • 3:8 – Major Eleventh
  • 1:3 – Major Twelfth
  • 1:4 – Double Octave

Chosen responsive scaling ratio

• [x] Mobile – 1rem @16px (1.200 [5:6] - Minor Third)
• [x] Desktop – 1.0625rem @17px (1.250 [4:5] - Major Third)

*Margin top (as it needs to be added in. Bootstrap does not support margin-top.

Meta Typography
Meta Scaling Typography Values – (Google Sheets)

Reference

• Setting Type on the Web to a Baseline Grid
• 8pt Grid System

[guylepage3]

Values are off. Needs updating...

[guylepage3]

Custom values (no scaling ratio) for Desktop (! -- Not-Used (KEEP) -- !) 1rem == 17px (1.0625rem) – 1px == 0.05882352 rem

Desktop	1rem == 17px (1.0625rem)
No ratio
	Item	Font size	Rounded
	h1, .h1	2.9861rem (50.7632px)	2.99999952rem (51px)
	h2, .h2	2.4883rem (42.3008px)	2.47058784rem (42px)
	h3, .h3	2.0736rem (35.2512px)	2.11764672rem (36px)
	h4, .h4	1.728rem (29.376px)	1.7647056rem (30px)
	h5, .h5	1.44rem (24.48px)	1.41176448rem (24px)
	h6, .h6	1.2rem (20.4px)	1.1764704rem (20px)
	.display-1	6.1918rem (105.2608px)	6.1764696rem (105px)
	.display-2	5.1598rem (87.7168px)	5.17646976rem (88px)
	.display-3	4.2999rem (73.0976px)	4.29411696rem (73px)
	.display-4	3.5832rem (60.9152px)	3.5294112rem (60px)
	.lead-lg // Custom	1.6471rem (28px)	1.64705856rem (28px)
	.lead	1.2353rem (21px)	1.23529392rem (21px)
	.blockquote	1.2353rem (21px)	1.23529392rem (21px)
	.blockquote-footer	1.0625rem (17px)	1.0625rem (17px)
	dl	1.0625rem (17px)	1.0625rem (17px)
	ul, li	1.0625rem (17px)	1.0625rem (17px)
	p	1.0625rem (17px)	1.0625rem (17px)
	small	80% (13.6px)	0.82352928rem (14px)

[guylepage3]

Complete.

https://docs.google.com/spreadsheets/d/1IDtPfqLt2zLEitG5YerlXZaTdG-r66N0Cw2WPfml5Ig/edit?usp=sharing