-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
89 lines (84 loc) · 5.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Baseline</title>
</head>
<link href="./public/css/main.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata|Lato:100,300,400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body class="show-grid">
<nav>
<div class="container"><span class="brand">BASE<span class="txt-blue">LINE</span></span>
<div id='nav-btns'>
<span id="toggle-grid" class="btn">Hide grid</span>
<a href="https://github.com/shalanah/shalanah.github.io" target="_blank" class="btn">Github</a>
</div>
</div>
</nav>
<main class="container">
<h1 class="baseline"><span>BASE</span><span class="txt-blue">LINE</span></h1>
<h2 class="baseline"><span>Creating vertical rhythm on the web</span></h2>
<h3 class="baseline"><span>Welcome typophiles.</span>
</h3>
<p class="baseline">
<span>If you truely need baseline in your web design, this is a very simple cross-browser friendly method with very little math. It is not font-dependent and you can even mix and match fonts within a paragraph. No searching through font metrics or tweaking CSS values by hand. No javascript or javascript dependencies needed. Use whatever units of measure you want: pts, pxs, rems... it's up to you.</span>
</p>
<h2 class="baseline"><span>Step 1.</span></h2>
<h3 class="baseline"><span>Create or use a baseline font</span></h3>
<p class="baseline">
<span>This task is pretty painless, thanks to FontSquirrel's awesome generator. You can also skip this whole task and use my one character baselined utility font <a href='https://github.com/shalanah/baseline/tree/master/BaselineEm' target="_blank">Baseline Em</a>.</span></p>
<p class="baseline"><span>Essentially we are shifting our em-height metrics such that our descender is not below our baseline.</span></p>
<ul>
<li class="baseline"><span>Go to <a href="https://www.fontsquirrel.com/tools/webfont-generator" target="_blank">FontSquirrel Generator</a></span></li>
<li class="baseline"><span>Click on <span class="single-out">"EXPERT..."</span> mode</span>
</li>
<li class="baseline"><span>Under <strong>"Vertical Metrics"</strong>, select <span class="single-out">Custom Alignment</span></span>
</li>
<li class="baseline"><span>Set your custom alignment* to: <span class="single-out">Ascent: 2048</span> , <span class="single-out">Descent: 0</span>, <span class="single-out">LineGap: 0</span></span>
</li>
<li class="baseline"><span>Download your kit and include font files.</span></li>
</ul>
<h2 class="baseline"><span>Step 2.</span></h2>
<h3 class="baseline"><span>The Markup</span></h3>
<p class="baseline">
<span>For each block text element – h1, h2, h3, h4, p, etc – you will need an encapsulating inline-element.</span></p>
<pre class="baseline"><code><span> <p> <span class="comment"><!-- Block element --></span>
<span> <span class="comment"><!-- Encapsulating inline-element --></span>
Leave it better than you found it. -Robert Baden-Powell
</span>
</p>
</span></code></pre>
<h2 class="baseline"><span>Step 3.</span></h2>
<h3 class="baseline"><span>The CSS</span></h3>
<p class="baseline">
<span>To achieve vertical rhythm and leading on the web, we want our fonts to sit at the bottom of our line-height. We set our block's font size to a multiple of the grid and the line-height to match it. Using our baselined font on the block-level element will force our baselines to the bottom of our line-height. Then we collapse the line-height (setting it to zero) of any text within our inline element. Set your inline elements to whatever font or font-size you'd like.</span>
</p>
<pre class="baseline"><code><span> p {
font-family: "Baseline Em"; <span class="comment">/* Baseline font for block containers */</span>
font-size: 40px; <span class="comment">/* Multiple of your grid */</span>
line-height: 1em; <span class="comment">/* Line-height matches set font-size */</span>
}
p * {
line-height: 0; <span class="comment">/* Collapses our inline box so our line box is our strut from the paragraph */</span>
}
p span {
font-family: Anything you want here;
font-size: Anything you want here; <span class="comment">/* works best if less than 2x your block's line-height */</span>
}
</span></code></pre>
<h2 class="baseline"><span>Update!</span></h2>
<h3 class="baseline"><span>Coming soon</span></h3>
<p class="baseline"><span>Working on a full write-up as to how this works :) .</span></p>
<h2 class="baseline"><span>Thanks!</span></h2>
<h3 class="baseline"><span>Shout-outs</span></h3>
<p class="baseline"><span><strong>FontSquirrel</strong>: I have to thank FontSquirrel for making such an awesome tool! Major props to them. I would also love to buy your merch if you sold <a href="http://www.sanmar.com/sanmar-servlets/CatalogBrowser?id=12013558&parentId=&catid=&top=Y&swatch=Vintage+Iris&av=0&prodimage=imglib/catl/2016/f4/AA5054_vintageiris_model_front_022016.jpg&imagesearch=yes" target="_blank">lady tanks in purple</a> (*hint, *hint)</span>
</p>
<p class="baseline"><span><strong>Dropcap / strut method inventor</strong>: I wish I knew who first came up with this method, but <a href="http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/" target="_blank">here it is detailed by Alan Stearns.</a></span>
</p>
<p class="baseline"><span><strong>White House Custom Colour</strong>: The projects I get to work on are interesting and complex. As a company, their committment to quality and technology inspired this investigation, and I am excited to use it on future products.</span>
</p>
</main>
<script src="public/js/main.js"></script>
</body>
</html>