Download for Windows Download for Linux Download for FreeBSD Download for Mac Manual Wiki Forum IRC Trac

Saturday, November 29, 2008

Font hinting and you

Image showing the difference between Arial size 8 scaled 40x and Arial size 320.... or why you should not use animation on the \fs override tag.

Do you know what font hinting is? If you haven't worked with digital typography you might not, but it's a technique used by (almost) all font rendering systems to make vector fonts (such as True Type, Open Type and Adobe Type 1) appear better on low-resolution mediums like computer monitors. (Actually CRT TV screens are even worse.)

Usually glyphs ("characters") in outline fonts have quite some detail in them, but if you only have 7x13 pixels to render a character in, you're going to have a hard time fitting all that detail in, even if you use sub-pixel rendering such as anti-aliasing and ClearType. That's where font hinting comes it. It's a technique for intelligently modifying the outlines of characters so they look better without completely losing the characteristics that makes the font face special. The basic idea in font hinting is to snap the outlines to the edges of pixels, such that stems and vertical lines take up a whole number of pixels instead of disappearing in quantisation or become a smudge of sub-pixel noise.

So what does that have to do with subtitles? Well, the amount of hinting applied to a glyph depends on the point size of it. The bigger the point size, the less strong the hinting needs to be. For example, here's some text in Verdana at different sizes:

Verdana 8 pixels
Verdana 12 pixels
Verdana 30 pixels


Depending on your font rendering system it might look different (eg. Windows and Macintosh OS X render quite differently) but at least if you're on Windows you should be able to see that the shapes of the letters actually change a bit. The smaller the text size, the more drastic the change.

It's this change of glyph shapes that's interesting in subtitle context. If you've ever needed to have some text change size on screen in ASS subtitles you might have considered whether you should use \t(\fs) or \t(\fscx\fscy). It's the latter that's correct. When you animate the \fs tag you're changing the actual font size requested of the font subsystem, and this also affects the hinting applied to the text.

This leads me to the image at the start of this post: Both of the top two lines with "Test" are rendered in what should have been Arial size 40. But the upper has been given its size with \fs1\fscx4000\fscy4000 while the lower has been given its size with \fs40\fscx100\fscy100. Because VSFilter internally works at 8 times resolution, the upper line is requested as Arial with a font-height of 8 pixels, so it's hinted to look best when rendered just 8 pixels tall, while the other line is requested as 320 pixels tall Arial. The red/blue at the bottom are the same two lines with the border removed, then laid over each other.

Do you now see why you shouldn't animate the font size, but rather the font scale?

Related Posts by Categories



25 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Very useful tip, thanx for sharing! ;)

    ReplyDelete
  3. Thanks, this explain some bugs in my scripts. :)

    ReplyDelete
  4. The college paper editing services will help you in all matters whatever the writing is consider. It is very helpful.

    ReplyDelete
  5. I usually use two applications retrica , b612 to capture and edit photos. It is very beautiful. And to speak and daily news updates from friends, I use baixar facebook , baixar facebook

    ReplyDelete
  6. Nike Skateboarding is bringing back the Zoom Stefan Janoski Mid for the colder months, which includes this Nike SB Zoom Stefan Janoski Mid Dark Nike Air Yeezy 2 Obsidian colorway.Dressed in a Dark Obsidian, Light British Tan and Birch color scheme. This mid-top Nike SB Stefan Nike Air Max Janoski features a Navy leather upper with a fury inner lining and Brown contrasting accents. Giving the shoe nike free flyknit a boot vibe are the D-ring eyelets.Check out the additional images below and look for the Nike SB Nike Roshe Run Zoom Stefan Janoski Mid “Dark Obsidian” available today through select Nike SB retail stores, including Titolo and Nike.com. Nike Flyknit Chukka The retail price tag is set at $100 USD.
    The Nike Roshe 2 receives a full makeover for Nike Flyknit Air Max Fall 2016 with this winterized Nike Roshe 2 Hi Flyknit version.First seen as part of the Nike SneakerBoots Kobe shoes Fall 2016 Collection. This is a women’s exclusive release that features a full leather bootie with a sock-liner Kyrie 2 on the inside. The forefoot area of the shoe is built with Nike’s Flyknit, while sitting atop a Nike Outlet Store Sneakerboot-inspired Roshe outsole.Check out the official images below and look for the Nike Women’s Roshe 2 Hi Flyknit Nike Air Max to release on November 3rd.
    A Black and White Nike KD 9 Oreo will officially be making a Nike Basketball Shoes debut during the holiday season in December.Dressed in a clean White and Black color scheme. This Nike KD Nike Shoes 9 features a full Nike Flyknit constructed upper with solid Black Nike Swoosh logos. A Black speckled midsole LeBron 11 completes the “Oreo” theme.Look for the Nike KD 9 “Oreo” to release on December 15th, 2016 at select Nike Flyknit Racer Nike Basketball retail stores. The retail price tag is set at $150 USD.
    The Nike KD 9 Game Nike Flyknit 4.0 Royal also known as the Nike KD 9 On-Court will be a brand new colorway debuting in November.Dressed Nike Air More Uptempo Black in a Game Royal, Black and White color scheme. This Nike KD 9 features a mix of Game Nike Yeezy

    ReplyDelete
  7. Wonderful blog! I found it while searching on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Many thanks.
    2048 online | tanki online 3 |

    ReplyDelete
  8. If you set out to make me think today; mission accomplished! I really like your writing style and how you express your ideas. Thank you.
    check this link right here now

    ReplyDelete
  9. I am very thanks for the blog post. I may see a good deal of approaches after seeing your post, photoshop online Alternative is a perfect alternative to photoshop. A free photos edit includes all the basic features as well as the extra bells and whistles that most people need to photoshop and enhance their photos and images.

    ReplyDelete

If you need help with Aegisub or have a bug report please use our forum instead of leaving a comment here. If you have a feature request, please go to our UserVoice page.

You will get better help on our forum than in the blog comments.