diff --git a/images/tut_01.png b/images/tut_01.png new file mode 100644 index 0000000..04c52f6 Binary files /dev/null and b/images/tut_01.png differ diff --git a/images/tut_02.png b/images/tut_02.png new file mode 100644 index 0000000..1084dc1 Binary files /dev/null and b/images/tut_02.png differ diff --git a/images/tut_03.png b/images/tut_03.png new file mode 100644 index 0000000..15814e1 Binary files /dev/null and b/images/tut_03.png differ diff --git a/images/tut_04.png b/images/tut_04.png new file mode 100644 index 0000000..274067b Binary files /dev/null and b/images/tut_04.png differ diff --git a/images/tut_05.png b/images/tut_05.png new file mode 100644 index 0000000..97b8f27 Binary files /dev/null and b/images/tut_05.png differ diff --git a/images/tut_06.png b/images/tut_06.png new file mode 100644 index 0000000..79e14e0 Binary files /dev/null and b/images/tut_06.png differ diff --git a/images/tut_07.png b/images/tut_07.png new file mode 100644 index 0000000..0cd6b85 Binary files /dev/null and b/images/tut_07.png differ diff --git a/images/tut_08.png b/images/tut_08.png new file mode 100644 index 0000000..d88eb2c Binary files /dev/null and b/images/tut_08.png differ diff --git a/images/tut_09.png b/images/tut_09.png new file mode 100644 index 0000000..a7655fc Binary files /dev/null and b/images/tut_09.png differ diff --git a/images/tut_10.png b/images/tut_10.png new file mode 100644 index 0000000..e2fca17 Binary files /dev/null and b/images/tut_10.png differ diff --git a/images/tut_11.png b/images/tut_11.png new file mode 100644 index 0000000..aab2f8b Binary files /dev/null and b/images/tut_11.png differ diff --git a/images/tut_12.png b/images/tut_12.png new file mode 100644 index 0000000..ef6c81d Binary files /dev/null and b/images/tut_12.png differ diff --git a/images/tut_13.png b/images/tut_13.png new file mode 100644 index 0000000..9e6360a Binary files /dev/null and b/images/tut_13.png differ diff --git a/images/tut_14.png b/images/tut_14.png new file mode 100644 index 0000000..c0b8265 Binary files /dev/null and b/images/tut_14.png differ diff --git a/images/tut_15.png b/images/tut_15.png new file mode 100644 index 0000000..bfdd0c9 Binary files /dev/null and b/images/tut_15.png differ diff --git a/images/tut_16_stem_hint_button.jpg b/images/tut_16_stem_hint_button.jpg new file mode 100644 index 0000000..88a0fda Binary files /dev/null and b/images/tut_16_stem_hint_button.jpg differ diff --git a/images/tut_17_shift_hint_button.jpg b/images/tut_17_shift_hint_button.jpg new file mode 100644 index 0000000..a323003 Binary files /dev/null and b/images/tut_17_shift_hint_button.jpg differ diff --git a/images/tut_18_align_hing_button.jpg b/images/tut_18_align_hing_button.jpg new file mode 100644 index 0000000..731dd09 Binary files /dev/null and b/images/tut_18_align_hing_button.jpg differ diff --git a/images/tut_19_interp_hint_button.jpg b/images/tut_19_interp_hint_button.jpg new file mode 100644 index 0000000..dc8d60d Binary files /dev/null and b/images/tut_19_interp_hint_button.jpg differ diff --git a/images/tut_20_anchor_hint_button.jpg b/images/tut_20_anchor_hint_button.jpg new file mode 100644 index 0000000..95c20db Binary files /dev/null and b/images/tut_20_anchor_hint_button.jpg differ diff --git a/images/tut_21.png b/images/tut_21.png new file mode 100644 index 0000000..7f5d45c Binary files /dev/null and b/images/tut_21.png differ diff --git a/images/tut_22.png b/images/tut_22.png new file mode 100644 index 0000000..970d731 Binary files /dev/null and b/images/tut_22.png differ diff --git a/images/tut_23.png b/images/tut_23.png new file mode 100644 index 0000000..8867bba Binary files /dev/null and b/images/tut_23.png differ diff --git a/images/tut_24.png b/images/tut_24.png new file mode 100644 index 0000000..d3e275a Binary files /dev/null and b/images/tut_24.png differ diff --git a/images/tut_25.png b/images/tut_25.png new file mode 100644 index 0000000..396b6da Binary files /dev/null and b/images/tut_25.png differ diff --git a/images/tut_26.png b/images/tut_26.png new file mode 100644 index 0000000..e9cd6c2 Binary files /dev/null and b/images/tut_26.png differ diff --git a/images/tut_27.png b/images/tut_27.png new file mode 100644 index 0000000..4170939 Binary files /dev/null and b/images/tut_27.png differ diff --git a/images/tut_28.png b/images/tut_28.png new file mode 100644 index 0000000..63927bd Binary files /dev/null and b/images/tut_28.png differ diff --git a/images/tut_29.png b/images/tut_29.png new file mode 100644 index 0000000..4a4c3f7 Binary files /dev/null and b/images/tut_29.png differ diff --git a/images/tut_30.png b/images/tut_30.png new file mode 100644 index 0000000..f795c32 Binary files /dev/null and b/images/tut_30.png differ diff --git a/images/tut_31.png b/images/tut_31.png new file mode 100644 index 0000000..54028ce Binary files /dev/null and b/images/tut_31.png differ diff --git a/images/tut_32.png b/images/tut_32.png new file mode 100644 index 0000000..a814a7a Binary files /dev/null and b/images/tut_32.png differ diff --git a/images/tut_33.png b/images/tut_33.png new file mode 100644 index 0000000..e5cc3c5 Binary files /dev/null and b/images/tut_33.png differ diff --git a/images/tut_34.png b/images/tut_34.png new file mode 100644 index 0000000..b59df9d Binary files /dev/null and b/images/tut_34.png differ diff --git a/images/tut_35.png b/images/tut_35.png new file mode 100644 index 0000000..70274c5 Binary files /dev/null and b/images/tut_35.png differ diff --git a/images/tut_36.png b/images/tut_36.png new file mode 100644 index 0000000..f457ce4 Binary files /dev/null and b/images/tut_36.png differ diff --git a/images/tut_37.png b/images/tut_37.png new file mode 100644 index 0000000..44dd025 Binary files /dev/null and b/images/tut_37.png differ diff --git a/tutorial.html b/tutorial.html new file mode 100644 index 0000000..97ec74c --- /dev/null +++ b/tutorial.html @@ -0,0 +1,591 @@ + + + + + + +

Tutorial for the ygt hint editor

+

+ This tutorial assumes that you understand the purpose of TrueType hinting +

+

The ygt window

+

+ Start a hinting project by launching ygt and opening either a TrueType + font or a UFO. For this tutorial we’ll open the variable version of + the Elstob font (the very font in which this document is set), which will enable us to demonstrate both basic + hinting techniques and advanced techniques relating to variable fonts. +

+

+ When you first load a font, the ygt main window looks like this: +

+ +

+ This window is divided into five panes. On the right is the graphical + editor, where you will do most of your work. In the middle is the code + pane. ygt stores hints and other data in files in the yaml + serialization language, and the code pane displays this yaml code. You + can edit the code directly, though most of the time it will be faster + and easier to use the graphical editor. On the left are two preview + panes. The one on the top shows a blown-up version of the current + glyph as it will be rendered on screen, with the current collection of + hints applied. You can view this glyph at various resolutions (in + pixels per inch) and in various rendering modes, and you can view it + in black-on-white or white-on-black. If you are hinting a variable + font, you can preview any instance. All of these choices can be made + from the “Preview” menu. +

+

+ Beneath the big preview pane is one that by default shows the current + glyph in an array of resolutions beginning with 10ppem: +

+ +

+ The current resolution (25ppem is the default) is underlined in red; + click on any instance to display that resolution in the large pane + above. If you want to see a glyph in context, type something (perhaps + a favorite pangram) into the “Text” box and hit the Enter key or click + “Submit”: the text will appear in the current resolution and in the + current instance: +

+ +

+ By choosing options on the “Preview” menu, you can choose the script + and language for this text, and you can apply any of your font’s OpenType + features—for example, small caps: +

+ +

+ Thus you can get a preview of any glyph in context. +

+

+ At the top of the ygt window is a row of buttons. Some of these are + for adding hints, while others are for managing CVs, changing the + behavior of the pointer, and choosing the hinting direction (though + modern fonts are usually hinted only on the y axis). +

+

+ There are two more important windows to mention before we go on. + One is the “FontViewer,” which displays all the glyphs of the font: +

+ +

+ You can filter the display by typing any part of a glyph name. For + example, typing “eight” in the “Filter” box causes the Font Viewer + to display all variants of the number eight: +

+ +

+ Glyphs that are already hinted are highlighted in blue; composite + glyphs (which can’t be edited in ygt) are highlighted in gold. The + current glyph is outlined in red. +

+

+ Go to any glyph by clicking on it in the Font Viewer. +

+

+ Next is the “Font Info” window: +

+ +

+ This allows you to manage all of the font’s control values (CVs), which in ygt + are named rather than numbered. Here you can also manage the masters + of variable fonts, which correspond to the masters you produced when + designing the font, and the variant CVs associated with those + masters. We’ll have much more to say about managing CVs later on in + this tutorial. +

+

+ You can also manage the program’s defaults for the current font on the + “Defaults” tab of the Font Info window. +

+

Setting up for hinting

+

+ Before we start to hint this font, we can customize the display. By + default, the graphical editor shows all of the font’s points: on-curve + points are red circles, and off-curve points are slightly smaller blue + circles. It is quite possible to apply hints to off-curve points, but + I strongly suggest that you hint only on-curve points. If you follow + this advice, you can suppress the display of off-curve points by + right-clicking anywhere in the graphical editor and selecting “Hide + off-curve points” from the context menu. +

+

+ It normally isn’t necessary to display point labels while editing, + but if you want them for any reason, select “Show point labels” from + the context menu: +

+ +

+ In a TrueType font, glyph outlines are defined by a zero-based array + of points. Most TrueType hint editors require that you refer to points + using indexes into this array. Unfortunately, these point numbers are + unstable. If you switch font editors, the new editor will probably + number points differently. If you make even minor edits in a glyph, + you will very likely cause the glyph’s points to be renumbered. If + this happens after you’ve begun hinting, the result will be chaos. +

+

+ One way around this problem is to display point labels as coordinates + rather than indexes. Select “On-curve labels as coordinates” from the + context menu to switch to this mode: +

+ +

+ Now the code generated by ygt will refer to points by their + coordinates rather than their indexes, and ygt will translate these + coordinates into indexes at compile time. Since font apps will not + move on-curve point numbers, even if you add points, move off-curve + points, or change editors, coordinates can be more stable than + indexes. If you switch the display from indexes to coordinates and + then hide point labels, coordinates will still be inserted in your + code. +

+

+ Neither coordinates nor indexes are particularly mnemonic, but you + can name points if you like. If you name just a few key points, they + will make it easy to spot the sections of your code dealing with the + various features of a glyph. +

+

+ To name a point, select it, right click in the graphical editor, and + select “Name selected point” from the context menu. Type a name in + the dialog that appears: the name will show in the graphical editor: +

+ +

+ If you name a point while point labels are displayed as indexes, + the name will serve as an alias for an index; otherwise it will serve + as an alias for a coordinate-pair. +

+

+ ygt does a good bit of setup for you the first time you open a + font. It analyzes the font and builds a short list of CVs—that is, + numbers (in font units) that specify the position of points on the + grid or relative to other points. +

+

+ Each CV is accompanied by a good bit of information, as you can see + in the entry for “xheight”: +

+ +
+
name
+
+ ygt names CVs rather than requiring that you memorize their indexes. + You supply a name when you create a CV, but the name can’t be changed + afterwards. +
+
val
+
+ A number in font units. For CVs of this type (see next item), this + value is an absolute position on the current axis. +
+
type
+
+ This can be “pos” (for “position”) or “dist” (for distance). A “pos” + CV is an absolute position of a point on the grid, while a “dist” CV + is the distance between two points. +
+
axis
+
+ This can be “x” or “y.” Hinting is now usually done only on the y axis. +
+
cat
+
+ The category of character that this CV applies to. Each character in + a font belongs to a Unicode category (e.g. “Letter, uppercase” or “Symbol, + currency”). Selecting a category here signals that this CV applies only to + characters in that category. +
+
suffix
+
+ Some classes of characters do not correspond to the Unicode categories, + but can be identified by suffixes (like .sc or .smcp for small caps). If + you enter a value here, this CV will apply only to characters with the + specified suffix. +
+
distance type
+
+ If you select a value here (“black,” “white,” or “gray”), a “dist” hint + with this CV must always have this distance type: black when the distance c + rosses a space that on a printed page would be filled with ink, white when the + distance crosses a space that would not be filled with ink, or gray for all + other cases. It is uncertain how significant the distance type is for the correct + rendering of glyphs. ygt guesses at the distance type whenever it adds a stem + hint. You will have to decide whether it is worth the trouble of correcting + this when it guesses wrong. +
+
+

+ Control values can be made equal to other CVs at specified sizes. For an example, + select “xheight-overshoot” in the list of CVs and click over to the “Same as” tab: +

+ +

+ Here the CV “xheight-overshoot” is made equal to the “xheight” CV when + the current resolution is less than 40ppem. (The same can be done when + the current resolution is above a certain value, but this will be + rarer.) The normal use of this feature is to equalize approximately + equal CVs at low resolutions, so that, for example, characters with + overshoot (like o) don’t appear too much higher than characters + without overshoot (like x). In this example (at 18ppem), the top line + does not set the two CVs equal and the bottom line does: +

+ +

+ By default, the two CVs specified here are set equal below 40ppem, but + you should experiment with this number to get the best result for each + pair of CVs. +

+

+ The first time you open a variable font, ygt builds a list of masters. + These will usually match the masters you created when designing the font, + but you can add to, subtract from, and edit this list of masters: +

+ +

+ It is beyond the scope of this tutorial to explain the numbers that + define each master; but you should take note of the “Generate Variant + Control Values” button, which we will return to later. You also need + to know that each master can have variant control values associated + with it. You can see these variants on the “Variants” pane of the + “Control Values” tab: +

+ +

+ The default value of the “xheight” CV is 435, and it is the same for + all the masters for which the value is “None.” But the masters + “opsz-min” and “opsz-max” (for “Minimum Optical Size” and “Maximum + Optical Size”) have different values for this CV, which rendering + engines will interpolate whenever the Optical Size changes. +

+

+ We discuss this "Deltas" pane in another tutorial. +

+

Hinting the A

+

+ The operation of the graphical editor will be intuitive to anyone who + has used a font or vector editor. To add a hint, select one or more points and + click one of these buttons (or use a shortcut key): +

+ +

+ Let’s start at the bottom of the glyph. You must always begin any + sequence of hints with an anchor hint. Select the bottom-left point + (which we named “bottom” earlier) by clicking on it or dragging over + it, and click the “Anchor hint” button or type “A.” The point will be + highlighted in pink and filled with a lighter pink. The pink + highlighting tells us that an anchor hint has been applied to this + point, and the light pink fill tells us that the hint is rounded. +

+ +

+ We should apply a CV to this hint: it is not strictly necessary here, + but it’s a good idea to use CVs for hints that position points in + specific places on the grid, if only for the sake of your code’s + legibility. Right click on the “bottom” point, select “Set control + value” from the context menu, and choose “baseline” from the list of + CVs (only CVs that can be applied to this point in this glyph appear + on the menu): +

+ +

+ In the code pane, these lines have appeared. Together they make up a + hint instruction: +

+ +

+ Those who know the yaml language will recognize the hyphen as marking + this instruction as a list item: it consists of two key-value + pairs. “ptid” stands for “point identifier”: it can be a single point + or a list of points. “pos” stands for “position”: it identifies its + value as a position-type CV. If the point were not already positioned + on the baseline, the “baseline” CV could cause it to be moved there. +

+

+ Most hint instructions in the code pane will also contain a “rel” key, + which specifies how the target point or points are to be positioned + relative to the reference point or points. Since an anchor hint is not + positioned relative to any other point, the “rel” key is omitted here. +

+

+ Next we should regulate the thickness of the serif. At one time, we + would have used a rounded stem hint with CV for this, but when working + on a font for a modern high-resolution display, it is better to use an + unrounded stem hint without a CV. To do this, select the “bottom” + point (when a point has an anchor hint, as this one does, you can + select the hint by clicking and the point by dragging) and the point + immediately above it, and click the “Stem hint” button or type the + shortcut T: +

+ +

+ The stem hint is marked with a red arrow running from the reference + point “bottom” to the point at coordinates 19,25. You can see from the + pink fill for point 19,25 that this hint is rounded: to unround it, + right-click on the hint (the button in the middle of the arrow’s stem + provides a convenient thing to click on). On the context menu, you + will see that the item “Round target point” is checked: select this to + unround it. +

+

+ The hints we have applied so far make little visible difference to the + rendered glyph—at least not at 25ppem: +

+ +

+ However, the hinting will make a difference at other resolutions. We need + to hint the right-hand serif to match the one on the left. We could apply + the same hints we used for the left-hand serif to the one on the right, + but it is easier to use shift hints here. To do this, select a hinted point + on the left and an equivalent point on the right and click the shift-hint + button or type the shortcut H. Do this for each of the hinted points: +

+ +

+ Now let’s hint the top of the letter. For the “top” point we’ll need + an anchor hint with CV. It is not necessary to add the hint and the CV + with separate operations; instead, hold down the Control or Command + key while adding the hint to make ygt guess at the correct CV by + choosing the CV with a position closest to that of the target + point. (You can make ygt guess at a CV for an existing hint by + clicking the “Guess Control Value” button (yellow with a question mark + in a C), by typing a question mark as a shortcut key, or by selecting + “Guess” from the list of CVs on the context menu.) +

+

+ With one action, we have anchored the point “top” and applied the + “cap-height-overshoot” CV (since the A is a little higher than most other + capitals). We should also regulate the position of the left-hand diagonal + relative to the “top” point. To do this, connect “top” with one of the + points at the top of the diagonal with a shift-hint: +

+ +

+ But our hinting of the top of the A has caused a problem at the bottom, + where (at certain resolutions) the ends of the diagonals stick out beyond + the bottom of the letter: +

+ +

+ To fix this, we need to regulate the bottoms of the diagonals. There is + more than one way to do this; I suggest using an interpolate-hint to force + the relevant points back to their original mid-serif positions. Select the + two points we hinted in the bottom-left serifs, then one point at the bottom + of each diagonal; then click the “Interpolate-hint” button or type I: +

+ +

+ It’s getting a little crowded at the bottom of the glyph, but you can + see that yellow arrows now run from the two points we hinted at the + beginning of this process to a box containing two points highlighted + in yellow. The box identifies the two points as a set: the + interpolate-hint operates on all the members of this set. Now the + problem with the diagonals is fixed: +

+ +

+ We still need to hint the bar of the A. Select the “top” and “bottom” + points, then the “bar” point, and hold down the shift key while clicking + the “interpolate-hint” button or typing I: the “bar” point (the bottom-left + point in the bar) will be interpolated and rounded to the grid: +

+ +

+ The last thing we need to do is regulate the top of the bar. We’ll need an + unrounded stem hint with no CV. In fact, almost all the stems in this font + will be hinted in the same way: with unrounded stems; so rather than + unrounding every stem hint after we added, lets change the default behavior + of these stems. To do this, bring up the “Font Info” box and click over to + the “Rounding” pane of the “Defaults” tab: +

+ +

+ But something has gone wrong here. The pink fill in the top point + tells us it is rounded when it shouldn’t be, and the reason is that + this is not a “Black distance” hint. Black distance hints are marked + by arrows with solid lines, White distance hints by lines with short + dashes, and Gray distance hints by lines with long dashes. ygt guesses + at the distance type whenever it adds a stem hint. It rarely makes + mistakes, but it has made one here, adding a Gray hint instead of a + Black one. It is uncertain how important the distance type is to the + correct rendering of glyphs, but we may as well correct this. Right + click on the hint, select “Set distance type” from the context menu, + and chose “Black.” Then use the same context menu to unround the + point: +

+ +

+ Now the bottom of the bar will appear sharp, being rounded to the grid, + and the top will be anti-aliased—an effect that you can see more clearly + (for both the bar and the serifs) at higher resolutions: +

+ +

+ I’d like to hint one more glyph, but before we do that, let’s save our + work. To do so, simply type Ctrl-S or Cmd-S, as in other + applications. If you started your project by opening a TrueType font, + ygt will save your work in a separate file with the same name as the + font you opened, but with the suffix .yaml instead of .ttf. If you + started by opening a UFO, your work will be saved in the UFO as + /data/org.ygthinter/source.yaml (if you want to change from UFO to + .ttf mode, simply copy this file out of the UFO, rename it, and edit + the first line to point at a TrueType font). When you return to the + project, open up the .yaml file, not the .ttf; or simply open the UFO + again. +

+

+ I’ll conclude the tutorial by walking you through hinting the letter i. + The main part of the character (the “base”) is easy: once you’ve + thoroughly learned the basics of ygt, you should be able to hint it in + a few seconds: +

+ +

+ Here is the result: +

+ +

+ All that’s left now is the dot. The complication is that on the + Optical Size axis of this variable font, the xheight varies—high at + the minimum value and low at the maximum—and the height of diacritics + (like the dot of the i) varies with it. Yet it is important to assign + a CV for the height of diacritics, since they vary in height (for + example, an acute sits significantly lower than a macron) in a way + that might look bad at low resolutions. For the base value of this CV, + we should choose a position about halfway between the highest + diacritic (the macron, at 556) and the lowest (the acute at 521). +

+

+ The best procedure is to base a CV on the bottommost point of a + diacritic that sits about halfway between the acute and the macron: + the breve (at 541) would be a good choice. So navigate to uni0306 (the + combining breve), select the bottommost on-curve point (0), type C, + and enter the name “diacritic-height” for the new CV. +

+

+ Now bring up the “Font Info” window, click over to the “Masters” tab, + and click the “Generate Variant Control Values” button. A busy icon + will appear for a few seconds. When it disappearas, click over to the + “Control Values” tab, double-click “diacritic-height” in the list of + CVs, and then click over to the “Variants” pane: +

+ +

+ As you can see, values have been added for the “opsz-min” and “opsz-max” + masters: these reflect the position on the y axis of point 0 in the + minimum and maximum Optical Size masters (you can check these value in + a font editor, but I promise that ygt has gotten these right). +

+

+ Now return to the letter i, select the bottommost point in the dot, and + type Ctrl-A. As you can see in the code pane, an anchor hint with CV + “diacritic-height” has been added. Add the topmost point of the dot to + the selection, type T, and we’re done with the letter i! +

+ + + + \ No newline at end of file diff --git a/webfiles/Elstob-Italic.ttf b/webfiles/Elstob-Italic.ttf new file mode 100644 index 0000000..147af03 Binary files /dev/null and b/webfiles/Elstob-Italic.ttf differ diff --git a/webfiles/Elstob.ttf b/webfiles/Elstob.ttf new file mode 100644 index 0000000..f393ffb Binary files /dev/null and b/webfiles/Elstob.ttf differ