-
Notifications
You must be signed in to change notification settings - Fork 4
/
Jost.html
110 lines (108 loc) · 7.75 KB
/
Jost.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<title>Jost*</title>
<link rel="shortcut icon" href="assets/Favicon.png">
<link rel="icon" type="image/png" href="assets/Favicon.png">
<meta name="robots" content="index, nofollow">
<link rel="stylesheet" href="fonts/fonts.css" type="text/css" charset="utf-8" />
<link rel='stylesheet' href='Jost/style.css'/>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<script src="https://www.gstatic.com/firebasejs/5.8.0/firebase.js"></script>
<script src="Jost/jquery.min.js"></script>
<script>
$(function(){
$('#Slideshow img:gt(0)').hide();
setInterval(function(){$('#Slideshow :first-child').fadeOut().next('img').fadeIn().end().appendTo('#Slideshow');}, 5000);
});
$(document).ready(function () {
var selectcounter = 1;
$(".selectable").each(function() {
idja = "selectable" + selectcounter;
$(this).attr('id', idja);
$(this).attr('onclick', 'selectText("' + idja + '")');
selectcounter++;
});
});
function selectText(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
}
}
</script>
</head>
<div id="webnotice" class="webnotice">
Hey! This page uses OpenType variable fonts, which are only supported in the latest versions of Firefox, Google Chrome, and Safari. To view this page properly open it in a supported browser.
</div>
<body>
<h5><a class="a" href="Home.html">indestructible type<span>*</span></a></h5>
<h1 contenteditable="true" id="title">Jost<span class="red">*</span><h1>
<div id="webice">
<h2 id="disweight"><br>weight: book</h2>
<div id="eyballs"></div>
<input class="slider" id="wght" type="range" min="100" max="900" value="400">
<h2 id="disitalic">italic: 0%</h2>
<div id="eyballs"></div>
<input class="slider" style="background-image: -webkit-gradient( linear, left top, right top, color-stop(0.001, #666666), color-stop(0.001, rgba(0,0,0,0)))" id="italic" type="range" min="0" max="200" value="0"><br></div>
<h2 id="webnotice"><i>Perpetually Modern</i></h2>
<br><br><br><br><br><br>
<div id="Slideshow">
<img src="Jost/1.svg">
<img src="Jost/2.svg">
<img src="Jost/3.svg">
<img src="Jost/4.svg">
<img src="Jost/5.svg">
</div>
<h2 contenteditable="true">about</h2>
<p contenteditable="true"><b>WHAT’S NEW</b><br>
This is version 3.5, which includes a number of fixes. The most significant is the addition of several mathematical symbols including the radical symbol and the infinity symbol. There is also increased language support.
</p><br><br><br>
<p contenteditable="true"><b>A MODERN MASTERPIECE</b><br>
When Paul Renner designed Futura in 1927 it looked chic and ahead of its time. The great design is due, in part, to Heinrich Jost, who was instrumental in realizing Paul Renner’s ideas. Futura is dazzling in its simplicity, welcoming in its rationality. It’s simple and beautiful. Many fonts find the spotlight for a time, but Futura has remained as relevant and innovative as it was when it was created 90 years ago.
</p><br><br><br>
<p contenteditable="true"><b>A TRIBUTE FOR THE DIGITAL ERA</b><br>
Jost* aims to keep the attitude of Futura rather than the exact design. Futura was designed to be functional in its day, and in that spirit, Jost* aims to be as functional as possible in the digital era. For that reason it deviates from the exact designs of Paul Renner, favoring, for example, a larger x-height or more balanced capital forms. It also includes some features which would not have been possible in the era of Futura.
</p><br><br><br>
<h2 contenteditable="true">features</h2>
<p contenteditable="true"><b>NINE WEIGHTS</b><br>
Jost* doesn't just come with a book and <span style="font-weight: bold;">bold</span> weight. As of version 3.0 there are now a staggering nine weights. This doesn’t just make it handy in its expressiveness, it also allows it to adapt to all manner of context and media.
</p><br><img src="Jost/weight.svg">
<br><br><br><br><br>
<p contenteditable="true"><b>EXTENDED CHARACTER SET</b><br>
Jost* has hundreds of characters and supports over 50 languages including Russian. It also includes fractions and unusual punctuation such as the interrobang.
</p><br><img src="Jost/char.svg">
<br><br><br><br><br>
<p contenteditable="true"><b>ALTERNATE CHARACTER SETS</b><br>
Do you miss the single story lowercase "a" of Futura? No worries! Jost* comes with a stylistic alternative for its "a" giving you the best of both worlds. Jost* also comes with tabular numbers in addition to the default proportional numbers.
</p><br><img src="Jost/tabs.svg">
<br><br><br><br><br>
<p contenteditable="true"><b>VARIABLE FONT TECHNOLOGY</b><br>
The latest release of Jost* supports OpenType variable font technology! Loading the variable font version of Jost* into a program such as Adobe Photoshop will allow you to precisely control the weight and italic angle of the font, giving you control like never before. Because this is a new technology that takes considerable time and energy to build, the completed variable font version of Jost* is available for a minimum of $10. The static version with 9 weights is still available for free and the <a contenteditable="false" href="https://github.com/indestructible-type/Jost" class="red">source code for the variable font version</a> is free to download and comes with instructions on building it yourself.
</p><br><br><br>
<p contenteditable="true"><b>EASY WEB USE</b><br>
Want to use Jost* on your website? indestructible type* now offers free and easy webfont hosting. Simply copy and paste the following code into the <span id="mono"><head></span> of your website and use <span id="mono">font-family: 'Jost';</span> in your css. The best part is that as I continue to develop and update Jost*, your website will reflect these changes with no extra work from you.
</p><br><h4 class="selectable"><link rel="stylesheet" href="https://indestructibletype.com/fonts/Jost.css" type="text/css" charset="utf-8" /></h4><br><br><br>
<p contenteditable="true"><b>ALWAYS IMPROVING</b><br>
Jost* is now at version 3.5, meaning this font has been worked and reworked since its inception. Many of the changes and improvements have come directly from the community. If there are ways that you think Jost* can be improved, <a contenteditable="false" href="https://github.com/indestructible-type/Renner/issues" class="red">reach out</a> and maybe Jost* 3.6 will include that feature or fix.
</p><br><br><br>
<h2 contenteditable="true">not convinced?</h2>
<p contenteditable="true"><b>TEST JOST* OUT</b><br>
You can test Jost* out by editing paragraphs on this webpage. You can also edit the text below. Most of this website is editable! Click around to try Jost* out!</p>
<br><input type="text" value="Try me out!"></p><br><br><br>
<p contenteditable="true"><b>DOWNLOAD</b><br>
Or, if you like, download and try it out! You don't have to pay anything if you don't want to! You can always come back and pay what you think it's worth.</p>
<br><br><br>
<a contenteditable="false" href="BuyJost.html"><span class="button">download</span></a>
<br><br><br>
<h3>*</h3>
<br>
<a class="a" href="Home.html">created by indestructible type<span>*</span></a>
<script src="Jost/sliders.js"></script>
</body>
</html>