Brick by Brick, the FontStruct Blog

Happy 7th Birthday FontStruct

News | | April 1st, 2015

sevens-detail

Click the image to see 256 choice “seven” glyphs from the past seven years.

Dear FontStructors,

FontStruct was launched to the public on the first of April 2008.

1,047,435 users, 933,072 font designs and 1,286,686 downloads later we now have a public gallery showing 37,391 FontStructions. Thanks and congratulations to everyone who’s contributed over the past seven years. Extra special thanks as always to our main sponsor FontShop whose support continues to make all of this possible.

The FontStruct community has built a magnificent archive of modular typefaces over the past seven years and it deserves a fitting showcase, so today we’re launching an enhanced version of the gallery pages to make them faster to load, easier to use, and hopefully more attractive.

new-gallery-detail

Too wide to illustrate in this slim blog layout!

The biggest change is a new, wider layout with much larger image previews of the FontStructions themselves.

autocomplete-detail

The new search box suggests tags and offers direct links to matching FontStructions.

As you can see, we’ve added support for search suggestions. We’ve also tried to optimise the metadata (the information shown on the right next to each FontStruction), so for example we’re now showing license information in the gallery for the first time.

The new large previews are drawn by a new piece of software called the FontStruct Renderer. You’ll notice that they’re darker and “heavier” than the old previews. We’ll continue to optimise and improve the new renderer but it gives us much more flexibility in how we preview FontStructions, and it allows us to stop using Adobe Flash on Gallery pages. We hope to stop using Flash anywhere on the site eventually (yes even for the FontStructor).

We will also continue overhauling other parts of the website. “My FontStruct” font listings and Favorites are very similar to the main Gallery pages, so they are likely to be next in line for an update.

Please let us know what you think about the new Gallery by commenting on this post.

Thanks for reading and happy FontStructing!

 

 

 


30 Comments

  1. j4s13

    …! Look at 3FINO. Still flawed, please fix. This has been here for ages, it’s about time.

    j4s13 — April 1, 2015 #

  2. Rob Meek (meek)

    @j4s13 Sorry, I don’t understand.

    Rob Meek (meek) — April 1, 2015 #

  3. j4s13

    The display is still flawed. The diagonals are a great example. Try Abneurone/cirque’s FSes to get a glimpse.

    j4s13 — April 1, 2015 #

  4. Rob Meek (meek)

    Thanks for clarifying. Yes, I’m aware of that issue. The new renderer can do something closer to what you want:

    NoStrokeRender

    So there’s hope. But there are other issues involved so it’s not as simple a fix as you might hope, so I’ll have to ask you to be patient. Once the new gallery and renderer is working properly we can tweak it and improve.

    Rob Meek (meek) — April 1, 2015 #

  5. ETHproductions

    Happy 7th birthday, Fontstruct! :)

    I really like the collection of sevens! It’s awesome to see the vast creativity of the Fontstruct community.

    I love the new renderer, especially the fact that you can easily keep an customized, up-to-date version on any webpage! It would be awesome if there were a tool to create your own .PNG preview using the renderer. I wonder if it works right here:

    I really like the cool new gallery design! I did notice a few issues:

    – You can vote on and favorite your own fonts (fun, but not politically correct)
    – Any fonts with more than a few tags don’t display them all
    – Gallery pages seem to take considerably longer to load (although it’s probably because there are now 32 fonts per page, instead of 10)
    – Whenever the category is changed, the list sorts by sharing date
    – The search suggestion cuts off the right side of some fonts “A”s (pretty minor, but could be improved)

    I hope that these things can be taken care of as you can get to them. Thanks again for all your hard work on improving the site!

    ETHproductions — April 1, 2015 #

  6. ETHproductions

    I guess the preview didn’t show up. May I ask how you used it in your comment, Mr. Meek?

    ETHproductions — April 1, 2015 #

  7. Rob Meek (meek)

    @ETHproductions. Thanks for the feedback. There are some teething problems – the page load time is the one I will deal with first – in the next few days. The rest of the issues will be fixed after that. Reducing the number of tags shown is intentional – some people go overboard with the number of tags they use. Having said that tagging is pretty primitive on FontStruct and I’d like to improve it more generally. I’m not sure what happened to your preview, I used the “img” button in the wordpress comment box – maybe only admins can do that(?)

    Rob Meek (meek) — April 1, 2015 #

  8. gingerbeardman

    I came by to see if the Fontstructor had been converted to HTML5 yet. Positive signs that it is on the roadmap. Thanks and Happy Birthday!

    gingerbeardman — April 1, 2015 #

  9. Rob Meek (meek)

    @gingerbeardman. Thanks! A HTML5 FontStructor is in development. I’d be disappointed if it wasn’t released before our next Birthday.

    Rob Meek (meek) — April 1, 2015 #

  10. p2pnut

    Congratulations on the 7th Birthday. A massive THANK YOU for all the hard work that has gone into making FS such a joy to participate in.
    Thanks also to FontShop for their continuing support.

    The new Gallery is impressive – cheers!

    p2pnut — April 2, 2015 #

  11. Rob Meek (meek)

    The initial performance glitches should be fixed now.

    Also, you can no longer Vote for or Favorite your own work, so I hope everyone made the most of the last 24 hours ;-)

    A note on render (preview image) quality: As you all know FontStructions are made up of lots of separate bricks. They are not joined together until you download the font files. Joining the bricks together takes a lot of processing power and we, probably, don’t have enough power to do that whenever we need it (i.e. to make a preview image). So when we make a preview image either with the new renderer, or with Flash we draw each brick individually. If we just fill each brick shape, we will often see thin hairlines of white between the bricks. Here’s an example render like this:

    Hairlines

    – Can you see the hairlines?

    The workaround we used in Flash and in the new Renderer was to draw a thin line around each brick. This fills the hairlines but makes the edges of some shapes bleed a bit.

    So unless we come up with a way of gluing all the bricks together quickly enough, we have to choose between hairlines or bleed. In the early days of FontStruct we had hairlines. At the moment we have bleed.

    I can imagine continuing to use the bleed options but offering users an option to turn that off on a per-FontStruction basis. I’d welcome your thoughts.

    Rob Meek (meek) — April 2, 2015 #

  12. j4s13

    Hmm… That’s what the glitchy hairline-like things occur when you hide the grid.

    j4s13 — April 2, 2015 #

  13. will.i.ૐ

    @j4s13, as someone with a life-long and often uncanny affinity for glitches, I’d like to get a little picky and offer my take on the technical difference between artifacts and glitches. Briefly, I see the fundamental distinction as: Artifacts are predictable defects or anomalies in a signal resulting from the proper and intended functioning of an input or output device – while glitches are defects or anomalies stemming from *un*intended programming, compiling, or hardware errors, failures, etc.

    Glitches, depending on their nature, often behave in a far less stable manner than artifacts. Perhaps this characteristic instability ties into your use of the word. Zooming in and out in the fontstructor, for instance, causes the hairline artifacts between certain bricks to pop in or out of view in seemingly erratic, or glitchy ways.

    However, at each given zoom level, the gaps behave consistently and the flash-based fontstructor is functioning exactly as intended, though not without flaw. The defect – or aliasing artifact, to get even more specific – stems from the limit of floating point accuracy inherent in flash (or other digital positioning system that stores coordinates as integer strings, themselves constrained by bit depth). When one mathematically precise grid (the brick-unit grid) is superimposed onto another mathematically precise grid (the pixel-unit grid), rounding errors proliferate wherever the numerical significance of the ratio between these two grids exceeds the available bit depth. Even adjoining bricks, necessarily rendered as separate objects per Rob’s description, may appear discontinuous where the programmatically imprecise rendered edge of one brick falls just short of where the next begins.

    This subtle distinctions between glitches and artifacts are useful to me both in recognizing them and correcting them and also in appreciating and savoring them. I think it’s helpful when seeking solutions to known problems, and also in making new discoveries with the power to entirely reframe the problem or the scenario in which it occurs. A patterned system in failing may reveal a vital significance unseen in the system at work. The most creative field is then that which allows chaos and order to dynamically coexist, to meet, to merge, to interpenetrate in interesting, unforeseen, ways, to fracture and to become fractal.

    will.i.ૐ — April 2, 2015 #

  14. will.i.ૐ

    @Rob: My unqualified thoughts on ways to solve the hairline vs. bleed issue:

    1) three step server-side image post-processing: a) apply 1 px dilation (ps filter: minimum) to close gaps; b) apply 2 px erosion (ps filter: maximum) to preserve original outline while preventing closure (bleeding or rounding of joins); c) blend the original image with the processed image at 100% “multiply” or “darken”.

    2) an advanced (premium?) “lock and load” publishing feature that can be turned on or off per fontstruction. Locking and loading does the following: a) downloads a finalized (while active) reference .ttf file to the user; b) retains this .ttf file server side; c) renders previews through the FS Renderer utilizing the locked, i.e. post-mortar, .ttf file.

    will.i.ૐ — April 2, 2015 #

  15. will.i.ૐ

    Oh, and….

    THANK YOU ROB!!! For your genius, continued innovation, and dedication to keeping FontStruct on a slow and steady fire, thank you. All the best things are cooked this way.

    Amazing concoctions will be coming out of the oven this year, I just know it. :~)

    will.i.ૐ — April 2, 2015 #

  16. CMunk

    Seven years sure pass by quickly! I am honored to have been a part of this from the very beginning. And of course to have the number 7 from “Slice” featured on the front page :D

    The constant improvements and adding of features is one of the best parts of FontStruct. Thank you for many years of “I can’t wait to see what this new brick can do” and “I’m so excited for this new function”.

    Congratulations, Meek! I hope for many more years of FontStructing.

    CMunk — April 3, 2015 #

  17. Rob Meek (meek)

    @will.i.ૐ Thanks for your thoughts and kind words. Your option 2) is probably the best solution, although having said that, some FontStructions are really huge when they are downloaded so that might cause problems too. The hairlines are an annoying and kind of silly problem. I guess they are related rounding errors. There may be some other settings related to antialiasing which I can tweak to get rid of them.

    Rob Meek (meek) — April 3, 2015 #

  18. Goatmeal

    @Rob – I join everyone here in saying congratulations for 7 terrific years, and looking forward to many, many more!

    Goatmeal — April 3, 2015 #

  19. will.i.ૐ

    Cheers, Rob! You’re more than welcome.

    I suspect the simplest way of negating this screen artifact of admittedly minor consequence is to disable gallery view antialiasing in flash altogether. Of course this would introduce standard aliasing artifacts. A third solution might then be to include server-side image resizing post-flash to effect supersampling antialiasing prior to receipt by the client. This work around is less computationally expensive than my first filter chain suggestion – also with a sliver of savings gained in disabling flash’s algorithm to factor in. 4x downsampling generates sufficiently high quality previews.

    Of course, all image scaling could be done client-side with max-width and max-height set to 25%, though this is a less consistent approach due to platform variability and the potential for pop-in artifacts introduced once the scaling is locally applied.

    will.i.ૐ — April 3, 2015 #

  20. will.i.ૐ

    P.S. Don’t comments on blog posts usually appear in the live feed? I think that’s turned off for this one. :)

    will.i.ૐ — April 3, 2015 #

  21. elmoyenique

    Thank you very much for this Great New GALLERY!!!
    And thanks also for choose some of my fonts to illustrate the marvelous panel showing the last glorious 7 years of FS!

    elmoyenique — April 6, 2015 #

  22. minidonut

    First of all–I’m not gone.

    Second, whoa. I’ve never expected this; FS has always looked the same during the 3½ years I have been using it (and probably also before I joined, aside from the FontStructor updates), and this is just great. I love the new gallery (although I don’t use it that often… ^^’).

    I don’t really know why I’m gone all the time, by the way.

    minidonut — April 8, 2015 #

  23. minidonut

    …wait, I just said I’m not gone, and then– Sigh.

    minidonut — April 8, 2015 #

  24. four

    Happy Magnificent Seven! Thanks Rob Meek, for opening up the world of type design! The new gallery looks excellent, great that it now also shows lower case and numbers.

    four — April 9, 2015 #

  25. geneus1

    Happy belated 7th Birthday FS! Time is definitely going faster. The past seven years are a blur.

    Problem: I just realized that I can’t access any fontstruction past the first page of ten. I get the following error:

    Oops! An Error Occurred
    The server returned a “404 Not Found”.

    Is it just me? The problem exists on both Mac and PC browsers. I’m hoping this is a just due to the temporary migration between the old private gallery listing to the new one.

    geneus1 — April 18, 2015 #

  26. Nordenx

    Same here:

    I can’t access any fontstruction past the first page of ten. I get the following error:

    Oops! An Error Occurred
    The server returned a “404 Not Found”.

    Same here…

    The problem occurs on both my Macbook and PC browsers. I’m also hoping that this is a just due to the server migration and is just temporary.

    Also, “Happy belated 7th Birthday FS!”

    Nordenx — April 18, 2015 #

  27. redux

    Searching a specific user’s fontstructions is currently/still broken – seems that no matter what search term you use, it somehow translates this to “FontStructions matching “1””.

    And yes, also clicking on your own tags (in the “generation=1” view of your fontstructions) returns the 404.

    Any news on a possible fix in the works? This has currently made FS quite unusable from my point of view (when trying to search through my own extensive collection)

    redux — April 30, 2015 #

  28. jmarquez

    Wow, 7 years! Time flies…
    Happy Bday Fontstruct, and may the next 7 years be even better!

    jmarquez — May 3, 2015 #

  29. fugitiveglue

    Congrats and THANK YOU!!!

    fugitiveglue — May 7, 2015 #

  30. Jonathan224

    Happy 7th Birthday Fontstruct!

    Also, The comments for the ‘New Servers’ News post are closed. I had an idea for a font contest.

    5×5 Maximum Character Size. Accented characters are 5×12.

    Jonathan224 — June 7, 2015 #