Skip to content

Commit e68f733

Browse files
author
mrmrs
committed
Update some stuff about system fonts.
1 parent 5ac0527 commit e68f733

File tree

2 files changed

+42
-96
lines changed

2 files changed

+42
-96
lines changed

‎docs/typography/font-family/index.html

+21-48
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-
Font Family / Typography / Docs / TACHYONS
7+
font-family / 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">
1212
<link rel="stylesheet" href="/css/tachyons.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">font-family</h4>
4746
<span class="f4 b dib pl0 ml0 mr4">v4.1.0</span>
4847
<span class="f4 b dib pl0 ml0 mr4">217 B</span>
@@ -64,67 +63,41 @@ <h4 class="f4 mv0 fw6 dib mr4">font-family</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+
There are several pre-defined classes for setting the typeface of a page or element. It is suggested
68+
that you customize or extend this module to suit your own needs. As tachyons is a toolkit for designing
69+
performant webpages it comes with a variety of font stacks that utilize attractive system fonts with appropriate fallbacks.
70+
</p>
71+
<p class="measure f5 f4-ns lh-copy">
72+
Whlie systems fonts greatly improves performance, it can also help
73+
your web application/site blend in with the surrounding browser and operating
74+
system to create a more fluid reading experience and allowing your users to
75+
focus on your content.
76+
</p>
6777
</article>
6878
<div class="ph3 ph5-ns pt4 pb5">
6979
<h2 class="f3 bold">Examples</h2>
70-
<h3 class="f5 book sans-serif pt4 caps">Sans Serif (Avenir Next)</h3>
71-
<p class="sans-serif lh-copy measure">
80+
<h3 class="f5 book sans-serif pt4 caps">Default System Sans Serif</h3>
81+
<p class="system-sans-serif lh-copy measure">
7282
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
7383
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
7484
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
7585
no sea takimata sanctus est Lorem ipsum dolor sit amet.
7686
</p>
77-
<h3 class="f5 book sans-serif pt4 caps">Helvetica</h3>
78-
<p class="helvetica lh-copy measure">
87+
<h3 class="f5 book sans-serif pt4 caps">Default System Sans Serif</h3>
88+
<p class="system-serif lh-copy measure">
7989
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
8090
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
8191
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
8292
no sea takimata sanctus est Lorem ipsum dolor sit amet.
8393
</p>
84-
<h3 class="f5 book sans-serif pt4 caps">Serif (Garamond)</h3>
85-
<p class="serif lh-copy measure">
94+
<h3 class="f5 book sans-serif pt4 caps">System Sans Serif with Fallbacks</h3>
95+
<p class="sans-serif lh-copy measure">
8696
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
8797
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
8898
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
8999
no sea takimata sanctus est Lorem ipsum dolor sit amet.
90100
</p>
91-
<h3 class="f5 book sans-serif pt4 caps mbn">Code (Consolas)</h3>
92-
<p class="code lh-copy measure">
93-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
94-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
95-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
96-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
97-
</p>
98-
<h3 class="f5 book sans-serif pt4 caps">Bodoni</h3>
99-
<p class="bodoni lh-copy measure">
100-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
101-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
102-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
103-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
104-
</p>
105-
<h3 class="f5 book sans-serif pt4 caps">Calisto</h3>
106-
<p class="calisto lh-copy measure">
107-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
108-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
109-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
110-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
111-
</p>
112-
<h3 class="f5 book sans-serif pt4 caps">Garamond</h3>
113-
<p class="garamond lh-copy measure">
114-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
115-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
116-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
117-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
118-
</p>
119-
<h3 class="f5 book sans-serif pt4 caps">Times</h3>
120-
<p class="garamond lh-copy measure">
121-
<p class="times lh-copy measure">
122-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
123-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
124-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
125-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
126-
</p>
127-
128101
<div class="mt5 cf">
129102
<div class="dib mr4">
130103
<h1 class="f4 ttu tracked fw6">Previous</h1>

‎src/templates/docs/font-family/index.html

+21-48
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-
Font Family / 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">
1212
<link rel="stylesheet" href="/css/tachyons.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,67 +36,41 @@ <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+
There are several pre-defined classes for setting the typeface of a page or element. It is suggested
41+
that you customize or extend this module to suit your own needs. As tachyons is a toolkit for designing
42+
performant webpages it comes with a variety of font stacks that utilize attractive system fonts with appropriate fallbacks.
43+
</p>
44+
<p class="measure f5 f4-ns lh-copy">
45+
Whlie systems fonts greatly improves performance, it can also help
46+
your web application/site blend in with the surrounding browser and operating
47+
system to create a more fluid reading experience and allowing your users to
48+
focus on your content.
49+
</p>
4050
</article>
4151
<div class="ph3 ph5-ns pt4 pb5">
4252
<h2 class="f3 bold">Examples</h2>
43-
<h3 class="f5 book sans-serif pt4 caps">Sans Serif (Avenir Next)</h3>
44-
<p class="sans-serif lh-copy measure">
53+
<h3 class="f5 book sans-serif pt4 caps">Default System Sans Serif</h3>
54+
<p class="system-sans-serif lh-copy measure">
4555
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
4656
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
4757
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
4858
no sea takimata sanctus est Lorem ipsum dolor sit amet.
4959
</p>
50-
<h3 class="f5 book sans-serif pt4 caps">Helvetica</h3>
51-
<p class="helvetica lh-copy measure">
60+
<h3 class="f5 book sans-serif pt4 caps">Default System Sans Serif</h3>
61+
<p class="system-serif lh-copy measure">
5262
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
5363
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
5464
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
5565
no sea takimata sanctus est Lorem ipsum dolor sit amet.
5666
</p>
57-
<h3 class="f5 book sans-serif pt4 caps">Serif (Garamond)</h3>
58-
<p class="serif lh-copy measure">
67+
<h3 class="f5 book sans-serif pt4 caps">System Sans Serif with Fallbacks</h3>
68+
<p class="sans-serif lh-copy measure">
5969
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
6070
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
6171
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
6272
no sea takimata sanctus est Lorem ipsum dolor sit amet.
6373
</p>
64-
<h3 class="f5 book sans-serif pt4 caps mbn">Code (Consolas)</h3>
65-
<p class="code lh-copy measure">
66-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
67-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
68-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
69-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
70-
</p>
71-
<h3 class="f5 book sans-serif pt4 caps">Bodoni</h3>
72-
<p class="bodoni lh-copy measure">
73-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
74-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
75-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
76-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
77-
</p>
78-
<h3 class="f5 book sans-serif pt4 caps">Calisto</h3>
79-
<p class="calisto lh-copy measure">
80-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
81-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
82-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
83-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
84-
</p>
85-
<h3 class="f5 book sans-serif pt4 caps">Garamond</h3>
86-
<p class="garamond lh-copy measure">
87-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
88-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
89-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
90-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
91-
</p>
92-
<h3 class="f5 book sans-serif pt4 caps">Times</h3>
93-
<p class="garamond lh-copy measure">
94-
<p class="times lh-copy measure">
95-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
96-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
97-
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
98-
no sea takimata sanctus est Lorem ipsum dolor sit amet.
99-
</p>
100-
10174
<div class="mt5 cf">
10275
<div class="dib mr4">
10376
<h1 class="f4 ttu tracked fw6">Previous</h1>

0 commit comments

Comments
 (0)