The GRT design system is composed of 3 main parts:
1. font sizes
2. line heights
3. spacing units
The GRT Calculator (that's me) gives you each of these values—enough to inform an entire design's worth of sizing and spacing (padding, margins, etc).
1. font sizes
2. line heights
3. spacing units
The GRT Calculator (that's me) gives you each of these values—enough to inform an entire design's worth of sizing and spacing (padding, margins, etc).
1. Font Sizes
The first step in producing any text-driven design is to select a primary font size.
With GRT, we can apply the golden ratio to this font size to generate a typographic scale consisting of 6 usable font sizes.
To function in context, these sizes need "fitting"...
The first step in producing any text-driven design is to select a primary font size.
With GRT, we can apply the golden ratio to this font size to generate a typographic scale consisting of 6 usable font sizes.
To function in context, these sizes need "fitting"...
2. Line Heights
The essence of GRT, line heights are crucial to "fitting" text within a container (aka "content width").
The Calculator uses specific font metrics and the content width to fine-tune line heights for the typographic scale from step 1. This yields a Golden Scale:
The essence of GRT, line heights are crucial to "fitting" text within a container (aka "content width").
The Calculator uses specific font metrics and the content width to fine-tune line heights for the typographic scale from step 1. This yields a Golden Scale:
3. Spacing Units
The Golden Scale covers all sizing concerns, but the GRT design system would be incomplete without associated spacing units.
Based on the line height of the primary font size, Golden Spacing Units answer the question: "How much padding/margins/space goes here?"
The Golden Scale covers all sizing concerns, but the GRT design system would be incomplete without associated spacing units.
Based on the line height of the primary font size, Golden Spacing Units answer the question: "How much padding/margins/space goes here?"
Ultimately, the GRT design system is founded on two things: a golden typographical scale and associated golden spacing units.
These items are sufficient to inform an entire design's worth of responsive CSS. Better still, the GRT approach eliminates arbitrary spatial values.
These items are sufficient to inform an entire design's worth of responsive CSS. Better still, the GRT approach eliminates arbitrary spatial values.
"How much padding should I put here?"
"How big should this text be?"
These are design questions that often (nearly always?) yield arbitrary answers.
GRT exists to answer these questions accurately and systematically while also providing unlimited programmatic possibilities.
"How big should this text be?"
These are design questions that often (nearly always?) yield arbitrary answers.
GRT exists to answer these questions accurately and systematically while also providing unlimited programmatic possibilities.
