Skip to content

Commit 2da4717

Browse files
author
mrmrs
committed
Update the type-scale docs. First pass at reworking the copy.
1 parent ee5ce82 commit 2da4717

File tree

2 files changed

+56
-20
lines changed

2 files changed

+56
-20
lines changed

‎docs/typography/scale/index.html

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
66
<title>
7-
Type Scale / Typography / Docs / TACHYONS
7+
type-scale / Typography / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mr3rs">
10-
<meta name="description" content="CSS">
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
12-
<link rel="stylesheet" href="/css/tachyons.css">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
1313
</head>
1414
<body class="w-100 sans-serif">
15-
1615
<header class="w-100 pa3 ph5-ns bg-near-white">
1716
<div class="dt w-100">
1817
<div class="dtc v-mid tl w-50">
@@ -42,7 +41,7 @@
4241
</header>
4342

4443
<main class="">
45-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
44+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
4645
<h4 class="f4 mv0 fw6 dib mr4">type-scale</h4>
4746
<span class="f4 b dib pl0 ml0 mr4">v5.0.1</span>
4847
<span class="f4 b dib pl0 ml0 mr4">238 B</span>
@@ -64,13 +63,32 @@ <h4 class="f4 mv0 fw6 dib mr4">type-scale</h4>
6463
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
6564
</dl>
6665
</div>
66+
<p class="measure f4 f3-ns lh-copy">
67+
Often times - websites devote a non-trivial amount of css to setting
68+
the font-size of elements. They declare an unnecessary amount of different
69+
font-sizes that don't come close to resembling a sane type scale.
70+
</p>
71+
<p class="measure f5 f4-ns lh-copy">
72+
To create and design an easily readable interface, you don't need
73+
40 to 50 font-sizes. A simple ratio-based type-scale is the foundation of
74+
readable interface design.
75+
</p>
76+
<p class="measure f5 f4-ns lh-copy">
77+
There are eight font-sizing classes to choose from.
78+
Using the class extension namespaces you
79+
can set the font-size for any particular breakpoint that you desire.
80+
</p>
81+
<p class="measure f5 f4-ns lh-copy">
82+
Don't spend time constantly overriding font-sizes in your css.
83+
If you don't like a default font-size for an element, use the utilities to quickly make the text larger or smaller until it looks just right.
84+
</p>
6785
</article>
6886
<div class="ph3 ph5-ns pt4 pb5">
6987
<h2 class="f3 bold">Examples</h2>
70-
<p class="f-headline oh w-100">Sample headline</p>
71-
<p class="f-subheadline w-100 oh">Sample subheadline</p>
72-
<p class="f1">Sample text with the f1 class </p>
73-
<p class="f2">Sample text with the f2 class </p>
88+
<p class="f-headline lh-solid oh w-100">Sample headline</p>
89+
<p class="f-subheadline lh-solid w-100 oh">Sample subheadline</p>
90+
<p class="f1 lh-solid">Sample text with the f1 class </p>
91+
<p class="f2 lh-solid">Sample text with the f2 class </p>
7492
<p class="f3">Sample text with the f3 class </p>
7593
<p class="f4">Sample text with the f4 class </p>
7694
<p class="f5">Sample text with the f5 class </p>

‎src/templates/docs/type-scale/index.html

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,17 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
66
<title>
7-
Type Scale / Typography / Docs / TACHYONS
7+
<%= name %> / Typography / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mr3rs">
10-
<meta name="description" content="CSS">
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
12-
<link rel="stylesheet" href="/css/tachyons.css">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
1313
</head>
1414
<body class="w-100 sans-serif">
15-
1615
<%= siteHeader %>
1716
<main class="">
18-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
17+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
1918
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
2019
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
2120
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
@@ -37,13 +36,32 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
3736
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
3837
</dl>
3938
</div>
39+
<p class="measure f4 f3-ns lh-copy">
40+
Often times - websites devote a non-trivial amount of css to setting
41+
the font-size of elements. They declare an unnecessary amount of different
42+
font-sizes that don't come close to resembling a sane type scale.
43+
</p>
44+
<p class="measure f5 f4-ns lh-copy">
45+
To create and design an easily readable interface, you don't need
46+
40 to 50 font-sizes. A simple ratio-based type-scale is the foundation of
47+
readable interface design.
48+
</p>
49+
<p class="measure f5 f4-ns lh-copy">
50+
There are eight font-sizing classes to choose from.
51+
Using the class extension namespaces you
52+
can set the font-size for any particular breakpoint that you desire.
53+
</p>
54+
<p class="measure f5 f4-ns lh-copy">
55+
Don't spend time constantly overriding font-sizes in your css.
56+
If you don't like a default font-size for an element, use the utilities to quickly make the text larger or smaller until it looks just right.
57+
</p>
4058
</article>
4159
<div class="ph3 ph5-ns pt4 pb5">
4260
<h2 class="f3 bold">Examples</h2>
43-
<p class="f-headline oh w-100">Sample headline</p>
44-
<p class="f-subheadline w-100 oh">Sample subheadline</p>
45-
<p class="f1">Sample text with the f1 class </p>
46-
<p class="f2">Sample text with the f2 class </p>
61+
<p class="f-headline lh-solid oh w-100">Sample headline</p>
62+
<p class="f-subheadline lh-solid w-100 oh">Sample subheadline</p>
63+
<p class="f1 lh-solid">Sample text with the f1 class </p>
64+
<p class="f2 lh-solid">Sample text with the f2 class </p>
4765
<p class="f3">Sample text with the f3 class </p>
4866
<p class="f4">Sample text with the f4 class </p>
4967
<p class="f5">Sample text with the f5 class </p>

0 commit comments

Comments
 (0)