├── .gitignore ├── Images ├── BlurvSharp.png ├── DevanagariBlurSharp.png ├── HeightsDevanagari.png ├── HintDevanagariEight.gif ├── HintDevanagariFour.gif ├── HintDevanagariOne.gif ├── HintDevanagariSeven.gif ├── HintDevanagariThree.gif ├── HintDevanagariTwo.gif ├── Nohinthintcomparison.png └── WeightBlurSharp.png ├── LICENSE ├── README.md └── VTTSourcesDemoFont ├── NotoSerifDevanagariVF_Demo.ttf ├── README.md └── UnHintedNotoSerifDevanagariVF ├── NoHintsNotoSerifDevanagariVF.ttf └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /Images/BlurvSharp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/Images/BlurvSharp.png -------------------------------------------------------------------------------- /Images/DevanagariBlurSharp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/Images/DevanagariBlurSharp.png -------------------------------------------------------------------------------- /Images/HeightsDevanagari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/Images/HeightsDevanagari.png -------------------------------------------------------------------------------- /Images/HintDevanagariEight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/Images/HintDevanagariEight.gif -------------------------------------------------------------------------------- /Images/HintDevanagariFour.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/Images/HintDevanagariFour.gif -------------------------------------------------------------------------------- /Images/HintDevanagariOne.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/Images/HintDevanagariOne.gif -------------------------------------------------------------------------------- /Images/HintDevanagariSeven.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/Images/HintDevanagariSeven.gif -------------------------------------------------------------------------------- /Images/HintDevanagariThree.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/Images/HintDevanagariThree.gif -------------------------------------------------------------------------------- /Images/HintDevanagariTwo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/Images/HintDevanagariTwo.gif -------------------------------------------------------------------------------- /Images/Nohinthintcomparison.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/Images/Nohinthintcomparison.png -------------------------------------------------------------------------------- /Images/WeightBlurSharp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/Images/WeightBlurSharp.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A guide to hinting complex script Variable Fonts with Visual TrueType 2 | 3 | by [Michael Duggan](https://twitter.com/mickduggan), in collaboration with Kalapi Gajjar-Bordawekar 4 | 5 | **Note:** This document is a companion piece to the comprehensive documentation on [Hinting Latin TrueType Variable Fonts with Visual TrueType](https://github.com/googlefonts/how-to-hint-variable-fonts#introduction) 6 | 7 | *Please refer first to this documentation for all of the details of the workflow, thorough descriptions of the hinting code, and how to use the Visual TrueType Tool to add hinting to Variable Fonts.* 8 | 9 | ## Introduction 10 | 11 | When thinking about adding hinting to any Variable font, it is a good idea to ask a few questions before beginning. How does hinting work in modern rendering environments? What value can hinting add? Is hinting suitable for my font? The first two questions are answered in the longer VTT Variable font Hinting document, referenced above, which gives an overview of the current rendering technologies and the main benefits of modern hinting, with a focus on Variable Font Hinting. The third question can be answered by a series of tests and proofing in VTT. 12 | 13 | **Is hinting suitable for the font?** 14 | Once you know more about what hinting is capable of, you can then ask a few questions about the font itself. Is the font intended for reading on-screen at smaller sizes or is it primarily a display font, intended for use only at larger sizes? If the latter, is hinting really needed? What benefits can I expect by adding hinting? How complex are the outline shapes? Many complex script fonts can benefit from hinting particularly at smaller sizes. However, for some scripts, such as Chinese, Japanese and Korean for example, the complexity of the outlines makes it impossible to apply hints that will benefit smaller sizes. Once there are enough pixels at larger sizes, hinting can help to sharpen common horizontal strokes and reduce blur. Every font should be evaluated to begin with, to determine the most appropriate hinting strategy. 15 | 16 | We will look at these questions as we progress through this document, and will also look at the different approaches to hinting individual glyphs, and some of the current limitations of Hinting for Variable fonts. 17 | 18 | ## VTT Autohinting for complex script Variable Fonts 19 | 20 | Before beginning any new Hinting project, it is also important to understand the options and requirements for running the VTT Autohinter for complex script Variable fonts. The Visual TrueType tool has the following options for Autohinting. 21 | 22 | **(1) Light Latin Autohinter:** Designed to work for Latin fonts, including Greek and Cyrillic. This option can also be used to add hinting to complex script fonts. **Note:** To run the VTT Light Latin Autohinter, for complex script fonts, VTT requires that the font must contain at least the Latin Ascii glyph set. If there is no Latin Ascii glyph set, the Light Latin Autohinter will not run, and will return an error message. _(Example: Unicode 0x48 (H) is missing in this font)._ 23 | 24 | If your font contains a Latin and a complex script glyph set, the Latin portion of the font will be auto-hinted, with cvt’s generated for key Latin Heights. The Autohinter will add hinting code to the complex script glyph set, but will not generate cvt’s for any heights. Although the VTT Autohinter does not add cvt information for heights for complex script glyph sets, it is worthwhile running it, to begin any hinting project. In addition to adding basic hinting code, VTT also generates a full Font-Program and Pre-Program as well as code for any composites in the font. This saves a lot of time versus building this information from scratch. The basic hinting code that is added to the individual complex script glyphs can also be a good starting point to build from. We will look at this in more detail in the examples of hinting later in the Document. 25 | 26 | **(2) EA Autohinter:** If a font does not contain a Latin subset, or you do not wish to add these glyphs you can run the VTT East Asian Autohinter. Using this option VTT will autohint a font without the requirement to add a Latin glyph set. If the hinting strategy used by the East Asian Autohinter is appropriate for you font, you can proceed from here using the code generated by the EA Autohinter. This will also include all of the necessary tables, Font-Program and Pre-Program. This Autohinter makes use of a lightweight hinting strategy that focuses on the horizontal strokes common in East Asian scripts. The strategy, takes advantage of Windows symmetric rendering modes and locks one side of horizontal strokes to the pixel grid while letting the top of other side float. This strategy balances edge contrast vs. blur and produces a good distribution of strokes with balanced counters. 27 | 28 | **Note:** _If your font does not contain a Latin subset, and the approach used by the EA Autohinter is not suitable for the font you are working on, you can run the EA Autohinter, save, and then run the Light Latin Autohinter. Once the font has been saved after running the EA Autohinter, VTT allows for the Light Latin Auothinter to run on a font, that does not contain a Latin Subset. The autohinting approach used by the EA and Light Latin Autohinter, differs slightly. The EA autohinter, adds hints to the bottom of horizontal strokes and hints upwards, while the Light Latin Autohinter adds hints to the y-min of glyphs and hints up, and adds hints to the top of y-max of strokes and hints downwards. The Autohinting code output, should be reviewed and the font proofed carefully, to determine which approach is suitable for your font._ 29 | 30 | 31 | **(3) Control program only:** This option is similar to number 1 above, and has the same requirements for the inclusion of Latin glyph set. The ‘Control program only’ option, is used only when the intent is to add hinting to the font from scratch, via the graphical hinting interface or by writing the High Level VTT Talk by hand. The Control Program option will generate, a simple CVT Table, Font Program and will generate glyph program code for composite glyphs. **Note:** Hinting code for the unique glyphs in the font will not be generated. 32 | 33 | ## Case Study: Hinting Noto Devanagari Serif Variable font 34 | 35 | As an example of Hinting complex script Variable fonts, we will be looking at the workflow for autohinting and then fine tuning the hinting code, for key representative glyphs in the Noto Devanagari Serif Variable font. Noto is a global font collection for writing in all modern and ancient languages. Noto Serif Devanagari is a modulated (“serif”) design for setting texts in the Indic Devanagari script. The Variable font supports multiple weights and widths. 36 | 37 | All of the concepts, processes and workflow can be followed and adapted for other complex script Variable fonts. 38 | 39 | **Determining benefits of Hinting by running the Autohinter** 40 | 41 | A good way to begin, to evaluate the overall effects of hinting, is to run the VTT Autohinter, and review the output. 42 | 43 | Follow the workflow steps 1 and 2, as described in [How to Hint Variable fonts](https://github.com/googlefonts/how-to-hint-variable-fonts) 44 | 45 | **Step 1:** [Autohinting a Variable Font](https://github.com/googlefonts/how-to-hint-variable-fonts#vtt-variable-font-workflow-process) 46 | 47 | **Step 2:** [XML, Export and Import Hinting code](https://github.com/googlefonts/how-to-hint-variable-fonts#xml-export-and-import-hinting-code) 48 | 49 | 50 | Sharpening of horizontal strokes at smaller screen sizes on lower resolution screens is one of the key benefits of modern hinting. This sharpening significantly reduces blur along key horizontal strokes, producing much clearer text at smaller sizes on-screen. 51 | 52 | Running the VTT Autohinter and quickly reviewing the results will give you a good impression of the big picture of how hinting will help to render the font at small screen sizes particularly in relation to the key horizontals in the Devanagari font design. By evaluating the initial results produced by the Autohinter, you can determine the benefits of hinting and then build on refining the hinting code. 53 | 54 | 55 | 56 | **Left** Horizonal stroke un-hinted. After the un-hinted outline is scaled and rendered at a particular size, the result is very often a blurred line. 57 | **Right** Horizonal stroke hinted. The Autohinter uses a strategy to move the outline to a high contrast grid boundary. 58 | 59 | Following on from this basic idea, we can now see how this hinting effect, improves the rendering overall for many of the main Devanagari glyphs. 60 | 61 | 62 | 63 | **Key Horizonal sharpening** Hinting results in sharpening of main Horizontal stokes, along the key Devanagari Headline alignment zone, shown here using representative Devanagari glyphs at 9 and 12 point @96dpi 64 | 65 | 66 | 67 | 68 | **Improvements across Variation space** One set of hinting code is applied to all weight and width variations in the Variable font, resulting in consistent sharpening of main Horizontal stokes for all widths and weights. 69 | 70 | 71 | 72 | **Devanagari text sample** 73 | 74 | Text Sample comparing hinted to un-hinted / Typeset at Axis-praxis.org / Universal Declaration of Human Rights / NotoSerifDevanagariVF_Demo.ttf, 15px, 11point@96dpi, Google Chrome (Version 99.0.4844.51) / Windows 11 / DirectWrite Rendering / Consistent sharpening and alignment along Headline of all Devanagari glyphs. Key details are kept clear on-screen at smaller text sizes 75 | 76 | 77 | ## Determining key height Alignments and measurements 78 | 79 | Before beginning any edits or fine tuning of the hinting of the font, cvt’s for key heights should be created. If you are familiar with the script or the alignment heights are obvious, you can add new cvt’s for key heights, and overshoot features as described below for the Devanagari Variable font. 80 | 81 | If you are not familiar with the script, it is best to work with a script expert or by referencing trusted documentation online, to firstly determine the main aligment zones or key heights for the font. Once these have been established, measurements can be taken from key representative glyphs, and new custom cvt’s can be added to the CVT table. 82 | 83 | You can add as many new cvt’s as needed for heights or features. Typically a new cvt is added for a height for example, that is shared by many glyph in the font. Referencing these new cvt’s in the hinting, will ensure a consistent alignment of the hinted glyphs, and will also allow for global adjustments to heights to improve readability at smaller sizes. 84 | 85 | 86 | 87 | Key heights are determined by referencing some representative glyphs in the Noto Devanagari Variable font. The measurements taken from these glyphs, will be used to set up new cvt’s that will be referenced in the hinting code. 88 | 89 | Referencing ‘cvt’ values from hinting instructions in a set of glyphs that share similar measurements in the Devanagari font allows strict control over the regularity of these features. For the hinting approach described here, new cvt’s will be used to ensure key heights are kept consistent at any given point size. When adding hints, an ‘anchor’, _(such as is added by the Autohinter)_ on any point, will be rounded to the nearest grid line. However, a YAnchor, _for example,_ can refer to a ‘cvt’ value to specify a height or overshoot shared by other glyphs in the font. Instead of rounding to the nearest grid line, the anchored point will round to the grid line specified by the ‘cvt’ value. 90 | 91 | This is also useful when making global adjustments to heights, and proportions for a range of glyphs, by adjusting just one cvt. Global adjustments to proportions in complex script fonts, can help provide more space for heavier weights, for example, helping to make the rendering much clearer on-screen. 92 | 93 | ## Adding Character Group information and CVT’s for Devanagari 94 | 95 | **Character Group Information** 96 | 97 | ![LatinAutohinter](Images/HintDevanagariEight.gif) 98 | 99 | Before beginning hinting we will need to add Character group information for Devanagari. 100 | 101 | Open the Control program `ctrl + 4`. Anywhere at the begining of the Control Program type GROUP INDIC, to declare a new group, for the Devanagari glyphs. _Additional character groups can be added as needed._ 102 | 103 | Compile the Control Program and save. When this is done, you will be able to select the appropriate Character group for the current glyph in the Main Window. The ‘character group’ tells VTT which group of values to use from the Control Value Table. As you add the hinting, via the Graphical User Interface hinting tools, VTT will automatically pick the correct cvt’s for heights that have been newly defined and declared as ‘INDIC’ in the Contol Value Table table. 104 | 105 | **To change the character group to ‘Indic’ for the current glyph** 106 | 107 | From the edit menu, choose ‘Change Char group’. A shortcut for this is to press Ctrl+U. Repeat `ctrl + u`, until ‘INDIC’ is listed as the ‘Character Group’ information in the text string at the top of the main Window. 108 | 109 | **Adding new cvt’s for Devanagari** 110 | 111 | Now that we have taken some measurements from the font outlines, we can build some new cvt’s for use in hinting the Devanagari. The illustration above shows four key measurements taken from representative glyphs. We can add further cvt’s when required, for any other alignment zones, that can be determined in the font. 112 | 113 | To add the new cvt’s, open the Control program. At the end of the control program add the following cvt entries, starting with the next available ID number, in this case cvt number 167. _(Because this font contains a Latin Subset, the Autohinter has already generated cvt’s for the Latin font)_ 114 | 115 | To begin, declare the new cvt’s as ‘INDIC’. 116 | 117 | **Note:** The cvt setup, for the main Devanagari heights, uses the same method as used in Latin fonts. For the Devanagari height cvt’s, Indic is declared first, then the color of the link, which is Grey, for heights, and the direction Y. ‘Square Height’ is added before the cvts for the Flat heights, _‘Flat Headline height’_ and _‘Baseline’,_ and ‘Round Height’, is added before the round overshoot heights, round _‘Devanagari Headline Overshoot’_ and round _‘Devanagari Baseline Undershoot’._ 118 | 119 | Add four new cvt’s, for ‘Main Devanagari Flat Headline height’, ‘Round Devanagari Headline Overshoot’, ‘Devanagari Baseline’, and ‘Devanagari Baseline Undershoot’ using the measurements taken from the outlines. Compile and Save the Control Program. These new cvt’s are now available for use, and can be referenced in the VTTtalk Hinting code of individual glyphs. 120 | 121 | /***** Devanagari Height cvt’s *****/ 122 | 123 | INDIC 124 | 125 | Grey 126 | 127 | Y 128 | 129 | SquareHeight 130 | 131 | 167: 623 /* Main Devanagari Flat Headline height */ 132 | 133 | ASM("SVTCA[Y]") 134 | 135 | ASM("CALL[], 167, 89") 136 | 137 | 169: 0 /* Devanagari Baseline */ 138 | 139 | ASM("SVTCA[Y]") 140 | 141 | ASM("CALL[], 169, 89") 142 | 143 | RoundHeight 144 | 145 | 168: 5 ~ 167 @ 42 /* Round Devanagari Headline Overshoot*/ 146 | 147 | 170: -5 ~ 169 @ 42 /* Devanagari Baseline Undershoot */ 148 | 149 | 150 | 151 | ## Hinting Devanagari letter GA (Unicode+0917) 152 | 153 | Let’s begin by looking at how to add hinting to the Devanagari letter GA. In this example we will delete the existing Autohinting code and add the hinting via the graphical user interface. The main height controls and cvt’s added to this glyph will set the direction for adding hinting and maintaining consistent height control for other Devanagari glyphs, that share the same headline and baseline heights. Many of the glyphs in the font share a common alignment. 154 | 155 | **Hinting strategy** 156 | 157 | 1. Control the y-max (Headline) and y-min of the glyph (Baseline / baseline undershoot) to be consistent with other glyphs that share the same alignment, using values in the Control Value Table as a reference. Minimise blur at the ‘Headline’. 158 | 159 | 2. Control the position of the middle element, in relation to the Baseline and Headline. 160 | 161 | ![LatinAutohinter](Images/HintDevanagariOne.gif) 162 | 163 | **Hinting the GA (Unicode 0917)** 164 | 165 | Before beginning hinting, while in the main window, set the correct ‘character group’, for the current glyph. The ‘character group’ information for each character is listed in the text string at the top of the Main Window, and appears like this 166 | 167 | Gid 149, char 0x917, ‘uni0917’, **INDIC** _(Character group information)_ 168 | 169 | The ‘character group’ tells VTT which group of values to use from the Control Value Table. As you add the hinting, VTT will automatically pick the correct cvt’s for heights that have already been newly defined for INDIC in the cvt table. 170 | 171 | **To change the character group to ‘INDIC’ for the current glyph** 172 | 173 | From the edit menu, choose ‘Change Char group’. A shortcut for this is to press Ctrl+U. Repeat `ctrl + u`, until ‘INDIC’ is listed as the ‘character group’ information in the text string at the top of the main Window. 174 | 175 | **Step 1: Devanagari Headline Height Control** 176 | 177 | Choose the YShift Tool from the Toolbar. Position the ‘blue circle’, directly over point 28, click, and drag to point 26 and release. 178 | 179 | The following code is generated in the VTT Talk Window. 180 | 181 | **YAnchor (28, 167)** Moves point 28 to the control value listed in the ‘Control Program’, that corresponds to the Devanagari Main Flat Headline Height, (cvt #167) and rounds this point to a grid line. (View > Control Program: (167: 623 /* Main Devanagari Flat Headline Height */) 182 | 183 | **YShift(28,26)** Shifts point 26, to a new position, relative to point 28’s new position on the grid, maintaining the same relative distance between the point 28 and point 26 as is in the original high resolution design of the outline. The shift command does not reference a cvt value and does not move the hinted point 26 to a full pixel grid line. Shift also does not default to a one pixel minimum used by the Link command. Using the Shift command will maintain a balanced visual weight, of this important Devanagari horizontal feature , across all variations. 184 | 185 | With the Yshift Tool still selected, drag from point 26 to point 14 and from point 14 to point 23. The following code is generated. 186 | 187 | **YShift(26,14)** 188 | **YShift(14,23)** 189 | 190 | Shifts point 14, to a new position, relative to point 26’s new position maintaining the same relative distance between point 26 and point 14, and point 23, as is in the original high resolution design of the outline. Point 14 and point 23 are now positioned correctly across all variations in the design space. 191 | 192 | **A note on Hinting overlapping outlines** 193 | *Variable fonts are often designed with outlines that overlap. To ensure the hinted font renders correctly it is important to add hinting to points on the outline that overlap, so that these points maintain their correct position in the hinted outline. In this case, the shift command from point 26 to point 14 and 23, will ensure that point 14 and 23, maintain the correct position in the hinted outline, in the y-axis, between points 28 and 26. **Note:** An alternative method to control the correct positions for these overlapping points, is to interpolate points 14, 15, 23, 24, between points 28, and 26 in the y-axis using YInterpolate(28,14,15,23,24,26). The overall effect is the same* 194 | 195 | **Step 2: Devanagari Baseline Height Control** 196 | 197 | With the YShift Tool still selected from the toolbar, position the ‘blue circle’, directly over point 21, and right click. With the right mouse button held down, drag to the right to select ‘round to grid’ then release. 198 | 199 | The following code is generated in the VTT Talk Window. 200 | 201 | **Yanchor(21, 170)** Moves point 21 to the control value listed in the ‘Control Program’, that corresponds to the Devanagari Baseline Undershoot Height, (cvt #170) and rounds this point to a grid line. (View > Control Program: (170: -5 /* Devanagari Baseline Undershoot */) 202 | 203 | **YShift(21,22)** With the Yshift Tool still selected from the toolbar, position the ‘blue circle’, directly over point 21, and drag to point 22. Shifts point 22, to a new position, relative to point 21’s new position on the grid, maintaining the same relative distance between the point 21 and point 22 as is in the original high resolution design of the outline. 204 | 205 | **Step 3: Control position of mid-section of glyph in Y-axis** 206 | 207 | Now that the Baseline and Headline Height have been established the middle section now needs to be interpolated to find its correct position. 208 | 209 | Choose the YInterpolate tool. Position the _‘blue circle’_, directly over point 28 and drag to point 21. You will see a line appear, which takes the form of a draggable _‘elastic band’._ No code is generated yet until a point is chosen to interpolate. Click anywhere on the line, and drag the curser to the point you want to interpolate, in this case point 0, and release. The following code is generated in the VTT Talk Window. 210 | 211 | **YInterpolate(21,0,28)** 212 | 213 | The middle section is now positioned correctly, between the base line and Headline height but one more step is needed. To maintain as much contrast as possible and to reduce blur, one side of the middle element, should be aligned to the pixel grid. Right click on point 0, drag to the right to ‘round to grid’, and release. The YInterpolate code, will be replaced with the following code. 214 | 215 | **YIPAnchor(21,0,28)** 216 | 217 | Moves point 0, to full pixel grid, positioned relative to point 28 and point 21, which now has a new grid-fit position. This ensures high contrast on the bottom of the middle section of the GA glyph helping to minimise blur. 218 | 219 | **Step 4: Control weight of mid-section** 220 | Choose the YShift tool. Position the _‘blue circle’_, directly over point 0 and drag to point 7. The following code is generated in the VTT Talk Window. 221 | 222 | **YShift(0,7)** 223 | Shifts point 7, to a new position, relative to point 0’s new position on the grid, maintaining the same relative distance between the point 0 and point 7 as is in the original high resolution design of the outline. 224 | 225 | **Step 5: Adding the Res command** 226 | 227 | The Res addition to the command ‘Anchor’, for example, stands for ‘Rendering Environment Specific’, and ensures that the appropriate rounding happens, for various rendering environments. This saves adding additional hinting commands if hinting is required to work in a variety of rendering environments. _The Res command calls a Function, that is designed to also allow for more subtle rendering of features such as undershoots and overshoots_ 228 | 229 | Switch to the VTTtalk window (`ctrl + 5`). Type Res before the YAnchor commands, Compile VTT Talk, (`ctrl + r`) and save (`ctrl + s`) 230 | 231 | The final VTTtalk code, for the GA glyph, in the VTTtalk window will appear like this. The Res commands and cvt’s are highlighted here. After appending the Res commands to the YAnchors, compile the VTTtalk window and save. 232 | 233 | /* Y direction */ 234 | 235 | **Res**YAnchor(21 **,170**) /* Devanagari Baseline undershoot */ 236 | 237 | YShift(21,22) 238 | 239 | **Res**YAnchor(28 **,167**) /* Main Devanagari Flat Headline height */ 240 | 241 | YIPAnchor(21,0,28) 242 | 243 | YShift(0,7) 244 | 245 | YShift(28,26) 246 | 247 | YShift(26,14) 248 | 249 | YShift(14,23) 250 | 251 | Smooth() 252 | 253 | _The hinting for GA is now complete. Additional glyphs that share the same alignment can now be hinted using the same overall strategy and reference the same cvt values. Glyphs can be proofed in the main window, using the text string to see shape and spacing, in the size ramp to see the hinted results at a range of sizes, and in the Variation Window, to proof for all variations in the font._ 254 | 255 | **Pro Tip** 256 | 257 | **Notes on adding new cvt’s** 258 | 259 | When adding new hinting code from scratch, or when editing the output from the Autohinter, choose the option under `Display > Options > VTT Attributes` > **Show CVT numbers.** 260 | 261 | When new cvt’s are added, the cvt numbers will be shown graphically in the main window. As you progress through hinting the glyph set, showing cvt numbers allows for easier visual proofing of the hinted glyphs in the Main Window, for example to quickly determine whether the correct cvt’s are used for heights. 262 | 263 | 264 | ## Hinting Devanagari vowel sign AA (Unicode+0x93e) 265 | 266 | **Hinting strategy** 267 | 268 | 1. Control the y-max (Headline) and y-min of the glyph (Baseline undershoot) to be consistent with other glyphs that share the same alignment, using values in the Control Value Table as a reference. Minimise blur at the ‘Headline’. Control weight of top horizontal bar. Control outline overlap. 269 | 270 | ![LatinAutohinter](Images/HintDevanagariSeven.gif) 271 | 272 | **Editing Autohinter code** 273 | 274 | The VTT Autohinter is designed to speed up the workflow for hinting. While for Latin fonts, the Autohinter generates hinting code as well as cvt’s, the output is often still a very useful starting point when hinting complex script fonts. Lets take a look at the following example. The code structure overall that has been generated by the Autohinter for this glyph, is sound. We just need to add the appropriate Devanagari height cvt’s, to the YAnchor commands, via the Graphical User hinting tools, control the overlap, and add the ‘Res’ commmand, to the YAnchor’s in the VTT Talk. 275 | 276 | From the edit menu, choose ‘Change Char group’. A shortcut for this is to press Ctrl+U. Repeat `ctrl + u`, until ‘INDIC’ is listed as the ‘character group’ information in the text string at the top of the main Window. 277 | 278 | **Add Devanagari Headline cvt** 279 | 280 | Right click on the anchor symbol associated with point 7, and drag to the right to select the cvt symbol. The following code is generated. **Note:**_(You may have to zoomin to the point to see this clearly in VTT)_ 281 | 282 | **Note:** We have already built the cvt’s for the main heights in Devanagari, and have delared these in the cvt table as ‘INDIC’. Once the Char group info is set for the current glyph, VTT will know to assign the correct cvt’s for the Devanagari Heights. 283 | 284 | **YAnchor(7, 167)** 285 | 286 | Cvt 167 is appended to the Yanchor code that controls the top alignment, and moves point 7 to the control value listed in the ‘Control Program’, that corresponds to the Main Devanagari Flat Headline height. 287 | 288 | 167: 623 /* Main Devanagari Flat Headline height */ 289 | 290 | **Add Devanagari Baseline undershoot cvt** 291 | 292 | Right click on the anchor symbol associated with point 0, and drag to the right to select the cvt symbol. The following code is generated. 293 | 294 | **YAnchor(0,170)** 295 | 296 | Cvt 170 is appended to the Yanchor code that controls the bottom alignment, and moves point 0 to the control value listed in the ‘Control Program’, that corresponds to the Devanagari Baseline undershoot height. 297 | 298 | 170: -5 /* Devanagari Baseline Undershoot */ 299 | 300 | **Control outline overlap** 301 | 302 | With the Yshift Tool still selected, drag from point 5 to point 2 The following code is generated. 303 | 304 | **YShift(5,2)** 305 | 306 | Shifts point 2, to a new position, relative to point 5’s new position maintaining the same relative distance between point 5 and point 2, as is in the original high resolution design of the outline. Point 2 will now be positioned correctly across all variations in the design space. 307 | 308 | **Add Res command** 309 | 310 | Switch to the VTTtalk window (ctrl + 5). Type Res before the YAnchor commands that have cvt’s associated with them, here it is YAnchor(0, 170), and YAnchor(7, 167) 311 | 312 | Compile VTT Talk, (ctrl + r) and save (ctrl + s). 313 | 314 | The hinting for the Devenagari vowel sign AA (Unicode+0x93e), is now complete and ready for proofing. 315 | 316 | ## Hinting Devanagari letter DdA (Unicode+0921) 317 | 318 | Adding Hinting for a complex Devanagari glyph. 319 | 320 | **Hinting strategy** 321 | 322 | 1. Control the y-max (Headline) and y-min to be consistent with other glyphs that share the same alignment, using values in the Control Value Table as a reference. Minimise blur at the ‘Headline’, and y-min of the glyph 323 | 324 | 2. Control the position of the middle elements, in relation to the y-min and Headline. The main advantages of adding hinting to this glyph will be to ensure that the top and bottom of the glyph are moved to a sharp alignment. Because we have to use only one set of hints for all of the variation weights, from Light to Black, control of the middle is done by interpolation only. This will ensure that the overall shape of the glyph is correctly maintained. 325 | 326 | ![LatinAutohinter](Images/HintDevanagariTwo.gif) 327 | 328 | While in the main window, choose ‘Change char group’, from the edit menu. A shortcut for this is to press `ctrl + u`. Repeat `ctrl + u`, until ‘INDIC’ is listed as the ‘character group’ information in the text string at the top of the main Window. _(Listed after the Unicode and before the ppem size)_ 329 | 330 | **Control Top alignment** 331 | 332 | Choose the YShift Tool from the Toolbar. Position the ‘blue circle’, directly over point 51, click, drag to point 49 and release. 333 | 334 | The following code is generated in the VTT Talk Window. 335 | 336 | **YAnchor (51, 167)** Moves point 51 to the control value listed in the ‘Control Program’, that corresponds to the Devanagari Main Flat Headline Height, (cvt #167) and rounds this point to a grid line. (View > Control Program: (167: 623 /* Main Devanagari Flat Headline Height */) 337 | 338 | **Control top horizontal weight** 339 | 340 | **YShift(51,49)** 341 | 342 | Shifts point 49, to a new position, relative to point 51’s new position on the grid, maintaining the same relative distance between the point 51 and point 49 as is in the original high resolution design of the outline. Using the Shift command will maintain a balanced visual weight, of this important Devanagari horizontal feature , across all variations. 343 | 344 | **Control outline overlap** 345 | 346 | With the Yshift Tool still selected, drag from point 49 to point 26 The following code is generated. 347 | 348 | **YShift(49,26)** 349 | 350 | Shifts point 26, to a new position, relative to point 49’s new position maintaining the same relative distance between point 49 and point 26, as is in the original high resolution design of the outline. Point 26 will now be positioned correctly across all variations in the design space. **Note:** _Because point 27 is at the same y-horizontal measurement as point 26, there is no need to use a shift command to touch point 27. Point 27 will move automatically to the same y-position as point 26._ 351 | 352 | 353 | **Control bottom alignment** 354 | 355 | With the YShift Tool still selected from the Toolbar. Position the ‘blue circle’, directly over point 0, right click, and drag to the right to select a cvt. 356 | 357 | The following code is generated in the VTT Talk Window. 358 | 359 | **YAnchor (0, 169)** Moves point 0 to the control value listed in the ‘Control Program’, that corresponds to the Devanagari Baseline (cvt #169) and rounds this point to a grid line. (View > Control Program: (167: 623 /* Main Devanagari Flat Headline Height */) 360 | 361 | **Disable cvt selection** 362 | Right click on the Anchor symbol associated with point 0, drag to the left to disable cvt selection. The following code is generated 363 | 364 | YAnchor(0) 365 | 366 | **Note:** 367 | _In this case VTT will try and choose the cvt closest to the baseline for Devanagari. The outline measurements of the high resolution outline differs across the variation space however. In the Thin Weight point zero is positioned at a y-measurement of +13 font units, while in the Black Weight point zero is positioned at a y-measurement of -3 font units, below the baseline. Moving point zero to reference a cvt in this case will work for smaller screen sizes, where there are fewer pixels, but will position point zero incorrectly at higher sizes, causing the bottom round in the Thin weight to round to low, and too high in the Heavy weight. In this case its best to use a YAnchor command, without a cvt reference, to round this feature to the grid, allowing the bottom of the y-round to round to the oulines naturally scaled outline position. This method will work for both smaller sizes, where the rounding will naturally round to the baseline, and at larger sizes, when there are more pixels available, to round to the correct position across the variation weight range._ 368 | 369 | **Control bottom round weight** 370 | 371 | With the YShift Tool selected from the Toolbar, drag from point 0 to point 7 and release. 372 | 373 | **YShift(0,7)** Shifts point 7, to a new position, relative to point 0’s new position on the grid, maintaining the same relative distance between the point 0 and point 7 as is in the original high resolution design of the outline. 374 | 375 | **Control position of middle curves** 376 | 377 | Choose the YInterpolate tool. Position the ‘blue circle’, directly over point 51, drag to point 0. You will see a ‘line’ appear, which takes the form of a draggable ‘elastic band’. No code is generated yet until a point or points are chosen to interpolate. Click anywhere on the interpolation line, and drag to the points on the middle curves you wish to interpolate, in this case points 13, 39, 22 and 30 and release. the following code is generated 378 | 379 | **YInterpolate(0,13,39,30,22,51)** 380 | 381 | This will position the middle curves corectly across the weight variations, relative to the grid fitted positions of the y-min and y-max of the glyphs. When hinting more complex, dense glyphs in Variable fonts, it is often better to use an interpolation for positioning middle elements, rather than trying to place these elements onto the grid. Grid-fitting the curves in this case may work for the light weights, but may cause clashing or black spots, at smaller sizes in the bolder weights. 382 | 383 | **Add Res command** 384 | 385 | Switch to the VTTtalk window (ctrl + 5). Type Res before the YAnchor command that has a cvt associated with it, here it is YAnchor(51,167). Compile VTT Talk, (ctrl + r) and save (ctrl + s). 386 | 387 | The hinting for the Devanagari letter DdA (Unicode+0921), is now complete and ready for proofing. 388 | 389 | 390 | ## Adjusting global proportions 391 | 392 | At small screen sizes there are a limited number of pixels available to describe and render more complex glyph shapes. Adjusting the overall height of the Devanagari glyphs, can help to make the glyphs, that are more complex and dense, clearer and more open, particularly in the heavier weights. 393 | 394 | ![LatinAutohinter](Images/HintDevanagariThree.gif) 395 | 396 | In this example the Main Headline Devanagari height ‘cvt’ 167, stores a measurement of 623 font units, which is the measured outline distance of the square Headline Height. 397 | 398 | At 12 point at 72dpi / 9 point at 96dpi, this value is scaled, and rounds to the nearest pixel grid, which results in a Baseline to Headline Height of 7 pixels () 399 | 400 | At 15 point at 72dpi / 11 point at 96dpi, this value is scaled, and rounds to the nearest pixel grid, which results in a Baseline to Headline Height of 9 pixels () 401 | 402 | At 20 point at 72dpi / 15 point at 96dpi, this value is scaled, and rounds to the nearest pixel grid, which results in a Baseline to Headline Height of 7 pixels () 403 | 404 | To change this height globally, a ‘Delta’ command is used to raise the Headline Height for all glyphs that reference the ‘cvt’ for either square or round Headline height. This Delta command raises the Headline Height by one pixel for all of the instances in the font. 405 | 406 | **Note:** When adjusting one height, other heights should also be reviewed, and adjusted if necessary, to ensure the correct proportion is maintained, between heights. 407 | 408 | **Globally adjust height in the ‘cvt’ table:** 409 | 410 | Open the CVT Table (`ctrl + 4`) and refer to the ‘cvt’ for Headline Height, ‘cvt’ number 167. Directly after the ‘cvt’ type the following, Delta(1@12;15;20) and compile, ctrl ( r ) and save. 411 | 412 | **CVT Entry for Square Devanagari Headline Height** 413 | 167: 623 /* Square Headline Height */ 414 | 415 | Delta(1@12;15;20) /* Raise Headline Height globally by 1 pixel */ 416 | 417 | **Note:** In Variable fonts a global Delta command can only be used, if the cvt does not vary across the Variation Space. For example, a Bolder weight variation may have a larger measured outline height. This height is edited in the ‘cvar’ _(cvt variation table)_ to reflect this difference. Because of the difference in height, the bolder weight cvt, can round differently and the ‘Delta’ to change the height for the Bold may not be required. Refer here for more information on [editing the CVAR Table](https://github.com/googlefonts/how-to-hint-variable-fonts#cvar--cvt-variations-table) 418 | 419 | ## Hinting components and accents 420 | 421 | **Hinting strategy for components and accents** 422 | 423 | 1. Ensure hinted glyph is at least two pixels in height at all sizes for all variations, making it render clearly at lower sizes on-screen. 424 | 2. Hint the bottom of the glyph to align to the grid, using a cvt height as a reference 425 | 3. Hint from bottom to top of glyph, to ensure top or y-max is aligned to a sharp grid boundary. 426 | 4. Control weight of y-straight or y-round accent stroke 427 | 4. Maintain a minimum distance white space, in accents that need to kept clear. 428 | 429 | _The Autohinter has no special strategy for hinting accented glyphs. By locking the top and bottom of the accent to the grid, the autohinter code can cause accents to collapse to one pixel in height, which is too small to describe a typical accent or component._ 430 | 431 | _To ensure the best readable solution, accents that need it, should be hinted to be a minimum of two pixels in height for all sizes_ 432 | 433 | ![LatinAutohinter](Images/HintDevanagariFour.gif) 434 | 435 | **Note:** In the example animation above, the y-min of the component glyphs, Uni0947 & Uni0948, reference a cvt of 171, which stores the measured outline y-min. The outline measurement for these components is lower than the main headline height. This is done to maintain an overlap when combined above another base glyph. 436 | 437 | Using inheritence, Cvt 171 is then forced to be equal to the main headline height cvt 167. This will ensure that the components, when they are used in composite glyphs, are displayed at the exact same hinted height as the main straight Headline height, for all variations. At higher sizes, when there are enough pixels, the accent can revert to using its measured height. 438 | 439 | A new cvt can be created for any group of accents or components, that share the same y-direction alignment. This will ensure that when accents are referenced in composite glyphs a consistent display and alignment will be maintained. 440 | 441 | ## Demo font NotoSerifDevanagariVF_demo.ttf 442 | 443 | Please refer to the [demo font](https://github.com/googlefonts/how-to-hint-non-latin-variable-fonts/tree/main/VTTSourcesDemoFont) to review the methods used for hinting the Noto Devanagari Variable font. A selection of the glyphs have comments on the hinting included in the VTTtalk (see list below). **Note:** _Any edits made to the hinting, using the Graphical user interface, in any of these glyphs, will result in the comments being lost.The following glyphs have have been fine-tuned, and cvt’s added_ 444 | 445 | **Hinted and fine tuned glyphs:** _(Gid 98 / Uni 0x0905), (Gid 102 / Uni 0x0909), (Gid 108 / Uni 0x090F), (Gid 149 / Uni 0x0917), (Gid 150 / Uni 0x0918), (Gid 152 / Uni 0x091A), (Gid 157 / Uni 0x091F), (Gid 159 / Uni 0x0921), (Gid 167 / Uni 0x092A), (Gid 172 / Uni 0x092F), (Gid 173 / Uni 0x0930), (Gid 174 / Uni 0x0932), (Gid 175 / Uni 0x0905)_ -------------------------------------------------------------------------------- /VTTSourcesDemoFont/NotoSerifDevanagariVF_Demo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/VTTSourcesDemoFont/NotoSerifDevanagariVF_Demo.ttf -------------------------------------------------------------------------------- /VTTSourcesDemoFont/README.md: -------------------------------------------------------------------------------- 1 | # VTT Demo Variable Devanagari VF Hinted font 2 | Demo version of OpenSans Variable font, intended for teaching and reference purposes only 3 | 4 | **Name:** NotoSerifDevanagariVF_Demo.ttf 5 | 6 | **Glyph Hinting:** Autohinted in VTT. Key representative glyphs hinted and fine tuned, with custom cvt’s added. 7 | 8 | **Demo font for reference only** 9 | The font can be used to study the methods used for hinting Devanagari. Some glyphs have comments on the hinting included in the VTTtalk (see list below). Any edits made to the hinting, using the Graphical user interface, in any of these glyphs, will result in the comments being lost. 10 | 11 | **Edits and Fine Tuning and comments** 12 | 13 | The hinting for the following list of representative Devanagari glphs has been edited and fine tuned with Custom cvt’s for Devanagari added to VTT Talk code. 14 | 15 | **Note:** These glyphs have comments on the hinting, added to the VTTTalk window. The comments refer to the line of code listed directly below each comment. 16 | 17 | **Note:** GID (Gid 98 / Uni 0x0917), has the most detailed notes on hinting. Whenever the same technique is used in subsequent glyphs, this commentary has been omitted. 18 | 19 | **Note:** GID (Gid 149 / Uni 0x0917), has detailed notes on hinting, included in the main document, _A guide to hinting complex script Variable Fonts with Visual TrueType_ 20 | 21 | - **Hinted and fine tuned glyphs:** (Gid 98 / Uni 0x0905), (Gid 102 / Uni 0x0909), (Gid 108 / Uni 0x090F), (Gid 149 / Uni 0x0917), (Gid 150 / Uni 0x0918), (Gid 152 / Uni 0x091A), (Gid 157 / Uni 0x091F), (Gid 159 / Uni 0x0921), (Gid 167 / Uni 0x092A), (Gid 172 / Uni 0x092F), (Gid 173 / Uni 0x0930), (Gid 174 / Uni 0x0932), (Gid 175 / Uni 0x0905) 22 | 23 | The Additional Devanagari glyphs, listed below, have been edited and fine tuned with Custom cvt’s for Devanagari added to VTT Talk code, to complete the text sample for the first line of the Declaration of human rights. 24 | 25 | सबो लोगन मन के गौरव अऊ अधिकार मन के मामला म जनम ले मिले स्वतं त्र ता 26 | 27 | (Gid 103 / Unicode 0x090A), (Gid 147 / Unicode 0x0915), (Gid 154 / Unicode 0x091C), (Gid 162 / Unicode 0x0924), (Gid 165 / Unicode 0x0927), (Gid 166 / Unicode 0x0928), (Gid 169 / Unicode 0x092C), (Gid 171 / Unicode 0x092E), (Gid 178 / Unicode 0x0938), (Gid 431) 28 | 29 | **Accents / Components** Hinted and fine tuned, with cvt’s added to control height placement on base glyphs. 30 | 31 | (Gid 132 / Unicode 0x0947), (Gid 133 / Unicode 0x0948) 32 | (Gid 138 / Unicode 0x0946), (Gid 337) 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /VTTSourcesDemoFont/UnHintedNotoSerifDevanagariVF/NoHintsNotoSerifDevanagariVF.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/how-to-hint-complex-script-variable-fonts/e14ddcec8970edb9507fa02fd850eb2b7d7ea808/VTTSourcesDemoFont/UnHintedNotoSerifDevanagariVF/NoHintsNotoSerifDevanagariVF.ttf -------------------------------------------------------------------------------- /VTTSourcesDemoFont/UnHintedNotoSerifDevanagariVF/README.md: -------------------------------------------------------------------------------- 1 | # VTT Demo Variable Devanagari VF Un-Hinted 2 | Demo version of Devanagari Variable VF font. This font contains no hinting code. It is intended for use for teaching and reference purposes only, in combination with *A guide to hinting complex script Variable Fonts with Visual TrueType* 3 | 4 | **Name:** NoHintsNotoSerifDevanagariVF.ttf 5 | 6 | **Glyph Hinting:** No Hinting 7 | 8 | --------------------------------------------------------------------------------