Brick by Brick, the FontStruct Blog

The FontStruct Blog

Layers and Color

News | | June 17th, 2021

Dear FontStructors,

We are introducing three new features today.

For Everyone: OpenType/CFF Downloads

Strictly speaking this is not a new feature, but hitherto it was Patron-only. From today, all FontStructors will be able to download any appropriately-licensed FontStruction in the OpenType/CFF format. You can read more about the format and its qualities in this earlier blog post.

Layers (Patrons Only)

Layers were a part of the original FontStruct concept, and now, over 13 years later, we’re finally implementing them in the FontStructor.

To access the new Layers window, simply go into Expert Mode and then choose View->Layers from the Menu:

Layers Menu

Each FontStruction starts with one default layer, but you can add up to a total of eight.

Layers can be sorted using drag and drop, renamed, and, of course deleted if they are empty.

Layer visibility can also be toggled, and invisible layers will be excluded from the download. This opens up the possibility of creating guide layers which you keep visible while designing but hide for download.

I’m confident that the our wily Patrons will come up with many ingenious uses for layers, but perhaps the main reason for introducing them is to allow us to introduce something else, something entirely new to FontStruct …

Color Fonts (Patrons Only)

Layers and Colours

For good reasons, most real-world design employs only monochromatic glyphs. There is also plenty of scepticism in global design communities regarding the value of color fonts. Some see them as gimmicky, while others are frustrated that, up until now, for the most part, the colors are “baked-in”, and can’t be changed without editing the font itself.

But, polychromatic fonts do have clear uses: for icon sets for example, for emojis (yes, I know we don’t offer emojis as an option in the FontStructor yet) games and other custom projects.

Most importantly perhaps, color fonts are fun to create and use. I think they are a good match for FontStruct – already the birthplace of so many, wonderfully-extravagant display fonts.

So, with up to eight layers in the FontStructor, you can now work with up to eight separate colors. Simply assign a color to each layer using the color-picker.

Layer Color Picker

You can download your multicolored font from the FontStruction’s download page. The “Richard of York” image above was created using a color font built using FontStruct.

Note that only certain desktop software supports color fonts, and there are a number of competing formats.

The format we are offering initially is called “OpenType SVG”. This format is supported by Windows, OSX, by Sketch, the Affinity software, Adobe Photoshop, Illustrator and InDesign, by Paint.NET and by some (but not all!) browsers. Note that OpenType SVG fonts also always contain a monochromatic fallback version of each glyph, and you will always be able to download traditional TrueType and OpenType versions from FontStruct.

This is only the first step in our exploration of color fonts. We hope to add support for other color font formats (such as COLR) in the future to offer wider browser support. We may also add a multi-font download option whereby each layer can be downloaded as a separate font.

Become an FS Patron

As these are “niche” features, it’s likely that we will keep layers and color fonts as patron-only in the medium-term and possibly even long-term. If you are desperate to try out color designs in the FontStructor, remember that you can sign up to be a patron at any time to not only enjoy access to this feature, but also to directly support the ongoing development of FontStruct as a whole.

Thanks

Thanks, as always, to our wonderful sponsors GlyphsApp, and to our treasured Patrons.

Happy FontStructing!

P.S.

architaraz has created a great introductory video tutorial on creating a color font using FontStruct.

 

 


39 Comments

  1. elmoyenique

    @meek: Thanks a million for these huge advances, Boss! I am really looking forward to trying them! Thanks again for the enormous effort and dedication you put into this increasingly wonderful FontStruct! Every day is better than the one before.

    elmoyenique — June 17, 2021 #

  2. Frodo7

    This is awesome. Thank you.

    Frodo7 — June 17, 2021 #

  3. bluemon

    So cool! I’m excited to see what people will make with them

    bluemon — June 17, 2021 #

  4. BWM

    I’m excited for when they are availble for everyone (It’s probably beta stuff, so the patrons probably gets to try them out first…)

    BWM — June 17, 2021 #

  5. beate

    👻 So great! Wow! That’s just amazing!

    beate — June 17, 2021 #

  6. jirinvk

    i couldn’t resist trying it immediately and i am excited. thanks a lot!

    jirinvk — June 17, 2021 #

  7. Rob Meek (meek)

    @jirinvk – I saw it. Very nice! The first Chromastruct.

    Rob Meek (meek) — June 17, 2021 #

  8. BWM

    @meek Will the layers on top be rendered first or last?

    BWM — June 17, 2021 #

  9. jirinvk

    in the long past, i was preoccupied with making grid-based colored patterns. so, i am excited i can re-create them in Fontstruct now (and even make new ones). everything works well! big thanks once again!

    jirinvk — June 17, 2021 #

  10. BWM

    Will every layer be affected by the filters that are set in the FontStruction or will each layer have their own specific filter settings for brick size?

    BWM — June 17, 2021 #

  11. fontlanger2005

    Hello, cool feature, but what will happen to the left-turn hotkeys?

    fontlanger2005 — June 17, 2021 #

  12. IheartRussian

    i didn’t know that this was here when i was editing long existence when i pressed Shift+L

    IheartRussian — June 17, 2021 #

  13. Rob Meek (meek)

    It looks like the layers feature may be accessible to non-patrons via the keyboard shortcuts. I will remove this possibility as soon as I can. Layers and colors are intended only to be accessible to patrons.

    Rob Meek (meek) — June 17, 2021 #

  14. Rob Meek (meek)

    @IheartRussian. Yes that’s a mistake. The feature is not open to all users and I will remove that keyboard shortcut as soon as possible.

    Rob Meek (meek) — June 17, 2021 #

  15. Rob Meek (meek)

    @BWM The filters are not global and not layer specific.

    Rob Meek (meek) — June 17, 2021 #

  16. Rob Meek (meek)

    @BWM the top layer should be rendered last (on top)

    Rob Meek (meek) — June 17, 2021 #

  17. IheartRussian

    also shift+l is also rotate left why did you make layers shift+l

    IheartRussian — June 18, 2021 #

  18. minimum

    What a cool new feature. I don’t think I’m breaking any 20 (25?) year old NDA here when I say this takes me back to when I used to be a beta tester for CorelDraw before there was such a thing as color gradients. New features used to be significant and exciting. As is this.

    minimum — June 18, 2021 #

  19. Khalfani

    The color feature would be interesting for pixel fonts, since there can be true anti-aliasing

    Khalfani — June 18, 2021 #

  20. erictom333

    Nice! Probably won’t need to use the colors, except for a select few emojis. I’m more eager for extending Unicode support to the SMP – I’ve had to move a few blocks, like Phoenician, into the PUA temporarily.

    erictom333 — June 18, 2021 #

  21. Shiba_Blopotter

    Now this is epic

    Shiba_Blopotter — June 19, 2021 #

  22. Frodo7

    @Rob Meek (meek): The user interface elements are messed up. Some GUI elements are drifted down and right, some are invisible. Yet everything works if you know what button/arrow was there.

    Frodo7 — June 19, 2021 #

  23. elmoyenique

    I’m with Frodo7. Also, when you select a brick and nudge it, it does strange things, but ends up obeying. In general everything works fine, but maybe we get along because we know FontStruct and what key to press to get something. It’s very exciting see at work this new colored bricks, Boss.

    elmoyenique — June 19, 2021 #

  24. Rob Meek (meek)

    @erictom33 We will be reviewing Unicode support at some point.

    Rob Meek (meek) — June 19, 2021 #

  25. Rob Meek (meek)

    I think the issue with the GUI elements is fixed. You may need to clear your browser cache.
    I’ll look into the nudging issues.

    Rob Meek (meek) — June 19, 2021 #

  26. BWM

    The same thing was happening with dragging the bricks as well (This had happened for me yesterday)… When I selected multiple rectangles of bricks and moved it one ro the right, the bricks did not go where I expected it to go…

    BWM — June 19, 2021 #

  27. Frodo7

    @Rob Meek (meek): The GUI problem is fixed. Thank you.

    Frodo7 — June 19, 2021 #

  28. elmoyenique

    @meek: Sorry, dear boss. I cannot see the colors in the downloaded font (svg or otf format) when I open it in my usual design programs. Forgive my stupidity, but how can I get to see the font with its colours? There must be a simple silly step that I did not take. In the catalog of installed fonts and in the other programs, whenever I try, the black version appears… 😭

    elmoyenique — June 19, 2021 #

  29. Rob Meek (meek)

    @elmo It depends on what software you are using. Your font works for me on OSX. Installed using “Font Book” and Adobe Photoshop. You need to download the “TrueType + SVG“ option. Perhaps there might also be issues if you have a different version of the font installed at the same time(?)

    Rob Meek (meek) — June 19, 2021 #

  30. Logan2020

    this is a cool feature! but sadly i cant afford FS patron.

    Logan2020 — June 19, 2021 #

  31. erictom333

    @Rob Meek Thanks. I’ll consider paying for patron status.

    erictom333 — June 19, 2021 #

  32. DarkGuy572

    Mr. Meek, are the Patrons-only features like colours and layers going to be for everyone soon and not just Patrons?

    DarkGuy572 — June 20, 2021 #

  33. Rob Meek (meek)

    @DarkGuy572 It’s patrons-only for the forseeable future.

    Rob Meek (meek) — June 22, 2021 #

  34. architaraz

    I saw a message that said you changed the shortcut of layers from Shift L to Shift Q. But Shift L still shows layers for me and it’s not rotating left. I am on MacOS. Cleared caches and everything. Same issue both on Safari and Chrome.

    architaraz — June 23, 2021 #

  35. elmoyenique

    I’m with architaraz: “Turn Left” don’t work. And I’ve already commented before about some “weird” ways FS works now. E.g.: when you select a brick and push it, the brick does “strange things” (it moves 2 spaces with a click, or 4 with 2… ???), although it ends up obeying with a bit of calm; when you select two bricks and want to push them multiple times at once (left, right, down, up, it doesn’t matter) one is moving correctly, but the other is moving much further. I have also detected problems with the options to undo because the bricks moved or changed in the previous way make those that occupied the places where they were erroneously moved disappear and do not allow the option to undo and return them to their place, leaving their space blank. Surely, with a little time, the Big Chief will sort it out.

    elmoyenique — June 23, 2021 #

  36. architaraz

    Some bugs: Bricks swapping not working.

    Some layers’ bricks can’t be deleted, copied, selected.

    architaraz — June 24, 2021 #

  37. DarkGuy572

    And by “forseeable future”, how long do you mean?

    DarkGuy572 — June 25, 2021 #

  38. four

    Wow, this is an exciting development!

    four — June 25, 2021 #

  39. Sychoff

    OpenType downloading does not work correctly. The glyphs become too large.

    Sychoff — June 26, 2021 #