Add Typography Fonts Docs

trilbymedia · Aug 23, 2017 · e5ae885 · e5ae885
1 parent 72834a9
commit e5ae885
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 3 deletions.
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -475,12 +475,14 @@ kbd {
   background: #454d5d;
   border-radius: .1rem;
   color: #fff;
+  line-height: 1;
   padding: .15rem .2rem;
 }
 mark {
   background: #ffe9b3;
   border-radius: .1rem;
   color: #454d5d;
+  line-height: 1;
   padding: .15rem .2rem;
 }
 blockquote {
@@ -1242,7 +1244,7 @@ code {
   border-radius: .1rem;
   color: #e06870;
   font-size: .65rem;
-  line-height: 1rem;
+  line-height: 1;
   padding: .15rem .2rem;
 }
 .code {

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/elements.html b/docs/elements.html
@@ -407,6 +407,25 @@ <h6>Korean</h6>
 <!-- east asian example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;&lt;<span class="tag">u</span>&gt;祇園&lt;<span class="tag">/u</span>&gt;&lt;<span class="tag">u</span>&gt;精舎&lt;<span class="tag">/u</span>&gt;の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
 &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;&lt;<span class="tag">del</span>&gt;祇園&lt;<span class="tag">/del</span>&gt;&lt;<span class="tag">del</span>&gt;精舎&lt;<span class="tag">/del</span>&gt;の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
+</code></pre>
+
+          <h4 id="typography-fonts" class="s-subtitle">Fonts</h4>
+          <div class="docs-note">
+            <p>Spectre sets the most common and best <code>font-family</code> for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.</p>
+          </div>
+
+<!-- fonts -->
+<pre class="code"><code><span class="com">&lt;!-- Western typography targeted --&gt;</span>
+<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif</span>;
+<span class="com">&lt;!-- Monospace typography targeted --&gt;</span>
+<span class="atn">font-family</span>: <span class="atv">"SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace</span>;
+
+<span class="com">&lt;!-- Chinese typography targeted --&gt;</span>
+<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif</span>;
+<span class="com">&lt;!-- Japanese typography targeted --&gt;</span>
+<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif</span>;
+<span class="com">&lt;!-- Korean typography targeted --&gt;</span>
+<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif</span>;
 </code></pre>
 
           <h4 id="typography-blockquote" class="s-subtitle">Blockquote</h4>

diff --git a/src/codes.less b/src/codes.less
@@ -3,7 +3,6 @@ code {
   font-size: .65rem;
   .label-base();
   .label-variant(@code-color, lighten(@code-color, 33%));
-  line-height: @line-height;
 }
 
 .code {

diff --git a/src/mixins.less b/src/mixins.less
@@ -34,6 +34,7 @@
 // Label base style
 .label-base() {
   border-radius: @border-radius;
+  line-height: 1;
   padding: .15rem .2rem;
 }