tvandervossen · July 15, 2014 05:36
diff --git a/gistfile1.txt b/gistfile1.txt
 The goal of this guide is to define a workflow for generating icon webfonts that are 1. optimized for “pixel perfect” rendering at specific font-sizes and that 2. render consistently across modern platforms and browsers.


 Glyphs.app settings and workflow

 When you create a new font, remove all glyphs generated by default (first select them, then use the “-” button at the bottom). Icons should be created within a Unicode Private Use Area (PUA), not at the Unicode code points of existing characters.

 In Glyphs.app, choose File → Font Info (⌘I), then select the “Font” tab. Set “units per Em” to 2048. You can also set a “Family Name” here.

 Switch to the “Masters” tab. Set “Ascender”, “Cap Height”, and “x-Height” to 2048 and “Descender” to -128.

 Switch to the “Other Settings” tab. Set “Grid Spacing” to 128 and “Subdivisions” to 128. This will give you a 16×16 grid that corresponds with the pixel grid when the icons are renderd at a font-size of 16px.

 You’re probably going to change the “Subdivisions” value a lot while drawing, but keep in mind that Glyphs.app snaps all points to the grid for almost any operation. Remember that you can easily open this dialog with the ⌘I shortcut.

 Finally, notice the “Instances” tab. Glyphs.app will create an instance for you here when you first export your font. You can also do that now by clicking the “+” button. You might want to change the “Style Name” that gets appended to the exported .otf file.

 Create a new glyph by clicking the “+” button. Click the name below the glyph to change it to “uniE001”. This will create your first character in the Private Use Area.

 You can add new glyphs with any hexadecimal number from U+E001 to U+F8FF. Don’t use U+E000 as this seems to trip up the Font Squirrel Webfont Generator.

 Double-click the icon. At the bottom change the width (“w”) to 2048. You now have a 16×16 square glyph area to create your icon in.

 Note that you should draw inside the square area at the top, the rectangle at the bottom is the descender area you’d probably want to stay away from.

 See the Glyphs.app Manual for more information on how to draw.

 Export the font to an .otf file with File → Export (⌘E).


 Font Squirrel Webfont Generator

 http://www.fontsquirrel.com/tools/webfont-generator

 Choose “Expert”. Set Truetype Hinting to “Keep Existing”. Check “Fix Vertical Metrics”. Set “x-height Matching” to “None”. Set “Subsetting” to “No Subsetting”. Deselect every other option. Make sure that “Em Square Value” is set to 2048 and that “Adjust Glyph Spacing” is set to 0. I prefer to remove the “Font Name Suffix” as well.


 Browser notes

 You might get blurred rendering of vertical lines in IE 9 and up as a result of sub-pixel positioning when you include the icons as inline elements in running text or when you separate them with spaces.


 Different “units per em” value

 You can use a different value for “units per Em” in Glyphs.app and “Em Square Value” in the Webfont Generator in case you’re optimizing for a pixel grid height that isn’t cleanly divisible by 2048. Make sure to adjust the other vertical metrics accordingly as well.
	The goal of this guide is to define a workflow for generating icon webfonts that are 1. optimized for “pixel perfect” rendering at specific font-sizes and that 2. render consistently across modern platforms and browsers.


	Glyphs.app settings and workflow

	When you create a new font, remove all glyphs generated by default (first select them, then use the “-” button at the bottom). Icons should be created within a Unicode Private Use Area (PUA), not at the Unicode code points of existing characters.

	In Glyphs.app, choose File → Font Info (⌘I), then select the “Font” tab. Set “units per Em” to 2048. You can also set a “Family Name” here.

	Switch to the “Masters” tab. Set “Ascender”, “Cap Height”, and “x-Height” to 2048 and “Descender” to -128.

	Switch to the “Other Settings” tab. Set “Grid Spacing” to 128 and “Subdivisions” to 128. This will give you a 16×16 grid that corresponds with the pixel grid when the icons are renderd at a font-size of 16px.

	You’re probably going to change the “Subdivisions” value a lot while drawing, but keep in mind that Glyphs.app snaps all points to the grid for almost any operation. Remember that you can easily open this dialog with the ⌘I shortcut.

	Finally, notice the “Instances” tab. Glyphs.app will create an instance for you here when you first export your font. You can also do that now by clicking the “+” button. You might want to change the “Style Name” that gets appended to the exported .otf file.

	Create a new glyph by clicking the “+” button. Click the name below the glyph to change it to “uniE001”. This will create your first character in the Private Use Area.

	You can add new glyphs with any hexadecimal number from U+E001 to U+F8FF. Don’t use U+E000 as this seems to trip up the Font Squirrel Webfont Generator.

	Double-click the icon. At the bottom change the width (“w”) to 2048. You now have a 16×16 square glyph area to create your icon in.

	Note that you should draw inside the square area at the top, the rectangle at the bottom is the descender area you’d probably want to stay away from.

	See the Glyphs.app Manual for more information on how to draw.

	Export the font to an .otf file with File → Export (⌘E).


	Font Squirrel Webfont Generator

	http://www.fontsquirrel.com/tools/webfont-generator

	Choose “Expert”. Set Truetype Hinting to “Keep Existing”. Check “Fix Vertical Metrics”. Set “x-height Matching” to “None”. Set “Subsetting” to “No Subsetting”. Deselect every other option. Make sure that “Em Square Value” is set to 2048 and that “Adjust Glyph Spacing” is set to 0. I prefer to remove the “Font Name Suffix” as well.


	Browser notes

	You might get blurred rendering of vertical lines in IE 9 and up as a result of sub-pixel positioning when you include the icons as inline elements in running text or when you separate them with spaces.


	Different “units per em” value

	You can use a different value for “units per Em” in Glyphs.app and “Em Square Value” in the Webfont Generator in case you’re optimizing for a pixel grid height that isn’t cleanly divisible by 2048. Make sure to adjust the other vertical metrics accordingly as well.
No results found