FontLab : export issue for web use

Joja f
Joja f Posts: 4
edited February 2022 in Font Technology

I needed to modify an existing font by changing the vertical scale. I did it with FontLab and the result was nice. Then I export it for web (woff/woff2), I upload it on my website and ... the hinting looks very bad. Some letters are smaller than others, some horizontal bar of the "e" letter are barely visible (except if I put the font size at "25px and more")...

Exemples : 

For "Our Philosophy" => "U" and "H" aren't at the good height in the edited font

ATTACHEMENT NOT ALLOWED

Font before edit

ATTACHEMENT NOT ALLOWED

New edited font

Here => hinting looks really bad in the edited version

ATTACHEMENT NOT ALLOWED

Font before edit

ATTACHEMENT NOT ALLOWED

New edited font

For the "old font" I was using the default font with "transform scale (1, 1.2) in CSS. I need to stop this because "transform" affects all the children of the element. That's why I wanted to create a font with the vertical scale set at 120% by default.

Any idea ?

Thx all !

Tagged:

Comments

  • Joja f
    Joja f Posts: 4
    edited February 2022
    For "Our Philosophy" => "U" and "H" aren't at the good height in the edited font

    rtypography - FontLab export issue for web use

    Font before edit

    rtypography - FontLab export issue for web use

    New edited font

    Here => hinting looks really bad in the edited version

    rtypography - FontLab export issue for web use

    Font before edit

    rtypography - FontLab export issue for web use

    New edited font

  • Thomas Phinney
    Thomas Phinney Posts: 3,011
    Although your images were not allowed, two things spring to mind as very plausible potential problems:

    - need to scale standard heights and alignment zones (a.k.a. “blue zones”) with the font rescale, or adjust them afterwards

    - glyph-level hints need to be deleted and redone, if they were not adjusted as part of the initial rescaling
  • Joja f
    Joja f Posts: 4
    edited February 2022
    Thanks for your reply ! 
    As you can see in my comment (after the post), i have upload some pics. 
    I am a newbie in police editing but I will try my best to follow what you suggested :)
  • Saurabh Sharma
    Saurabh Sharma Posts: 23
    As Mr. Thomas said, re-calculate zones and stems by clicking on the heart icon inside Font Info panel.

    You can export the font as ttf without hinting. Then use TTFAutoHint GUI (or console, as you are comfortable with). Alternatively, you can also choose TTFAutoHint as hinter inside FontLab's Font Info > Other Values > TruType Hinting and Smoothing.

    In TTFAutoHint GUI there are three settings which affect the result as you have mentioned. These are:

    Grayscale, GDI ClearType and DW ClearType. All these three have individual three values as "Natural", "Quantized" and "Strong". If you set these to Natural or Quantized, the result will be smoother.



    Once you are sastisfied with the ttf result, convert this into woff using any online ttf-to-woff converter.
  • Joja f
    Joja f Posts: 4
    edited February 2022
    Saurabh Sharma said:
    As Mr. Thomas said, re-calculate zones and stems by clicking on the heart icon inside Font Info panel.

    You can export the font as ttf without hinting. Then use TTFAutoHint GUI (or console, as you are comfortable with). Alternatively, you can also choose TTFAutoHint as hinter inside FontLab's Font Info > Other Values > TruType Hinting and Smoothing.

    In TTFAutoHint GUI there are three settings which affect the result as you have mentioned. These are:

    Grayscale, GDI ClearType and DW ClearType. All these three have individual three values as "Natural", "Quantized" and "Strong". If you set these to Natural or Quantized, the result will be smoother.



    Once you are sastisfied with the ttf result, convert this into woff using any online ttf-to-woff converter.
    Thank you very much !! You saved me ahah
    Very clear and helpful, love you bro ! 

Categories