forked from fontforge/fontforge.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
editexample3.html
223 lines (223 loc) · 9.93 KB
/
editexample3.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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<HTML>
<HEAD>
<!-- Created with AOLpress/2.0 -->
<!-- AP: Created on: 27-Jan-2003 -->
<!-- AP: Last modified: 15-Nov-2008 -->
<TITLE>Consistent serifs and stem widths</TITLE>
<LINK REL="icon" href="fftype16.png">
<LINK REL="stylesheet" TYPE="text/css" HREF="/assets/css/old/FontForge.css">
</HEAD>
>
<div style="margin:0; height: 4 em; padding: 0.5em; background: red; color:yellow; text-align:center; font-size:1em; font-family: sans-serif;">
<p><a href="http://fontforge.github.io" style="padding: 0.5em; color: yellow; font-weight: bold; text-decoration: none;" onmouseover="this.style.background='black';" onmouseout="this.style.background='red';" >This is part of the old website. New website begins at fontforge.github.io</a></p>
<p><a href="https://github.com/fontforge/fontforge.github.io" style="padding: 0.5em; color: yellow; font-weight: bold; text-decoration: none;" onmouseover="this.style.background='black';" onmouseout="this.style.background='red';" >Are you a web developer? Help us migrate this page on Github</a></p>
</div>
<P ALIGN=CENTER>
<IMG SRC="/assets/img/old/fontforge-banner-420.jpeg" WIDTH=420 HEIGHT=80>
<DIV id="in">
<H1 ALIGN=Center>
Tutorial #3
</H1>
<UL>
<LI>
<A HREF="editexample.html#FontCreate">Font Creation</A>
<LI>
<A HREF="editexample.html#CharCreate">Creating a glyph (tracing outlines)</A>
<LI>
<A HREF="editspiro.html">Create glyph outlines using spiro points</A>
<LI>
<A HREF="importexample.html">Importing a glyph from Inkscape (or Illustrator,
or some other vector editor)</A>
<LI>
<A HREF="editexample2.html#Navigating">Navigating to other glyphs</A>
<LI>
<A HREF="editexample2.html#Creating-o">On to the next glyph (consistent
directions)</A>
<LI>
<A HREF="editexample3.html#consistent-stems">Consistent serifs and stem
widths</A>
<LI>
<A HREF="editexample4.html#accents">Building accented glyphs</A>
<LI>
<A HREF="editexample4.html#ligature">Building a ligature</A>
<LI>
<A HREF="editexample4.html#lookups">Lookups and features</A>
<LI>
<A HREF="editexample5.html#metrics">Examining metrics</A>
<LI>
<A HREF="editexample5.html#Kerning">Kerning</A>
<LI>
<A HREF="editexample6.html#Variants">Glyph variants</A>
<LI>
<A HREF="editexample6.html#Marks">Anchoring marks</A>
<LI>
<A HREF="editexample6-5.html#Conditional">Conditional features</A>
<LI>
<A HREF="editexample7.html#checking">Checking your font</A>
<LI>
<A HREF="editexample7.html#generating">Generating it</A>
<LI>
<A HREF="editexample7.html#Families">Font Families</A>
<LI>
<A HREF="editexample7.html#summary">Final Summary</A>
<LI>
<A HREF="editexample8.html">Bitmap strikes</A>
<LI>
<A HREF="scripting-tutorial.html">Scripting Tutorial</A>
<LI>
<A HREF="scriptnotes.html#Special">Notes on various scripts</A>
<LI>
<FORM method=GET action="http://www.google.com/search">
Searching the documentation:
<INPUT type=hidden name="as_sitesearch" value="fontforge.sourceforge.net">
<INPUT type=text name="as_q">
<INPUT type=submit name="btnG" value="Search">(Powered by
<A HREF="http://www.google.com/">Google</A>)
</FORM>
</UL>
<H2>
<A NAME="consistent-stems">Creating </A>letters with consistent stem widths,
serifs and heights.
</H2>
<P>
Many Latin (Greek, Cyrillic) fonts have serifs, special terminators at the
end of stems. And in almost all LGC fonts there should only be a small number
of stem widths used (ie. the vertical stem of "l" and "i" should probably
be the same).
<P>
FontForge does not have a good way to enforce consistency, but it does have
various commands to help you check for it, and to find discrepancies.
<P>
Let us start with the letter "l" and go through the familiar process of importing
a bitmap and defining its outline.
<TABLE BORDER CELLPADDING="2" WIDTH=600>
<TR VALIGN="Bottom">
<TD WIDTH=140><P ALIGN=Center>
<IMG SRC="/assets/img/old/l1.png" WIDTH="35" HEIGHT="153"></TD>
<TD WIDTH=140><IMG SRC="/assets/img/old/l2.png" WIDTH="134" HEIGHT="101"></TD>
<TD WIDTH=140><IMG SRC="/assets/img/old/l3.png" WIDTH="134" HEIGHT="101"></TD>
<TD WIDTH=140><IMG SRC="/assets/img/old/l4.png" WIDTH="134" HEIGHT="101"></TD>
</TR>
<TR VALIGN="Top">
<TD>The imported image</TD>
<TD>Use the magnify tool to examine the bottom serif, and note that it is
symmetric left to right.</TD>
<TD>Outline the right half of the serif</TD>
<TD>select the outline, invoke <CODE>Edit -> Copy</CODE> then <CODE>Edit
-> Paste</CODE>, and finally <CODE>Element -> Transform</CODE>
<CODE>-> Transform</CODE> and select <CODE>Flip</CODE> (from the pull
down list) and <CODE>check Horizontal</CODE></TD>
</TR>
<TR VALIGN="Bottom">
<TD><IMG SRC="/assets/img/old/l5.png" WIDTH="134" HEIGHT="101"></TD>
<TD><IMG SRC="/assets/img/old/l6.png" WIDTH="134" HEIGHT="101"></TD>
<TD><IMG SRC="/assets/img/old/l7.png" WIDTH="134" HEIGHT="101"></TD>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/l8.png" WIDTH="35" HEIGHT="153"></TD>
</TR>
<TR VALIGN="Top">
<TD>Drag the flipped serif over to the left until it snuggles up against
the left edge of the glyph</TD>
<TD COLSPAN=2>Deselect the path, and select one end point and drag it until
it is on top of the end point of the other half</TD>
<TD>Finish off the glyph</TD>
</TR>
<TR VALIGN="Bottom">
<TD></TD>
<TD><IMG SRC="/assets/img/old/l9.png" WIDTH="134" HEIGHT="101"></TD>
<TD><IMG SRC="/assets/img/old/l10.png" WIDTH="134" HEIGHT="101"></TD>
<TD></TD>
</TR>
<TR VALIGN="Top">
<TD>But let's do two more things. First let's measure the stem width, and
second let's mark the height of the "l"</TD>
<TD>Select the ruler tool from the tool palette, and drag it from one edge
of the stem to the other. A little window pops up showing the width is 58
units, the drag direction is 180 degrees, and the drag was -58 units
horizontally, and 0 units vertically.</TD>
<TD>Go to the layers palette and select the Guide radio box (this makes the
guide layer editable). Then draw a line at the top of the "l", this line
will be visible in all glyphs and marks the ascent height of this font.</TD>
<TD></TD>
</TR>
</TABLE>
<P>
Now let's do "i". This glyph looks very much like a short "l" with a dot
on top. So let's copy the "l" into the "i"; this will automatically give
us the right stem width and the correct advance width. The copy may be done
either from the font view (by selecting the square with the "l" in it and
pressing <CODE>Edit->Copy</CODE>) or from the outline view (by
<CODE>Edit->Select->Select All </CODE>and
<CODE>Edit->Copy</CODE>). Similarly the Paste may be done either in the
font view (by selecting the "i" square and pressing
<CODE>Edit->Paste</CODE>) or the outline view (by opening the "i" glyph
and pressing <CODE>Edit->Paste</CODE>).
<TABLE BORDER CELLPADDING="2" WIDTH=600>
<TR>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/i1.png" WIDTH="50" HEIGHT="170"></TD>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/i2.png" WIDTH="111" HEIGHT="170"></TD>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/i3.png" WIDTH="111" HEIGHT="170"></TD>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/i4.png" WIDTH="111" HEIGHT="170"></TD>
</TR>
<TR VALIGN="Top">
<TD>Import the "i" image, and copy the "l" glyph.</TD>
<TD>Select the top serif of the l</TD>
<TD>drag it down to the right height</TD>
<TD>go to the guide layer and add a line at the x-height</TD>
</TR>
</TABLE>
<P>
<IMG SRC="/assets/img/old/o5.png" WIDTH="85" HEIGHT="101" ALIGN="Right">Let's look briefly
back at the "o" we built before. You may notice that the "o" reaches a little
above the guide line we put in to mark the x-height (and a little below the
baseline). This is called overshoot and is an attempt to remedy an optical
illusion. A curve actually needs to rise about 3% (of its diameter) above
the x-height for it to appear on the x-height.<BR CLEAR=ALL>
<P>
Let's look at "k". Again we will copy an "l" into it and import an appropriate
image.
<TABLE BORDER CELLPADDING="2" WIDTH=600>
<TR>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/k1.png" WIDTH="87" HEIGHT="151"></TD>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/k2.png" WIDTH="87" HEIGHT="151"></TD>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/k3.png" WIDTH="87" HEIGHT="151"></TD>
</TR>
<TR VALIGN="Top">
<TD>Import the "k" image and copy the "l" glyph. Note that the x-height line
matches the "k" (as we would hope). Also note that the width of the "l" is
inappropriate for "k" so we'll have to select it and drag it over.</TD>
<TD>Select the knife tool from the palette, and cut the stem of the "l" shape
at appropriate points for "k".</TD>
<TD>Remove the splines between the cut points. An easy way to do this is
to grab the spline itself, (which selects its end points) and then do
<CODE>Edit -> Clear</CODE>.</TD>
</TR>
<TR>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/k4.png" WIDTH="87" HEIGHT="151"></TD>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/k5.png" WIDTH="87" HEIGHT="151"></TD>
<TD><P ALIGN=Center>
<IMG SRC="/assets/img/old/k6.png" WIDTH="87" HEIGHT="151"></TD>
</TR>
<TR VALIGN="Top">
<TD>Select the end points and convert them into corner points with <CODE>Point
-> Corner</CODE>.</TD>
<TD>Then draw in the outer contour.</TD>
<TD>And the inner contour. Finally do an <CODE>Edit -> Select -> Select
All </CODE>and an <CODE>Element -> Correct Direction</CODE>.</TD>
</TR>
</TABLE>
<P>
<P ALIGN=Center>
-- <A HREF="editexample2.html">Prev</A> -- <A HREF="overview.html">TOC</A>
-- <A HREF="editexample4.html">Next</A> --
</DIV>
</BODY></HTML>