search

photopea / Typr.js

Typr.js - process fonts in Javascript
MIT License
914 stars 73 forks source link

Apply bold and italic styles with additional fonts files. #23

Closed vinaydotblog closed 5 years ago

vinaydotblog commented 5 years ago

I do understand that you need separate font files for bold, italic and bold-italic respectively. But is there any possibility of applying these styles to font object, may be by manipulating the font object's data ?

Similarly how browser fakes these style without requiring additional font files. http://nimbupani.com/fake-bolding-of-web-fonts.html

I can write the utility for the same, but my lack of understanding of Typr's font object wont allow me to do so. I'm ready to contribute towards it, if you can give me some direction.

Thanks :)

photopea commented 5 years ago

Hi! :) "Bold" is just one of many words used to describe varios weights of fonts. Authors often use "hair", "thin", "ultralight", "extralight", "light", "medium", "semibold", "demibold", "bold", "extrabold", "heavy", "ultra", "black", "x black" ....

One font usually contains one glyph (vector shape) for each character. I.e. there are no "bold" / "thin" / "italic" versions of the character shape. Those are usually stored in separate font files.

Artifficial "bolding" of shapes is a graphic operation on a vector shape. It has no relation to OpenType format, or Typr.js . You can use Typr.js to extract vector shapes of characters, and apply your bolding method to them. See the format of "paths" described at the home page (and the live demo, where paths are printed).

vinaydotblog commented 5 years ago

Thanks for such descriptive answer. I also found out that there is no standard way to apply bold. It is basically defined by font makers in their own way.

photopea commented 5 years ago

There exists software, which can "embolden" text, see here - "The Change Weight Dialog" - https://fontforge.github.io/Styles.html .

vinaydotblog commented 5 years ago

I'll take a look at it. @photopea Thanks.