Typography
Design first, this is an opinionated type scale system based on the Fibonacci sequence.
In that sense, it's built for print and graphic design.
But here, it's extended into interactive experiences. The rabbit-hole that is responsive design necessitates some breaking of the rules.
A key feature is the separation of style from semantics. Designers are increasingly caring about accessibility in the web and they should understand how that impacts their type choices.
Type Scale
Based on the Fibonacci sequence, the type scale attempts to bring visual harmony to your typographic rhythms.
The scale itself is infinite, so it can scale to any print size needed. Here, the defaults work in both print or interface design.
The numbers here are absolutes. They work in print (use points or picas) or static digital applications (pixels). In software, the numbers represent the absolute ratios that are actually implemented variably—meaning they can scale to any screen size (using rems or ems).
Ours is actually two sequences, interlaced. This idea is directly taken from A Type Primer by John Kane.
Base size
Name
Base 01
16 pt
Base 02
21 pt
Base 03
34 pt
Base 04
42 pt
Base 05
42 pt
Leading & Baseline
The leading (space between lines of type) is all based on our baseline grid of 4. See the baseline grid section for the spacing increments.
The concept of a baseline grid to which type baselines align is borrowed from traditional graphic design. Increments of 4 are inspired by modern interface design.
When used in print, 4 can equal 4 pica. In digital, it can be 4 px. On the web, while we use 4 px for a starter, but the actual CSS associated with this makes use of rems and ems, in order to preserve ratios across screen sizes.
TBD
Code Considerations
This section shows the scale, as styled using classes
Separate semantics from style
This section shows the scale, as styled using classes
hm