I worked on aligning the lowercase letters to the baseline today, and redrew a few of the hurriedly traced glyphs, including ‘g’ and ‘w’.
Since the ‘scanning’ process involved me taking a picture of the type sample, then placing identical boxes (‘M’ squares) over each glyph, then exporting what was underneath and importing them as the background in Font Forge. I then traced over this background. I now see that font forge has an auto trace feature, which might be worth experimenting with, although I believe it requires a bitmap?
I’m honestly pleased with the results of the web font. It’s amazing how the readability of the font improves. It feels just a little less handmade. Today is the first day where I really feel I’m onto something with this. I will keep chipping away at it, day by day.
I was having issues with WOFF so I ran this:
fontforge -lang=ff -c 'Open($1);Generate($2)' regular font.ttfThen I ran:
python -m SimpleHTTPServerAnd stuck this in index.html:
<html>
<head>
<style type="text/css">
@font-face {
font-family: 'MyWebFont';
src: url('/font.ttf') format('truetype');
}
body {
font-family: 'MyWebFont';
max-width:40em;
line-height:1.4;
margin:4rem auto;
}
</style>
</head>
<body>
<p>The <b>United States Declaration of Independence</b>, formally <b>The unanimous Declaration of the thirteen united States of America</b>, is the pronouncement adopted by the <a href="/wiki/Second_Continental_Congress" title="Second Continental Congress">Second Continental Congress</a> meeting in <a href="/wiki/Philadelphia" title="Philadelphia">Philadelphia</a>, <a href="/wiki/Province_of_Pennsylvania" title="Province of Pennsylvania">Pennsylvania</a>, on July 4, 1776. Enacted during the <a href="/wiki/American_Revolution" title="American Revolution">American Revolution</a>, the Declaration explains why the <a href="/wiki/Thirteen_Colonies" title="Thirteen Colonies">Thirteen Colonies</a> at war with the <a href="/wiki/Kingdom_of_Great_Britain" title="Kingdom of Great Britain">Kingdom of Great Britain</a> regarded themselves as thirteen independent <a href="/wiki/Sovereign_state" title="Sovereign state">sovereign states</a>, no longer under British rule. With the Declaration, these new states took a collective first step in forming the <a href="/wiki/United_States_of_America" class="mw-redirect" title="United States of America">United States of America</a>. The declaration was signed by 56 of America's <a href="/wiki/Founding_Fathers_of_the_United_States" title="Founding Fathers of the United States">Founding Fathers</a>, congressional representatives from <a href="/wiki/Province_of_New_Hampshire" title="Province of New Hampshire">New Hampshire</a>, <a href="/wiki/Province_of_Massachusetts_Bay" title="Province of Massachusetts Bay">Massachusetts Bay</a>, <a href="/wiki/Colony_of_Rhode_Island_and_Providence_Plantations" title="Colony of Rhode Island and Providence Plantations">Rhode Island and Providence Plantations</a>, <a href="/wiki/Connecticut_Colony" title="Connecticut Colony">Connecticut</a>, <a href="/wiki/Province_of_New_York" title="Province of New York">New York</a>, <a href="/wiki/Province_of_New_Jersey" title="Province of New Jersey">New Jersey</a>, <a href="/wiki/Province_of_Pennsylvania" title="Province of Pennsylvania">Pennsylvania</a>, <a href="/wiki/Province_of_Maryland" title="Province of Maryland">Maryland</a>, <a href="/wiki/Delaware_Colony" title="Delaware Colony">Delaware</a>, <a href="/wiki/Colony_of_Virginia" title="Colony of Virginia">Virginia</a>, <a href="/wiki/Province_of_North_Carolina" title="Province of North Carolina">North Carolina</a>, <a href="/wiki/Province_of_South_Carolina" title="Province of South Carolina">South Carolina</a>, and <a href="/wiki/Province_of_Georgia" title="Province of Georgia">Georgia</a>.
</p>
</body>
</html>
Everything is still rough. I’m getting back into using Font Forge.
I wish there was a way (perhaps there is?) to deeply connect two subsections of different glyphs, so I could edit say the serif on the I and it would also affect the serifs on the H.
The labour involved in cutting type by hand must have been gigantic. I can’t believe how laborious what I’m doing is and it pales in comparison.
Input scan / image of text
->
Dewarp image, grayscale, gradient map -> b/w
->
OCR
->
Create overlapping sets of each glyph then average it, then vectorize
->
Attempt to extract font metrics (kerning rules) etc. from printed page
->
Use auto generated vector + extracted font metrics to pre-populate sfdir
Converts a FontForge .sfdir into a web-friendly .woff font file from the command-line:
fontforge -lang=ff -c 'Open($1);Generate($2)' font.sfdir font.woff3
I started to improve my ABC today.
I downloaded FontForge and followed the detailed installation instructions carefully. My first impression: the software looks like trash. It’s pixelated. But it’s free and open-source. Based on the FAQ page it seems like the developers are interested in someone putting the time into a native Mac port. Perhaps a project for another day?
What is my plan?
My current best plan is to try and digitize Caslon from scratch. I would like to produce something useful: a decent character set, well-hinted, well-kerned. Regular, Bold and Italic.
The reason I chose Caslon: I didn’t think there is a libre version available. But when I did some research it turns out there is one, and the chap who made it has a pending issue on GitHub to include it on Google Fonts, but it’s nothing there almost two years later as I write. It’s also a little sad to reflect on the fact that I rely on Google to discover free typefaces.
There is an existing free version of Caslon called Libre Caslon by Paolo Impallari. I will refer to this as I work.
To quote that war criminal, there are unknown unknowns, known unknowns, unknown knowns. I am still at the phase where there are a lot of UUs. Perhaps that is good?
Then I started working on this website. I stole a lot of ideas from Jon-Kyle and also used this neat diagram I saw all over the place at the P2P web event I attended this past weekend.
Then I decided to try and focus on actually learning about fonts.
I thought perhaps I could write a script to OCR a specimen, producing images that I could import into FontForge to then trace over? This could also be a fun project. Here are some Javascript OCR libraries.
I was struggling to work out how to create the empty space inside the A, which I looked up and determined is called the counter. The letter A has two counters, one open and one closed.
… within FontForge all outer boundaries must be drawn clockwise, while all inner boundaries must be drawn counter-clockwise.
From Creating an O
I do feel like this is one of those situations where I have to decide
I came across the website of this McGill professor containing plenty of typographic resources.
I’m interested in buying some metal type to work out the dimensions of the box containing the character:
http://www.arionpress.com/mandh/letterpress-type-fonts.html