Skip to content

Commit 1c4a667

Browse files
author
mrmrs
committed
Update the type scale page docs
1 parent 64c215e commit 1c4a667

File tree

1 file changed

+78
-52
lines changed

1 file changed

+78
-52
lines changed

‎docs/typography/scale/index.html

+78-52
Original file line numberDiff line numberDiff line change
@@ -53,28 +53,24 @@
5353
</header>
5454

5555
<main class="bg-white black-70">
56-
<article class="bt b--black-10 pa3 ph5-ns">
57-
<h4 class="f4 mv0 fw6 dib mr4">tachyons-type-scale</h4>
58-
<span class="f4 b dib pl0 ml0 mr4">v6.0.1</span>
59-
<span class="f4 b dib pl0 ml0 mr4">242 B</span>
60-
<div>
61-
<dl class="dib mr4 mt0">
62-
<dt class="f6 db">Declarations </dt>
63-
<dd class="db pl0 ml0 f4 f2-ns b">32</dd>
64-
</dl>
65-
<dl class="dib mr4">
66-
<dt class="f6 db pr2">Selectors </dt>
67-
<dd class="db pl0 ml0 f4 f2-ns b">40</dd>
68-
</dl>
69-
<dl class="dib mr4">
70-
<dt class="f6 db pr2">Max. Specificity Score </dt>
71-
<dd class="db pl0 ml0 f4 f2-ns b">10</dd>
72-
</dl>
73-
<dl class="dib mr4">
74-
<dt class="f6 db pr2">Size of Avg. Rule </dt>
75-
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
76-
</dl>
56+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
57+
<div class="nowrap mw9 center">
58+
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="#0" title="Type">Type Scale</a>
59+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/measure/" title="Measure">Measure</a>
60+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
61+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/tracking" title="Tracking">Tracking</a>
62+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
63+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-style" title="Font Families">Font Style</a>
64+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
65+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-align" title="Text Align">Text Align</a>
66+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
67+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
68+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/white-space" title="White Space">White Space</a>
69+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-family" title="Font Families">Font Families</a>
7770
</div>
71+
</header>
72+
<article class="ph3 ph5-ns">
73+
<h3 class="f6 ttu tracked mt0">Type Scale</h3>
7874
<p class="measure f4 f3-ns lh-copy">
7975
Often times, websites devote a non-trivial amount of css to setting
8076
font-size. They declare an unnecessary amount of different
@@ -92,13 +88,13 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-type-scale</h4>
9288
</p>
9389
</article>
9490
<div class="ph3 ph5-ns pt4 pb5">
95-
<h2 class="f3 b mb4">Scale</h2>
96-
<blockquote class="f5 gray measure lh-copy mh0 mb4">
91+
<blockquote class="f5 gray measure lh-copy mh0 mb4 mb5-ns">
9792
<p class="i">
9893
"The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection... In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years... This is the typographic equivalent of the diatonic scale."
9994
</p>
10095
<p class="dark-gray f6">Robert Bringhurst - <b>The Elements of Typographic Style</b></p>
10196
</blockquote>
97+
<h2 class="f4 b mb4">Font sizes</h2>
10298
<div class="w-100 overflow-x-auto">
10399
<table>
104100
<tr>
@@ -123,48 +119,56 @@ <h2 class="f3 b mb4">Scale</h2>
123119
</tr>
124120
</table>
125121
</div>
126-
<h2 class="f3 b mb5 mt5 mt6-ns">Examples</h2>
127-
<code class="f6 gray">.f-headline 6rem</code>
122+
<h2 class="f4 b mb5 mt5 mt6-ns">Examples</h2>
123+
<code class="f6 pre mb3 db">
124+
&lt;h1 class="f-headline lh-solid"&gt;Title&lt;/h1&gt;
125+
</code>
128126
<p class="f-headline b lh-solid oh measure mt0 mb5 nowrap ws-normal-ns overflow-hidden word-wrap">
129-
Jelly-like above the high wire, six quaking pachyderms kept the climax
130-
of the extravaganza in a dazzling state of flux.
127+
A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
131128
</p>
132129

133-
<code class="f6 db gray">.f-subheadline 5rem</code>
134-
<p class="f-subheadline lh-solid b measure oh mt0 mb4 mb5-ns word-wrap">
135-
Ebenezer unexpectedly bagged two tranquil aardvarks with his jiffy vacuum cleaner.
130+
<code class="f6 pre mb3 db">
131+
&lt;h1 class="f-subheadline lh-title"&gt;Title&lt;/h1&gt;
132+
</code>
133+
<p class="f-subheadline lh-title b measure oh mt0 mb4 mb5-ns word-wrap">
134+
A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
136135
</p>
137-
<code class="f6 db gray">.f1 3rem</code>
138-
<p class="f1 b lh-solid mt0 mb4 mb5-ns measure word-wrap">
139-
The public was amazed to view the quickness and dexterity of the juggler.
136+
<code class="f6 pre mb3 db">
137+
&lt;h1 class="f1 lh-title"&gt;Title&lt;/h1&gt;
138+
</code>
139+
<p class="f1 b lh-title mt0 mb4 mb5-ns measure word-wrap">
140+
A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
140141
</p>
141-
<code class="f6 db gray">.f2 2.25rem</code>
142+
<code class="f6 pre mb3 db">
143+
&lt;h1 class="f2 lh-copy"&gt;Title&lt;/h1&gt;
144+
</code>
142145
<p class="f2 lh-copy mt0 mb4 mb5-ns measure">
143-
A quart jar of oil mixed with zinc oxide makes a very bright paint.
144-
How razorback-jumping frogs can level six piqued gymnasts.
146+
A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
145147
</p>
146-
<code class="f6 db gray">.f3 1.5rem</code>
148+
<code class="f6 pre mb3 db">
149+
&lt;h1 class="f3 lh-copy"&gt;Title&lt;/h1&gt;
150+
</code>
147151
<p class="f3 lh-copy mt0 mb4 mb5-ns measure">
148-
The July sun caused a fragment of black pine wax to ooze on the velvet quilt.
149-
We quickly seized the black axle and just saved it from going past him.
152+
A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
150153
</p>
154+
<code class="f6 pre mb3 db">
155+
&lt;h1 class="f4 lh-copy"&gt;Title&lt;/h1&gt;
156+
</code>
151157

152-
<code class="f6 db gray">.f4 1.25rem</code>
153158
<p class="f4 lh-copy mt0 mb4 mb5-ns measure">
154-
We promptly judged antique ivory buckles for the next prize. Heavy
155-
boxes perform quick waltzes and jigs. Blowzy night-frumps vex'd Jack Q
159+
A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
156160
</p>
157-
<code class="f6 db gray">.f5 1rem</code>
161+
<code class="f6 pre mb3 db">
162+
&lt;h1 class="f5 lh-copy"&gt;Title&lt;/h1&gt;
163+
</code>
158164
<p class="f5 lh-copy mt0 mb4 mb5-ns measure">
159-
Jelly-like above the high wire, six quaking pachyderms kept the climax
160-
of the extravaganza in a dazzling state of flux.
161-
Jinxed wizards pluck ivy from the big quilt.
165+
A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
162166
</p>
163-
<code class="f6 db gray">.f6 .875rem</code>
167+
<code class="f6 pre mb3 db">
168+
&lt;h1 class="f6 lh-copy"&gt;Title&lt;/h1&gt;
169+
</code>
164170
<p class="f6 lh-copy mt0 measure word-wrap">
165-
Forsaking monastic tradition, twelve jovial friars gave up their vocation for a
166-
questionable existence on the flying trapeze. Amazingly few discotheques
167-
provide jukeboxes.
171+
A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
168172
</p>
169173
<div class="mt5 cf">
170174
<div class="dib mr4">
@@ -181,9 +185,31 @@ <h4 class="f6 fw6">Reference</h4>
181185
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" class="link fw6 blue dim">MDN - Font-size</a>
182186
</div>
183187
</div>
184-
<section class="bg-white black-70 pt4 pb5 overflow-container">
188+
<section class="bg-white black-70 pv4 mb4 bt bb b--black-40 overflow-container">
185189
<header class="ph3 ph5-ns pt4">
186-
<kbd>src/_type-scale.css</kbd>
190+
<h4 class="f4 mv0 fw6 dib mr4">tachyons-type-scale</h4>
191+
<span class="f4 b dib pl0 ml0 mr4">v6.0.1</span>
192+
<span class="f4 b dib pl0 ml0 mr4">242 B</span>
193+
<div>
194+
<dl class="dib mr4 mt0">
195+
<dt class="f6 db">Declarations </dt>
196+
<dd class="db pl0 ml0 f4 f2-ns b">32</dd>
197+
</dl>
198+
<dl class="dib mr4">
199+
<dt class="f6 db pr2">Selectors </dt>
200+
<dd class="db pl0 ml0 f4 f2-ns b">40</dd>
201+
</dl>
202+
<dl class="dib mr4">
203+
<dt class="f6 db pr2">Max. Specificity Score </dt>
204+
<dd class="db pl0 ml0 f4 f2-ns b">10</dd>
205+
</dl>
206+
<dl class="dib mr4">
207+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
208+
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
209+
</dl>
210+
</div>
211+
<h4 class="f6">Source code</h4>
212+
<kbd>src/_type-scale.css</kbd>
187213
</header>
188214
<pre class="ph3 ph5-ns">
189215
<code class="code" style="font-size: .75rem;">

0 commit comments

Comments
 (0)