Add all new font files.
This commit is contained in:
20xd6
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 415 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 456 KiB |
+1
@@ -0,0 +1 @@
|
||||
../dist/
|
||||
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TT2020 | More Information</title>
|
||||
<style>img{width:42em}</style>
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>DOWNLOAD.</h2>
|
||||
<p>
|
||||
<a href="https://github.com/ctrlcctrlv/TT2020/archive/master.zip">Download all fonts & documentation</a>, or:
|
||||
</p>
|
||||
<h2><span style="color:rgba(1,1,1,0)">̌</span>DOWNLOAD INDIVI<span style="color:rgba(1,1,1,0)">̌</span>DUAL STYLES.</h2>
|
||||
<p>
|
||||
In general, the TTF is most useful. However, if you will be using my fonts on your website, use the WOFF2 to save on your bandwidth bill. :-)
|
||||
</p>
|
||||
<p>
|
||||
All of the fonts on this page are licensed under the <a href="https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL#5667e9e4">SIL Open Font License</a>, version 1.1.<br/>
|
||||
These documentation pages are licensed under the <a href="https://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a>.
|
||||
</p>
|
||||
|
||||
<!-- === Begin output from fonts.sh === -->
|
||||
<h2>Base Style</h2>
|
||||
<h3>Regular</h3>
|
||||
<img src="TT2020Base-Regular.png">
|
||||
<a href="../dist/TT2020Base-Regular.ttf">TT2020Base-Regular.ttf</a>
|
||||
164K<br/>
|
||||
<a href="../dist/TT2020Base-Regular.woff2">TT2020Base-Regular.woff2</a>
|
||||
64K<br/>
|
||||
<h3>Italic</h3>
|
||||
<img src="TT2020Base-Italic.png">
|
||||
<a href="../dist/TT2020Base-Italic.ttf">TT2020Base-Italic.ttf</a>
|
||||
72K<br/>
|
||||
<a href="../dist/TT2020Base-Italic.woff2">TT2020Base-Italic.woff2</a>
|
||||
32K<br/>
|
||||
<h2>Style B</h2>
|
||||
<h3>Regular</h3>
|
||||
<img src="TT2020StyleB-Regular.png">
|
||||
<a href="../dist/TT2020StyleB-Regular.ttf">TT2020StyleB-Regular.ttf</a>
|
||||
3.5M<br/>
|
||||
<a href="../dist/TT2020StyleB-Regular.woff2">TT2020StyleB-Regular.woff2</a>
|
||||
1.9M<br/>
|
||||
<h3>Italic</h3>
|
||||
<img src="TT2020StyleB-Italic.png">
|
||||
<a href="../dist/TT2020StyleB-Italic.ttf">TT2020StyleB-Italic.ttf</a>
|
||||
4.2M<br/>
|
||||
<a href="../dist/TT2020StyleB-Italic.woff2">TT2020StyleB-Italic.woff2</a>
|
||||
1.9M<br/>
|
||||
<h2>Style D</h2>
|
||||
<h3>Regular</h3>
|
||||
<img src="TT2020StyleD-Regular.png">
|
||||
<a href="../dist/TT2020StyleD-Regular.ttf">TT2020StyleD-Regular.ttf</a>
|
||||
2.9M<br/>
|
||||
<a href="../dist/TT2020StyleD-Regular.woff2">TT2020StyleD-Regular.woff2</a>
|
||||
844K<br/>
|
||||
<h3>Italic</h3>
|
||||
<img src="TT2020StyleD-Italic.png">
|
||||
<a href="../dist/TT2020StyleD-Italic.ttf">TT2020StyleD-Italic.ttf</a>
|
||||
3.7M<br/>
|
||||
<a href="../dist/TT2020StyleD-Italic.woff2">TT2020StyleD-Italic.woff2</a>
|
||||
1.4M<br/>
|
||||
<h2>Style E</h2>
|
||||
<h3>Regular</h3>
|
||||
<img src="TT2020StyleE-Regular.png">
|
||||
<a href="../dist/TT2020StyleE-Regular.ttf">TT2020StyleE-Regular.ttf</a>
|
||||
3.3M<br/>
|
||||
<a href="../dist/TT2020StyleE-Regular.woff2">TT2020StyleE-Regular.woff2</a>
|
||||
1.8M<br/>
|
||||
<h3>Italic</h3>
|
||||
<img src="TT2020StyleE-Italic.png">
|
||||
<a href="../dist/TT2020StyleE-Italic.ttf">TT2020StyleE-Italic.ttf</a>
|
||||
4.1M<br/>
|
||||
<a href="../dist/TT2020StyleE-Italic.woff2">TT2020StyleE-Italic.woff2</a>
|
||||
1.8M<br/>
|
||||
<h2>Style F</h2>
|
||||
<h3>Regular</h3>
|
||||
<img src="TT2020StyleF-Regular.png">
|
||||
<a href="../dist/TT2020StyleF-Regular.ttf">TT2020StyleF-Regular.ttf</a>
|
||||
84M<br/>
|
||||
<a href="../dist/TT2020StyleF-Regular.woff2">TT2020StyleF-Regular.woff2</a>
|
||||
31M<br/>
|
||||
<a href="../dist/TT2020StyleF-Regular-ASCII.ttf">TT2020StyleF-Regular-ASCII.ttf</a>
|
||||
9.0M<br/>
|
||||
<a href="../dist/TT2020StyleF-Regular-ASCII.woff2">TT2020StyleF-Regular-ASCII.woff2</a>
|
||||
3.4M<br/>
|
||||
<h2>Style G</h2>
|
||||
<h3>Regular</h3>
|
||||
<img src="TT2020StyleG-Regular.png">
|
||||
<a href="../dist/TT2020StyleG-Regular.ttf">TT2020StyleG-Regular.ttf</a>
|
||||
96M<br/>
|
||||
<a href="../dist/TT2020StyleG-Regular.woff2">TT2020StyleG-Regular.woff2</a>
|
||||
19M<br/>
|
||||
<a href="../dist/TT2020StyleG-Regular-ASCII.ttf">TT2020StyleG-Regular-ASCII.ttf</a>
|
||||
11M<br/>
|
||||
<a href="../dist/TT2020StyleG-Regular-ASCII.woff2">TT2020StyleG-Regular-ASCII.woff2</a>
|
||||
2.3M<br/>
|
||||
<!-- End output from fonts.sh -->
|
||||
</p>
|
||||
<hr>
|
||||
<p>Content © Fredrick R. Brennan, originally released on 1 January 2020</p>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
Executable
+46
@@ -0,0 +1,46 @@
|
||||
#!/bin/bash
|
||||
echo '<!-- === Begin output from fonts.sh === -->'
|
||||
for f in ../dist/*.ttf;
|
||||
do
|
||||
s='../dist/'
|
||||
r=""
|
||||
ff=${f/$s/$r}
|
||||
fs=${ff/%\.ttf/$r}
|
||||
if [[ $fs =~ "ASCII" || $fs =~ "Italic" ]]; then continue; fi
|
||||
STYLE=`echo $fs | sed -E -e 's/.*Style([A-Za-z0-9])+-.*/\1/'`
|
||||
|
||||
if [[ ${#STYLE} -eq 1 ]]; then
|
||||
echo "<h2>Style $STYLE</h2>"
|
||||
else
|
||||
echo "<h2>Base Style</h2>"
|
||||
fi
|
||||
|
||||
filesize() {
|
||||
printf `du -h "$1" | cut -f1`
|
||||
printf "<br/>"
|
||||
printf "\n"
|
||||
}
|
||||
|
||||
H3="<h3>Regular</h3>"
|
||||
echo $H3;
|
||||
convert -font "$f" -pointsize 288 label:'Beekeepers QqGgRrAa\nMMMM ЖЖЖЖ אאאלף' "$fs".png
|
||||
echo "<img src=\"""$fs".png"\">"
|
||||
VAR='<a href="'$f'">'$ff'</a>'
|
||||
echo $VAR;
|
||||
filesize "${f}"
|
||||
WOFF2="${VAR//ttf/woff2}";
|
||||
echo $WOFF2;
|
||||
|
||||
|
||||
filesize "${f//ttf/woff2}"
|
||||
if [[ -f "${f/Regular/Italic}" ]]; then
|
||||
convert -font "${f/Regular/Italic}" -pointsize 288 label:'Beekeepers QqGgRrAa\nMMMM ЖЖЖЖ אאאלף' "${fs/Regular/Italic}".png
|
||||
echo "${H3/Regular/Italic}";
|
||||
echo "<img src=\"""${fs/Regular/Italic}".png"\">"
|
||||
echo "${VAR//Regular/Italic}"; filesize "${f/Regular/Italic}"; echo "${WOFF2//Regular/Italic}"; W2="${f/Regular/Italic}"; W2="${W2//ttf/woff2}"; filesize $W2;
|
||||
|
||||
fi
|
||||
if [[ -f "${f/Regular/Regular-ASCII}" ]]; then echo "${VAR//Regular/Regular-ASCII}"; filesize "${f/Regular/Regular-ASCII}"; echo "${WOFF2//Regular/Regular-ASCII}"; W2="${f/Regular/Regular-ASCII}"; W2="${W2//ttf/woff2}"; filesize $W2; fi
|
||||
|
||||
done
|
||||
echo '<!-- End output from fonts.sh -->'
|
||||
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TT2020</title>
|
||||
<style type="text/css">
|
||||
|
||||
@keyframes spincube {
|
||||
from,to { transform: rotateX(0deg) }
|
||||
25% { transform: rotateX(90deg); }
|
||||
50% { transform: rotateX(180deg); }
|
||||
75% { transform: rotateX(270deg); }
|
||||
100% { transform: rotateX(360deg); }
|
||||
}
|
||||
|
||||
.cubespinner {
|
||||
animation-name: spincube;
|
||||
/*animation-timing-function: ease-in-out;*/
|
||||
animation-timing-function: cubic-bezier(1.0, 0.05, 0.05, 1.0);
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 25s;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
transform-origin: 0.655em 0.655em 0;
|
||||
}
|
||||
|
||||
.stage {
|
||||
width: 800px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.cubespinner div {
|
||||
width: 800px;
|
||||
position: absolute;
|
||||
border: 1px solid #ccc;
|
||||
background: rgba(255,255,255,1.0);
|
||||
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
|
||||
line-height: 120px;
|
||||
text-align: center;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.cubespinner .face1 {
|
||||
transform: translateZ(0.6em);
|
||||
}
|
||||
.cubespinner .face2 {
|
||||
transform: rotateY(90deg) translateZ(0.6em);
|
||||
}
|
||||
.cubespinner .face3 {
|
||||
transform: rotateY(0deg) rotateX(90deg) translateZ(0.6em);
|
||||
}
|
||||
.cubespinner .face4 {
|
||||
transform: rotateY(180deg) rotateZ(180deg) translateZ(0.6em);
|
||||
}
|
||||
.cubespinner .face5 {
|
||||
transform: rotateY(-90deg) rotateZ(90deg) translateZ(0.6em);
|
||||
}
|
||||
.cubespinner .face6 {
|
||||
transform: rotateX(-90deg) translateZ(0.6em);
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: TTE;
|
||||
src: url(dist/TT2020StyleE-Regular.woff2);
|
||||
}
|
||||
@font-face {
|
||||
font-family: TTD;
|
||||
src: url(dist/TT2020StyleD-Regular.woff2);
|
||||
}
|
||||
@font-face {
|
||||
font-family: TTB;
|
||||
src: url(dist/TT2020StyleB-Regular.woff2);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: TTB_ita;
|
||||
src: url(dist/TT2020StyleB-Italic.woff2);
|
||||
font-weight: normal;
|
||||
font-style: italic, oblique;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: TTF;
|
||||
src: url(dist/TT2020StyleF-Regular-ASCII.woff2);
|
||||
}
|
||||
@font-face {
|
||||
font-family: TTG;
|
||||
src: url(dist/TT2020StyleG-Regular-ASCII.woff2);
|
||||
}
|
||||
@font-face {
|
||||
font-family: TT;
|
||||
src: url(dist/TT2020Base-Regular.woff2);
|
||||
}
|
||||
|
||||
*{font-display:block}
|
||||
p{margin:0;margin-top:50px}
|
||||
body {font-family:TT;font-size:100px}
|
||||
h1{font-family:TTB;font-weight:normal;font-size:400px;text-align:center;margin-bottom:0px;margin-top:0px}
|
||||
hr{margin:15px}
|
||||
.slogan{text-align:center;font-family:TTB;line-height:1.15}
|
||||
em{font-family:TTB_ita;font-style:normal}
|
||||
.dl {text-align:center}
|
||||
.dl a:hover{font-family:TTB_ita;line-height:.9}
|
||||
|
||||
@media screen and (max-width: 1776px) {
|
||||
h1 {
|
||||
font-size:200px;
|
||||
}
|
||||
.dl { font-size:100px }
|
||||
.cubespinner div, .slogan {
|
||||
font-size:70px
|
||||
}
|
||||
.cubespinner, .stage {
|
||||
height:80px;
|
||||
width:450px;
|
||||
}
|
||||
.cubespinner div {
|
||||
height:80px;
|
||||
width:450px;
|
||||
line-height:80px;
|
||||
overflow:hidden;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 770px) {
|
||||
h1 {
|
||||
font-size:100px;
|
||||
}
|
||||
.dl { font-size:36px }
|
||||
.cubespinner div, .slogan {
|
||||
font-size:35px
|
||||
}
|
||||
.cubespinner, .stage {
|
||||
height:35px;
|
||||
width:250px;
|
||||
}
|
||||
.cubespinner div {
|
||||
height:35px;
|
||||
width:250px;
|
||||
line-height:35px;
|
||||
overflow:hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>TT2020-</h1>
|
||||
<div class="slogan">
|
||||
<div style="display:inline-block;vertical-align:0.2em">the</div>
|
||||
<div class="stage" style="display:inline-block">
|
||||
<div class="cubespinner">
|
||||
<div class="face1" style="font-family:TTF">advanced</div>
|
||||
<div class="face3" style="font-family:TTD">spontaneous</div>
|
||||
<div class="face4" style="font-family:TTG"><span>open source</span></div>
|
||||
<div class="face6" style="font-family:TTE">multilingual</div>
|
||||
</div>
|
||||
</div>
|
||||
<div><em>typewriter font family</em> for a new decade.</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="dl"><a href="download.html">Download</a> <a href="moreinfo.html">More Info</a></div>
|
||||
|
||||
<!--
|
||||
<p>TT2020 is an advanced, multilingual and free typewriter font family for a new decade.</p>
|
||||
<p>תת ה'תש"ף הוא продвинутый, многоязычный և անվճար γραμματοσειρά γραφομηχανής նոր տասնամյակի համար:</p>
|
||||
<p>MMMMMMMMMM ÑÑÑÑÑÑÑÑÑÑ $$$$$$$$$$ ?????????? <span style="font-feature-settings: 'frac'">88/33</span></p>-->
|
||||
<!--
|
||||
<span style="font-family:TTD;">
|
||||
<p>Mamma’s sisters, (nuns,) in a nunnery abide.</p>
|
||||
</span>
|
||||
<p>Mamma’s sisters, (nuns,) in a nunnery abide.</p>
|
||||
<span style="font-family:TTD;">
|
||||
<p>Matagal talaga ang buhay; kaya dapat tayo laging mag-enjoy.</p>
|
||||
<p>Nga deti në det të ndritshëm, Nga majë mali në majë mali</p>
|
||||
<p>Жук жужжит над абажуром, Жужжит жужелица, Жужжит, кружится.</p>
|
||||
<p>En tres tristes trastos tragaban trigo tres tristes tigres.</p>
|
||||
<p>¿Qué tigre trigaba más? Todos trigaban igual (sino yo).</p>
|
||||
</span>
|
||||
-->
|
||||
<p></p>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
tt=document.querySelector("h1")
|
||||
console.log(tt.innerHTML)
|
||||
var i=j=0;
|
||||
u=function(){
|
||||
i++;j++;
|
||||
if (i>10)i=0;
|
||||
tt.innerHTML=("<span style='color:white'>q</span>".repeat(i))+"TT2020-"
|
||||
tt.style.marginLeft = "-"+(i*0.548)+"em"
|
||||
|
||||
styles=new Array("TTB", "TTD", "TTE", "TTF", "TTG");
|
||||
s=Math.floor(j/20)%5
|
||||
tt.style.fontFamily=styles[s]
|
||||
}
|
||||
setInterval(u, 500)
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TT2020 | More Information</title>
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>THE PROBLEM.</h2>
|
||||
<p>
|
||||
Most typewriter fonts out there are hopelessly unrealistic—especially the popular freeware ones, most of them made in the early 2000’s.
|
||||
</p>
|
||||
<p>
|
||||
What's worse, the typewriter is now so old that many (mostly young) people don't even <em>know</em> that the output is unrealistic!!
|
||||
</p>
|
||||
<p>
|
||||
The main problem is that an analog typewriter is incapable of producing the same output every time. Even the IBM Selectric, one of the most mechanically sophisticated typewriters ever produced, is incapable of doing this. However, most people are not trying to imitate an IBM Selectric; instead they are trying to imitate much older typewriters such as the Underwood №5.
|
||||
</p>
|
||||
<p>
|
||||
I had the idea for this font for a while, but bearing in mind how much work it would be to recreate, and how many other projects I had to do, I put it off & put it off. Then, one day in Q4 2019, I saw <em>Joker</em>, a very popular film. At the climax of the film, the eponymous Joker is reading typewritten documents.
|
||||
</p>
|
||||
<p>
|
||||
<img src="problem1.jpg">
|
||||
</p>
|
||||
<p>
|
||||
<img src="problem2.jpg">
|
||||
</p>
|
||||
<p>
|
||||
The absurd lack of realism displayed here let me know that I could put this project off no longer. In case you don't see anything wrong, let me try to help:
|
||||
<ul>
|
||||
<li>The letters are of different sizes in the first image. That, quite simply, would never happen. Only at the end of the era did typewriters even have changable type elements (“fonts”), certainly the typewriter clumsily being imitated here wouldn't have had them. Look especially at the word «was», that huge ‹a› is completely unrealistic.</li>
|
||||
<li>In the second image, there are three ‹N›’s. Yet, they all look exactly the same. A real typewriter can, quite rarely, have one of its letters damaged, or misaligned, such that that letter regularly makes an inferior strike to all the other letters. However, this degree of regularity is <em>impossible</em>; could Underwood or Remington have acheived it, they would have leapt for joy. It is therefore clearly a digital facsimile and not a real typewritten document.
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
If you still can't see it, as <a href="https://www.reddit.com/r/typography/comments/ei3gr7/tt2020_is_an_advanced_open_source_hyperrealistic/fcnw7kv/">u/Bureaucrat_Conrad on Reddit</a> wasn't able to, simply compare the images in the movie to an old-school typewriter font, <a href="https://www.1001fonts.com/carbontype-font.html">CarbonType</a>, © 2004 Vic Fieger, which has one glyph per character:<br>
|
||||
<img src="problem4.png" style="width:20em">
|
||||
<img src="problem2.jpg" style="width:20em">
|
||||
</p>
|
||||
<p>
|
||||
It is abundantly clear that this is the font they used, and no typewriter was involved in the production of this scene, even though the documents were the primary object of the scene.
|
||||
</p>
|
||||
<p>While working on the project, incredibly, another bad typewriter scene intruded upon my life. I don't often sit around and watch movies, so I suppose there are only two possibilities:
|
||||
<ol type="a">
|
||||
<li> There are so many of these unrealistic typewritten documents in late-2010’s cinema that almost any movie with a typewritten document in it will be hopelessly unrealistic, <em>or</em></li>
|
||||
<li> The universe, nay, God himself, was urging me on to complete this project in lieu of others I could finish!</li>
|
||||
</ol>
|
||||
</p>
|
||||
<p>Behold, <em>The Irishman</em> and its ‹W›’s:</p>
|
||||
<p>
|
||||
<img src="problem3.jpg">
|
||||
</p>
|
||||
<p>In case you still continue to doubt that I am right about how analog typewriter outlook appears, let me display below a sampling of it before I discuss my solution to this vexing issue.</p>
|
||||
<hr>
|
||||
<p>
|
||||
Notice especially the dissimilarity of the «a»’s—<br/>
|
||||
<img src="sampling1.jpg" width="720"><br/>
|
||||
(Image courtesy <a href="https://repository.tcu.edu/handle/116099117/25873">Texas Christian University—Mary Couts Burnett Library</a>)
|
||||
</p>
|
||||
<p>
|
||||
Notice especially the dissimilarity of the CAPITAL LETTERS—<br/>
|
||||
<img src="sampling2.jpg" width="720"><br/>
|
||||
(Image courtesy <a href="https://munk.org/typecast/2011/03/11/1920-underwood-5/">Theodore Munk</a>)
|
||||
<hr>
|
||||
<a href="moreinfo2.html">NEXT PAGE: »» My Solution »»</a>
|
||||
<hr>
|
||||
<p>Content © Fredrick R. Brennan, originally released on 1 January 2020</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TT2020 | More Information</title>
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>MY SOLUTION.</h2>
|
||||
<p>
|
||||
While it would be ideal for the font itself to contain code through which it could create a (near-) infinite number of similar-looking glyphs, that is not possible in an OpenType font.<sup style="position:absolute">†</sup> My first inspiration was <em>FF Duper</em>, a plucky little proprietary font developed by Martin Wenzel in 2009. <em>FF Duper</em>, however, works via hundreds of GSUB subtables; while I tried to follow Wenzel's lead in this regard, I eventually realized that for my font it was not going to be possible; the layout would be far too slow and the GSUB table far too large.
|
||||
</p>
|
||||
<p>The solution came to me after an IRC chat with my extremely patient friend Skef Iterum (thank you Skef). Instead of large tables and variable numbers of alternate glyphs, acquiesce, and include <em>n</em> (I decided on 9) versions of each glyph, even such glyphs as “space”. Then, define classes <em>@a1</em> through <em>@a9</em> which include a list of all glyphs in the font. For example, <em>@a2</em> begins as:<br>
|
||||
<code><em>@a2</em> = [space.2 exclam.2 quotedbl.2 numbersign.2 dollar.2 percent.2 ampersand.2 quotesingle.2 parenleft.2 parenright.2 asterisk.2plus.2 comma.2 hyphen.2 period.2 slash.2 zero.2 one.2 two.2 three. 2 four.2 five.2 six.2 seven.2 eight.2 nine.2 colon.2 semicolon.2 less.2 equal.2 greater.2 question.2 at.2 A.2 B.2 C.2 D.2 E.2 F.2 G.2 H.2 I.2 J.2 K.2 L.2 M.2 N.2 O.2 P.2 Q.2 …</code>
|
||||
|
||||
Having these classes, we can then do this:
|
||||
|
||||
<code>
|
||||
feature calt {<br/>
|
||||
lookup calt1 {<br/>
|
||||
sub @a1 @a1' by @a2;<br/>
|
||||
sub @a2 @a1' by @a3;<br/>
|
||||
sub @a3 @a1' by @a4;<br/>
|
||||
sub @a4 @a1' by @a5;<br/>
|
||||
sub @a5 @a1' by @a6;<br/>
|
||||
sub @a6 @a1' by @a7;<br/>
|
||||
sub @a7 @a1' by @a8;<br/>
|
||||
sub @a8 @a1' by @a9;<br/>
|
||||
} calt1;<br/>
|
||||
} calt;
|
||||
</code>
|
||||
|
||||
And do our layout with a single subtable! This is of course only pseudo-random, but it's, almost all of the time, “good enough,” and with a higher <em>n</em> hereon <em>m</em> it becomes more and more realistic. Perhaps, indeed, only popular glyphs would need have the full number of <em>m</em> versions; “unpopular” glyphs, when a version of index <em>i</em> is requested and <em>i</em> > <em>n</em>, the glyph could simply be a reference to the glyph of index <em>i</em> mod <em>n</em>.<br/>
|
||||
</p>
|
||||
<p>
|
||||
As it stands though, what we have is good enough for an initial version. The guts of the system only obviously spill out with carefully chosen inputs, e.g.:<br>
|
||||
<span style="font-size:4em;line-height:1.5em">QBEE<span style="color:#ee0000">K</span>E<span style="color:#0000ee">E</span>PINBEE<span style="color:#ee0000">K</span>E<span style="color:#0000ee">E</span>PIN </span>
|
||||
</p>
|
||||
<p>
|
||||
<img src="ff.png" style="width:42em">
|
||||
</p>
|
||||
<p>
|
||||
The letters highlighted in red and blue are the same because they are nine characters apart. The computer tokenizes the string to glyph-names as <em>Q B.2 E.3 E.4 <span style="color:#ee0000">K.5</span> E.6 <span style="color:#0000ee">E.7</span> P.8 I.9 N B.2 E.3 E.4 <span style="color:#ee0000">K.5</span> E.6 <span style="color:#0000ee">E.7</span> P.8 I.9 N</em>.
|
||||
</p>
|
||||
<p>
|
||||
Each distinct font style is built from a base font and a base SFD; for the regular style, <em>TT.sfd</em> (based on IBM Selectric Pica 10 Pitch), and the italic, <em>TT_ita.sfd</em> (based on IBM Selectric Light Italic 12 Pitch).
|
||||
<ol>
|
||||
<li>First, we need an SVG of each glyph image. So, we ask FontForge to give us one.</li>
|
||||
<li>We have two choices. We can either <ul style="list-style:'• '"><li>write an Inkscape script to roughen up the glyph but keeping it as a vector, or</li> <li>we can export it to PNG and roughen it up as a bitmap. So far all «style»s do the latter, but I haven't ruled out the former forever. The important thing about the script is that it must be pseudo-random, initialized with a seed, so that we get the same output each time for the same seed. Right now, all the scripts are GIMP scripts (or rely on GIMP's plumbling via GEGL), and this means it can take a long time to generate each glyph @ a high DPI, muchless nine versions of each glyph. I'm interested in making a script which would use OpenGL shaders on the input bitmap instead.</li></ul></li>
|
||||
<li>Re-import the glyph back into FontForge, followed by the other <em>n</em> copies of the glyph.</li>
|
||||
<li>Merge the OpenType layout features, the most important one of which is “Contextual Alternates”, («calt»).</li>
|
||||
</ol>
|
||||
</p>
|
||||
<p> † Assuming that one is using one of the commonplace OpenType layout engines of late 2019, such as HarfBuzz.
|
||||
</p>
|
||||
<hr>
|
||||
<a href="download.html">NEXT PAGE: »» Download the Fonts »»</a>
|
||||
<hr>
|
||||
<p>Content © Fredrick R. Brennan, originally released on 1 January 2020</p>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 384 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
@@ -0,0 +1,27 @@
|
||||
@font-face {
|
||||
font-family: TTB;
|
||||
src: url(dist/TT2020StyleB-Regular.woff2);
|
||||
font-weight:bold;
|
||||
}
|
||||
@font-face {
|
||||
font-family: TTE;
|
||||
src: url(dist/TT2020StyleE-Regular.woff2);
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: TTE;
|
||||
src: url(dist/TT2020StyleE-Italic.woff2);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
*{font-display:block}
|
||||
p{margin:0;margin-top:1.1em;line-height:1em}
|
||||
h2 {font-family:TTB}
|
||||
body {font-family:TTE;max-width:42em;font-size:1.5em}
|
||||
em{font-size:1em}
|
||||
code{font-family:TTE;padding:1.5em;display:block;color:#888}
|
||||
|
||||
@media screen and (max-width: 1776px) {
|
||||
}
|
||||
@media screen and (max-width: 770px) {
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 715 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user