-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathparasync.html
57 lines (43 loc) · 2.47 KB
/
parasync.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
<!DOCTYPE html>
<html lang="en" >
<!-- Parasync -- drag parametric fonts onto drop zone and compare with other parametric fonts -->
<head>
<meta charset="UTF-8">
<title>ParaSync</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="container">
<div class="panel title">
<div class="reset" title="Reset to ParaSync defaults"></div>
<h2>ParaSync</h2>
<h3>Parametric font comparison tool</h3>
<div id="sliders"></div>
<p><b>Useful links</b></p>
<li><a href="https://github.com/Lorp/parasync">GitHub: ParaSync</a></li>
<li><a href="https://variationsguide.typenetwork.com/">Type Network Variations Guide</a></li>
<li><a href="https://github.com/microsoft/OpenTypeDesignVariationAxisTags/blob/master/Proposals/TypeNetwork_ParametricAxes/Overview.md">GitHub: Type Network Parametric Axes Proposal</a></li>
<p>ParaSync does not transmit drag-drop fonts beyond your computer.</p>
</div>
<div class="panel fontbox">
<div class="reset" title="Reset parametric axes to this font’s defaults"></div>
<h2>$FONTNAME$</h2>
<h3>$FILENAME$</h3>
<div class="sample large" contenteditable>
Haxgh
</div>
<div class="sample medium" contenteditable>
AaHhGgQq19
</div>
<div class="sample small" contenteditable>
Variable fonts are a new type of TrueType/OpenType font that allows an entire typeface family to be packaged as one small and powerful file. The font maker creates a small number of “master designs”, representing the key design stages of the typeface, leaving the generation of all the in-between fonts to the font rendering system. By embedding a Thin master and a Fat master in a single variable font, and also storing a number representing where each master sits on on a “weight axis”, we get thousands of intermediate-weight fonts for free, all of them mathematically interpolated from the masters. A “width axis” works similarly, letting the user summon everything from Condensed to Expanded. Multiple axes work together, so we get Narrow Thin, Expanded Semibold and literally millions of other variants. The user is free to choose any of the possible axis settings, but to keep things manageable the fontmaker gives friendly names to recommended settings — so-called “Named Instances”.
</div>
</div>
<div class="panel dragdrop">
<h2>Drop parametric fonts here</h2>
<form><input id="dropzone" type="file" multiple></form>
</div>
</div>
<script type="module" src="./script.js"></script>
</body>
</html>