2

Inspired by:

  1. The new Kellum method
  2. Adobe Blank
  3. GitHub: jpkempf / zero-width-web-font

... I'd like to add non-spacing and non-marking glyphs to a font I've created in FontLab Studio 5.

The only problem is, I'm not sure how to do it.

Question: How do I create non-spacing and non-marking glyphs (in FontLab)?

I'm using FontLab Studio. Though, I would be open to hearing how I'd go about making non-spacing and non-marking glyphs in general (or, in other apps). I'm hoping that even if I don't get FontLab Studio-specific guidance, maybe hearing how to do it in other apps will point me in the right direction for when it comes to using FLS.

Note: This is for a "logo" web font. I'd like to type "Business Name", where the "B" is the logo, and the other letters are non-spacing and non-marking glyphs.

0

2 Answers 2

2

Update:

For more information on this technique, see forum thread here.


Note: Full credit for this answer goes to @yakunins and his answer above.


Using FontLab Studio v5.1.3, Mac:

1) Open .vfb:

Assuming you already have your icon/logo setup:

screen

2) Enable desired "blank" glyphs:

For this font, here's a list of characters I want to be non-spacing and non-marking:

. C E H I K L M O S U Y c e h i k l m o s u y

Note: The above will allow me to type my domain name, or real name, where only the "M" or "m" will produce a character.

Note: I'm not applying blank characters to all glyphs because I'm going to subset only the characters above when generating the web font versions at Font Squirrel (using the "Expert" mode).

Double-click to "enable" each desired glyph. The end result should look something like this:

screen

Note: After double clicking, you'll notice that the "Glyph Properties" window will assign that glyph default values:

screen

2) Select only the blanks:

Using Command + Click, select all of the blank glyphs:

screen

3) Make all the glyphs to have zero width:

Choose: ToolsAction...MetricsSet width (0 C).

In the "Set width to" input field, type 0 and click "Ok".

screen

Note: If prompted, click "yes" to apply to all selected glyphs.

4) Scale all the contours in glyphs to zero sized area:

Choose: ToolsAction...ContourScale.

Check the "Proportional Scale" check box and type "0.01" into the "Horizontal Scale" input field.

Do not apply to entire font (as we only want to apply the scale to the selected glyphs).

screen

Note: If prompted, click "yes" to apply to all selected glyphs.

5) Remove all hints, classes and kerning pairs:

Choose: ToolsAction...Hints and GuidelinesRemove hints/guides [BL N].

screen

Note: If prompted, click "yes" to apply to all selected glyphs.

6) Remove all contours and points:

Choose: ToolsAction...ContourCleanUp [E,4]Simplify paths.

Uncheck "Insert nodes at extremes (recommended)" box and type "1" into the "Simplify paths" input field.

screen

Note: If prompted, click "yes" to apply to all selected glyphs.


Notes:

Feedback? Did I miss a step or do something wrong?

5
  • 1
    Notice “Apply to entire font” checkbox in acton dialogue. In fact you don't need to select all glyphs.
    – yakunins
    Dec 26, 2013 at 8:06
  • 1
    I think you don't need to change classes. There are two ways to deal with kerning. Kerning assistance in Tools menu. Also kerning pairs can be deleted from special panel in Metrics window. BTW When you edit compiled font (e.g. .ttf or .otf) you should keep in mind that there is binary kerning data stored in the file.
    – yakunins
    Dec 26, 2013 at 8:13
  • 1
    I think you've made a very good instruction :)
    – yakunins
    Dec 26, 2013 at 8:22
  • Thank you @yakunins!!! I did not choose "Apply to entire font" because I have two logos on "M" and "m" that I don't want to be altered. Maybe next time though, I should start with a fresh document, apply the above changes, and then add my logos? I'll keep experimenting. Thanks again for all of your pro help, I greatly appreciate it! :)
    – mhulse
    Dec 26, 2013 at 18:09
  • Update: I just realized that I need to double-click on the glyphs in order to add them to my font (doing so changes the gray background to white); once I've done this, then the Actions ... actually work on the selected glyphs. I'll update my screen shots once I've learned more.
    – mhulse
    Dec 26, 2013 at 19:23
1

I just made such font in this way:

  1. I made all the glyphs to have zero width: Ctrl+A → Tools → Action → Metrics → Set width (0)
  2. I scaled all the contours in glyphs to zero sized area: Scale (1%) × 3 times
  3. I removed all hints (via actions), classes and kerning pairs, you'll figure it out
  4. Trick! I removed all contours and points: Ctrl+A → Tools → Action → Contour → CleanUp → Simplify paths (1)

Voila! You can choose a font on Google Fonts for this purpose. I guess there are many fonts that license endorse this kind of edits.

6
  • Wow! Thanks for all the awesome info! Questions: 1) When you say "Scale (1%) × 3 times", did you do each glyph by hand or is there a way to automate (via an action, perhaps)? When you say "I removed all contours and points", how/why would I apply that to empty glyphs? I'm working with a font that has two glyphs (a logo on the "M" and "m" glyphs, everything else is empty). Thank you so much!!!!
    – mhulse
    Dec 26, 2013 at 5:24
  • Based on your answer, I've posted an answer below. I'd love to get some feedback! Did I miss a step? I could not find the spot to remove "classes and kerning pairs". Thanks again @yakunins!!!!
    – mhulse
    Dec 26, 2013 at 6:00
  • “Scale (1%) × 3 times” is better to replace with the method from your answer: Scale (-0.00, -0.00) HMZ + Apply to entire font
    – yakunins
    Dec 26, 2013 at 8:28
  • 1
    Regarding you task... I guess you are trying to handle situation when browser can't properly render font in the logo. You can put logo's image in the layer beneath a span with font logo. This span must be not translucent (has background color). If the span does not fit within some predefined size interval (wrong or broken font is being used) - it must be hidden by JS.
    – yakunins
    Dec 26, 2013 at 8:46
  • Thanks for tips! Also, I'm not sure how to set "Scale (1%) X 3 times" in the Contour >> Scale section of the Actions window. Should I enter in different values? I'll need to look at that section later tonight and I'll post my findings if I can figure it out. Thank you so much!
    – mhulse
    Dec 26, 2013 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.