|
| 1 | +# Contributing to the Inter UI font project |
| 2 | + |
| 3 | +First off, thank you for considering contributing to Inter UI. |
| 4 | +It's people like you that make the Internet such a great place. |
| 5 | + |
| 6 | +Following these guidelines helps to communicate that you respect the time of |
| 7 | +the people managing and developing this open source project. |
| 8 | +In return, they should reciprocate that respect in addressing your issue or |
| 9 | +suggestion. |
| 10 | + |
| 11 | +By contributing work to the Inter UI font project you agree to have all work |
| 12 | +contributed becoming the intellectual property of the Inter UI font project as |
| 13 | +described by [SIL Open Font License, Version 1.1](http://scripts.sil.org/OFL) |
| 14 | + |
| 15 | + |
| 16 | +## Types of contributions this project is looking for |
| 17 | + |
| 18 | +Inter UI is still an early product and so there is a lot of fun things to do. |
| 19 | + |
| 20 | +- More glyphs! There are many placeholder glyphs that need to be replaced with |
| 21 | + ones designed in the style of Inter UI. |
| 22 | + - Non-English glyphs are especially needed |
| 23 | + |
| 24 | +- Improvements and corrections to existing glyphs |
| 25 | + |
| 26 | +- Kerning, kerning, kerning — there are so many pairs and pairs-in-words that |
| 27 | + need to be kerned, or have their kerning improved. When adding kerning, try |
| 28 | + to use `@GROUPS` (groups.plist in the UFO source directories.) |
| 29 | + |
| 30 | +- A thin "master" font that can additionally be used to derive interpolated |
| 31 | + weights in between "regular" and "thin." This is a very large project and |
| 32 | + should probably be done in a branch over a longer period of time, rather than |
| 33 | + as one huge contribution/pull request. |
| 34 | + |
| 35 | + |
| 36 | +### Master fonts and interpolated derivatives |
| 37 | + |
| 38 | +This project uses "master fonts", or "key fonts" which are combined using |
| 39 | +some clever math to generate other fonts that is a "mix" of two "masters." |
| 40 | +Because of this, there are some **very important rules** you must stick to: |
| 41 | + |
| 42 | +- When adding or removing a glyph, you _must_ add or remove the same glyph in |
| 43 | + all master fonts. |
| 44 | +- When modifying a glyph's contours, the corresponding glyphs in all masters must: |
| 45 | + - Have the same amount of contours (aka "shapes") |
| 46 | + - Have the same amount of points in roughly the same locations |
| 47 | + - Each point must have the same amount and kind of handles |
| 48 | + - Each contour's winding direction must match |
| 49 | + |
| 50 | +Unless these rules are followed, generated weights will fail to build. |
| 51 | +If you are uncertain, simply try building a generated weight like "Medium" — the |
| 52 | +build system will tell you when a glyph fails to "mix" with an error message. |
| 53 | + |
| 54 | +To make life a little easier when working on glyphs, the build system will not stop |
| 55 | +if there's a glyph-mixing error, but instead just pick a glyph from one of the |
| 56 | +master weights and continue. For this reason you need to look at the output from |
| 57 | +the build system and watch out for "mixglyph" error messages. They look like this: |
| 58 | + |
| 59 | +``` |
| 60 | +mixglyph failed for J |
| 61 | +``` |
| 62 | + |
| 63 | + |
| 64 | +### Generated glyphs |
| 65 | + |
| 66 | +Many glyphs which are based on basic latin characters are generated by composing |
| 67 | +other glyphs. These are defined in `src/diacritics.txt` where each line of the |
| 68 | +file defines one "composition" that names a base glyph followed by the name of |
| 69 | +one or more additional glyphs, followed by anchor names which are used for alignment. |
| 70 | + |
| 71 | +For example `Ά` U+0386 "GREEK CAPITAL LETTER ALPHA WITH TONOS" is composed from |
| 72 | +`A` and `tonos`, aligned on the "tonos" anchor. |
| 73 | +It's defined like this in `src/diacritics.txt`: |
| 74 | + |
| 75 | +``` |
| 76 | +A+tonos:tonos=Alphatonos |
| 77 | +``` |
| 78 | + |
| 79 | +"Alphatonos" is a glyph name defined in `src/glyphlist.txt` which maps names to |
| 80 | +Unicode code points. |
| 81 | + |
| 82 | +When you see a name starting with "uni" followed by some hexadecimal digits, that |
| 83 | +means no symbolic name has been assigned to that glyph, but it maps to a Unicode |
| 84 | +code point. For instance: |
| 85 | + |
| 86 | +``` |
| 87 | +E+grave:top=uni0400 |
| 88 | +``` |
| 89 | + |
| 90 | +Creates Composes `Ѐ` U+0400 "CYRILLIC CAPITAL LETTER IE WITH GRAVE" |
| 91 | +from "E" and "grave" aligned on the "top" anchor. |
| 92 | + |
| 93 | +If we were to introduce a glyph named `uni0400` into the UFO source file, that |
| 94 | +glyph would be used instead of the composition when a font is built. This allows |
| 95 | +us to define a "baseline" of glyph compositions in `src/diacritics.txt` and then |
| 96 | +progressively introduce specially-designed glyphs on a per font basis. |
| 97 | + |
| 98 | +When doing this, you still have to be careful about the [master interpolation rules](#master-fonts-and-interpolated-derivatives). |
| 99 | + |
| 100 | + |
| 101 | +### `src/fontbuild.cfg` |
| 102 | + |
| 103 | +`src/fontbuild.cfg` defines a lot of things that directs the font build system. |
| 104 | + |
| 105 | +- What glyphs to decompose (flatten; remove components) |
| 106 | +- What glyphs should have a lesser italic angle when generating italic fonts |
| 107 | +- What glyphs shouldn't be italicized at all when generating italic fonts |
| 108 | +- What glyphs should be _excluded_ (or "removed") from resulting font files |
| 109 | + (some glyphs are only used as components and don't correspond to an actual |
| 110 | + glyph in the end-result font file.) |
| 111 | +- Other information, like version, author, build system cache directory, etc. |
| 112 | + |
| 113 | + |
| 114 | +## Building |
| 115 | + |
| 116 | +Prerequisites: |
| 117 | + |
| 118 | +- Python 2.7 with pip (you get pip with `brew install python`) |
| 119 | +- [virtualenv](https://virtualenv.pypa.io/) |
| 120 | + |
| 121 | +``` |
| 122 | +$ ./init.sh |
| 123 | +``` |
| 124 | + |
| 125 | +This will generate makefile support, dependencies required by the toolchain, etc. |
| 126 | +At the end, the script prints instructions for how to activate `virtualenv`. |
| 127 | +As a convenience, you can also source init.sh to activate virtualenv. |
| 128 | + |
| 129 | +We can now run `make` to build all font files: |
| 130 | + |
| 131 | +``` |
| 132 | +$ make |
| 133 | +``` |
| 134 | + |
| 135 | +Or just specific styles: |
| 136 | + |
| 137 | +``` |
| 138 | +$ make Regular BoldItalic |
| 139 | +``` |
| 140 | + |
| 141 | +Or all fonts but only TrueType format (no web file formats): |
| 142 | + |
| 143 | +``` |
| 144 | +$ make all_ttf |
| 145 | +``` |
| 146 | + |
| 147 | +Or just specific styles and formats: |
| 148 | + |
| 149 | +``` |
| 150 | +# Regular in all formats, BoldItalic in only TrueType format |
| 151 | +$ make Regular BoldItalic_ttf |
| 152 | +``` |
| 153 | + |
| 154 | +You can also specify specific style + file format to `make` through `build/InterUI-STYLE.FORMAT`. |
| 155 | +E.g. |
| 156 | + |
| 157 | +- `make build/dist-unhinted/InterUI-MediumItalic.otf` |
| 158 | +- `make build/dist-unhinted/InterUI-Bold.woff2` |
| 159 | +- `make build/dist-hinted/InterUI-Regular.ttf` |
| 160 | +- `...` |
| 161 | + |
| 162 | +All resulting font files are written to the `build` directory with `InterUI-` as the filename prefix. |
| 163 | + |
| 164 | +Note: Making all files takes a considerable amount of time. |
| 165 | +It's a CPU and I/O intensive task to compile the fonts and so the build system has been setup to |
| 166 | +be able to run many jobs in parallel. Therefore it's recommended to pass the [`-j` flag to make](https://www.gnu.org/software/make/manual/html_node/Parallel.html) and |
| 167 | +optionally pipe the fairly verbose output to /dev/null, e.g. `make -j 8 >/dev/null`. |
| 168 | + |
| 169 | + |
| 170 | +### Editing |
| 171 | + |
| 172 | +This font is stored and authored in the [Unified Font Object (UFO)](http://unifiedfontobject.org/) file format and can be edited by many different software, some free. However, it's only been "tested" with [RoboFont](http://robofont.com/) which is a popular commercial font editor. There's a 30 day fully-functional free trial version of the app, so you can use it for smaller contributions without needing to buy a RoboFont license. |
| 173 | + |
| 174 | +To make life easier for you, configure RoboFont's settings like this: |
| 175 | + |
| 176 | +- Set the grid to 128 units. This means that each grid square equals one pixel at 2x scale. |
| 177 | +- Set "Snap points to" to a reasonably high number that's a power-of-two, like 8. |
| 178 | +- Set "SHIFT increment" to 16 |
| 179 | +- Set "CMD SHIFT increment" to 128 |
| 180 | + |
| 181 | +When you've made an edit, simply save your changes and run make: |
| 182 | + |
| 183 | +``` |
| 184 | +$ make |
| 185 | +``` |
| 186 | + |
| 187 | +*For quick turnaround, consider:* |
| 188 | + |
| 189 | +- Build and test only the "Regular" style. |
| 190 | +- Use `misc/notify` to get desktop notifications on builds so that you don't have to sit and wait looking at the terminal while it's building. |
| 191 | + |
| 192 | +E.g. `misc/notify make Regular` |
| 193 | + |
| 194 | +See ["Building"](#Building) for more details. |
| 195 | + |
| 196 | + |
| 197 | +### Preview & debug |
| 198 | + |
| 199 | +This project comes with a simple web-based application for debugging and |
| 200 | +previewing the font. It's a very useful tool to have when working on the font. |
| 201 | + |
| 202 | +- Comes with a large body of sample text data (which is also editable.) |
| 203 | +- Provides samples of the most common latin-script pairs, useful for kerning. |
| 204 | +- Provides samples of words ordered by commonality in latin scripts with a |
| 205 | + preference for English (accessible via common-pair samples.) |
| 206 | +- Can show the complete repertoire of the fonts, with correct glyph order and |
| 207 | + even RoboFont color labels ("marks"). |
| 208 | +- Controls for basic font properties like family, weight, italic, size, |
| 209 | + line-height, letter-spacing, etc. |
| 210 | +- Controls for a lot of font features like ligature sets, contextual alternates, |
| 211 | + alternate numerics, etc. |
| 212 | +- Controls for web-browser text features like `capitalize`, `uppercase`, |
| 213 | + `lowercase`, etc. |
| 214 | +- Ability to compare Inter UI side-by-side with other fonts. |
| 215 | + |
| 216 | + |
| 217 | + |
| 218 | +The following will start a local web server (which is only accessible from your local computer; not the internet) that serves the debug-and-preview app: |
| 219 | + |
| 220 | +``` |
| 221 | +$ docs/serve.sh & |
| 222 | +``` |
| 223 | + |
| 224 | +You can now visit `http://localhost:2015/lab/`. |
| 225 | +After you rebuild some font files, reload the web page to refresh fonts. |
| 226 | + |
| 227 | + |
| 228 | +### Kerning |
| 229 | + |
| 230 | +Kerning is the concept of harmony in the pace of characters, defined as a set of distances |
| 231 | +between specific character pairs, like "A" & "c". |
| 232 | +Good kerning makes words more readable. Oftentimes this means that when adjusting kerning, |
| 233 | +you have to look at whole words and sentences when adjusting the kerning of a pair, since |
| 234 | +the spacing between two characters should work in harmony with the spacing of all other characters. |
| 235 | + |
| 236 | +All major font editors provide user interfaces for previewing and adjusting kerning. |
| 237 | + |
| 238 | +When adding or adjusting kerning: |
| 239 | + |
| 240 | +- Make sure to use kerning groups (`src/Inter-UI-*.ufo/groups.plist`) |
| 241 | + |
| 242 | +- If a glyphname is missing in kerning groups, define a new group for it. |
| 243 | + Group naming scheme is: `@KERN_<DIRECTION>_<NAME>` where `<DIRECTION>` |
| 244 | + is either `LEFT` or `RIGHT`, depending on if the group represents the left-hand side |
| 245 | + of a pair or the right-hand side. `<NAME>` is the name of a glyph that most commonly |
| 246 | + represents the group. For instance, for all glyphs that has a left-side shape similar |
| 247 | + to "c", like "d", the group name is "c". This makes it easy to test kerning of groups |
| 248 | + by just using the `<NAME>` part in previews. |
| 249 | + |
| 250 | +- Try to submit image samples of kerning adjustments with your pull requests whenever |
| 251 | + feasible. |
| 252 | + |
| 253 | +The script `misc/kernsample.py` is helpful in generating samples for all existing |
| 254 | +right-hand side characters given a left-hand side glyphname. |
| 255 | + |
| 256 | +```txt |
| 257 | +$ misc/kernsample.py src/Inter-UI-Black.ufo P -suffix MOR |
| 258 | +PAMOR P/AE MOR PJMOR PXMOR PYMOR PZMOR P/ae mor P/ampersand mor P/backslash mor P/dzcaron mor P/eightsub mor P/ellipsis mor Pfmor P/four mor P/guilsinglleft mor P/idieresisacute mor P/periodcentered mor P/quotedblbase mor Psmor P/seven mor P/slash mor Ptmor P/two mor P/underscore mor Pymor |
| 259 | +``` |
| 260 | + |
| 261 | +Type `misc/kernsample.py -h` for help on how to use the program. |
| 262 | + |
| 263 | +This only includes existing kerning and is thus only useful for adjustments. |
| 264 | +Additions must still be done manually. |
| 265 | + |
| 266 | + |
| 267 | +### Removing glyphs |
| 268 | + |
| 269 | +Removal of glyphs is a bit tricky both because there are a lot of places in |
| 270 | +which a glyph might be referenced and used, as well as the fact that many |
| 271 | +glyphs uses composition where removal of one glyph might cause other glyphs to |
| 272 | +have their component instances be broken disappear. |
| 273 | + |
| 274 | +There's a script which takes care of 95% of this process for you: `misc/rmglyph.py` |
| 275 | + |
| 276 | +Before running, make sure your git working tree is clean (at least the `src` folder), |
| 277 | +then run something like this: |
| 278 | + |
| 279 | +``` |
| 280 | +misc/rmglyph.py -decompose -dry glyphname1 U+1234 U+1235-1238 |
| 281 | +``` |
| 282 | + |
| 283 | +Run without `-dry` to write the effects to the file system (safe when you have a clean working directory; just `git checkout src` to "undo") |
| 284 | + |
| 285 | +Run with `-h` for details on usage. |
| 286 | + |
| 287 | + |
| 288 | +## FAQ |
| 289 | + |
| 290 | +> Do I need RoboFont? |
| 291 | +
|
| 292 | +No, you don't. To build font files, all you need is Python. To edit the font files, you need something that can edit UFO files (like [RoboFont](http://robofont.com/) or a text editor.) |
| 293 | + |
| 294 | +---- |
| 295 | + |
| 296 | +> `KeyError: 'Lj'` when building |
| 297 | +
|
| 298 | +This probably means that you need to run `./init.sh` to setup the case-sensitive virtual file system mount that is needed by the font build system. Unfortunately the toolchain used (which is the same as for Roboto) requires not only a case-preserving file system, but also a case-sensitive one. |
| 299 | + |
| 300 | +---- |
| 301 | + |
| 302 | +> `ImportError: No module named robofab.objects.objectsRF` |
| 303 | +
|
| 304 | +Python virtualenv not configured. Run `. init.sh` |
| 305 | + |
| 306 | +---- |
| 307 | + |
| 308 | +> `make: *** No rule to make target ...` |
| 309 | +
|
| 310 | +Run `./init.sh` to update the generated makefile. |
| 311 | + |
| 312 | +---- |
| 313 | + |
| 314 | +> How can I inspect a compiled font file? |
| 315 | +
|
| 316 | +Use the fontinfo.py tool which outputs JSON describing all properties of |
| 317 | +one or more font files. |
| 318 | +See `misc/fontinfo.py -h` for details. |
| 319 | +Example use: `misc/fontinfo.py -pretty build/dist-unhinted/Inter-UI-BoldItalic.ttf` |
0 commit comments