My sophomore effort, LetterSet - A Typography Tool, is live! Neither a text editor, nor a drawing tool, but a secret third thing.
In this unusual experience, you can relive what it meant to design in the era of pre-Desktop Publishing. Revel in the joy of:
-Rudimentary font selection
-Mistakes that are hard to undo
-Creative expression through limitations
-An unusual photo collage experience
I can’t wait to see what you do with it.
https://letterset.app
In an effort to be forward-compliant with font requests and copyright/licensing, I’m having to make an insane pipeline:
1. library to host custom fonts, not used by the app
2. library to download the above and parse fonts into svg for a set of characters, and build a catalog of character-to-svg file mappings
3. library to convert a catalog of character-to-svg mappings to a swift representation
4. swap character rendering
Currently on step 3.
#swiftui
#BuildInPublic
#LetterSet
I finished #3, but in an unexpected way. I’m still using my swift package that wraps fontforge scripts to do font exporting, but am using a custom svg->path implementation because every library didnt do it thoroughly.
So now I have:
- an “air gapped” repo to hold and process fonts, which makes an output format, containing the converted data, in a known location for a host app to consume
- a reference implementation of a renderer for said output format.
The availability of the Logitech Muse (ships to me in a week) means I have to actually make the version of this app for #VisionPro now. I think this can officially be 3rd in my roadmap:
1. Support arbitrary fonts via the SVG conversion pipeline.
2. Improve the renderer via a fixed coordinate system (aka “quasi-infinite canvas, as opposed to the existing “actual infinite”, which is unmanageable).
3. AR with stylus.
Last night I completed the font-license-complaint workflow, and got it working in Xcode Cloud.
Packages:
- glyph-preprocessor uses fontforge to convert fonts to paths commands stored in json
- LetterSet-sheet only knows about finding catalog json files, how to render path data as a sheet, and the process state changes (touch events)
- Distributed host iOS app only includes LetterSet-sheet for glyph rendering, doesn’t know about fonts or svg files
✅🤦🔡✍️
I've been updating my catalog and sheet format to accommodate the new flexibility granted by the Font -> SVG -> Path pipeline, but I needed a new tool for previewing and managing the configurations. I've found that the various ai-related code tools are pretty decent at doing things like this, e.g. spinning up examples using a well-documented library. So... now I have a Mac app that authors configurations for my main app!
So much non-obvious new work in this latest video:
- Font->SVG->Path-based glyph pipeline now allows the use of the full set of font variations (as seen in Futura).
- Glyph rendering is sharp, no longer using GraphicContext for display.
- Zoom out finally “just works”.
- When in “hard mode” (aka character re-use disabled) one can now partially scribble over a letter; subsequent stamping only stamps the remainder!
Almost ready for testing…
Hey #typography community, what font(s) would you like to see in #LetterSet next? My tooling to handle most arbitrary fonts is ready to expand my existing sheet selection, so I’d love to hear from you as to what would be the most fun or satisfying to see.
Currently I have Helvetica Neue and Futura PT configured, and Zapfino is in my test builds just to test literal edge cases.
I really get such immense pleasure even just having fun in the new version of this app.
New feature is almost done: paper generation. This tool is so funny collage with.
And here’s the prototype in action.
And (at long last) undo/redo is reflected in the sheet mask correctly! This works for tapping and drawn masks.
Halftone and screentone patterns, powered by metal shaders, in the latest TestFlight.
Undo/redo now works properly even across canvas resizing. Note the hilarious complexity: the letter sheet does not change size, nor does the mask associated with each state, but the canvas does. Many things in sync makes me sad but works well... famous last words.
Rejected. Forgot to describe how to test the in-app purchase. On the positive side: this means my feature-gating is not insanely overbearing?
Resubmitted.
I pulled the original build and re-submitted with the ruler. Hopefully this one makes it through!
At this point though, I feel like "season 1" features are at least real:
- Lined paper
- Graph paper
- Construction paper
- Halftone
- Screentone
- Custom ruler
I said at the beginning of the public beta that all of the actually core features in #LetterSet would remain free, and that only consider it for subsequent features. I feel like I'm making good on that promise.
Rejected again because of section 3.1.1, the very section I presented on at @SwiftLeeds this year!
In Apple’s defense, I did not follow the guidelines to have a “restore purchases” button; an honest mistake on my part as this is the first time that I’ve used non-consumable in-app purchases. They also offered to let me submit it as a bug fix without further review, but I declined so I could add the polish I had done since the last build.
New build submitted now…
From a technical perspective, the improvements are so numerous. Most interesting I think is a reenvisioned zoom (that can handle zooming out!), a new canvas display system, completely reengineered sheet mechanics, and a font->glyph->svg->patched drawing command pipeline, totally automated.
I also built three standalone utilities, not including packages. Notably, my sheet author configuration utility act as a complete test tested for all of the type pipeline features.
The paper generation uses #metalshaders, a first in production for me, and masking has evolved into an art. I now have a MaskManager in the sheet library, that handles three types of masks:
- current, a mask of the active stroke
- cumulative, a combined mask of all strokes
- transient, as temporary mask of views that impact transfer
Transient impact of the ruler is not yet implemented in the app, but the library supports it now.
Image handling is also greatly improved. You can crop after placing an image, resize behaves more reasonably, and masking parts of the image transfer perfectly, for the most bizarre #collage experience ever since Khoi Vinh’s Mixel. This crop/mask experience also works on the new paper types!
Also, I’ve stuck to my goal of keeping all core features free, and will likely grant Season 1 entitlements to all omce Season 2 exists… whenever rhat is.
In the meantime, there’s a menu option to hide premium features because I hate when features I use in tools advertise things I haven’t bought. Since all paid-for features are truly optional from the core experience, you can hide all mentions of them (except the preference to show/hide them) if you also hate this.
Meanwhile, the ruler is a really fun tool as it stands. When in use, it becomes the only way to rotate a sheet. This lets you more accurately line up a word’s baseline as you zoom, so you can be more consistent with positioning… if you want!
I’ve spent my free time over the last week isolating my masking into a Mask Manager package, that exposed both mask and masking utilities: mask operations for manipulating various union and intersection strategies; masking operations for applying said strategies on actual images. This is the culmination of this work, a Mask Playground that shows mask buildup over time, with transient blockers.
Now I have a third state within masking. Throughout the app, I have to track:
-the current #PencilKit stroke
-the sum of all strokes
-the boundary of letters that have been tapped
I track these in two ways, as the shape of the above as it applies to the sheet is different vs its orientation to the canvas. Then add undo history across both.
Now: the idea of a transient object that blocks transfer to the canvas, but doesn’t impact the cumulative sheet mask.
Ruler now incorporates this secret third state. Transient masks are used to block pencil strokes from impacting the sheet and the underlying canvas. In English: a pencil can no longer draw under the ruler. The ruler behaves like an object in the real world!
Ruler is now a ruler!
Ruler has evolved into Rulers!
Now that the sheet is rendered with metal, I can experiment more…. But not all experiments are good ones. I implemented pressure sensitivity, but it is really distracting. Posting this for posterity, but I’ll either remove it or tone it WAY down.
Hooked up the gyroscope properly this time. You can also see the parallax I built into the internal zoom mechanism, slightly offsetting the textures as the device rotates. I also made the zoom center point adjust relative to the window position…
Ok a VERY toned down deformer now lives as part of the sheet. When you play with it, the surface of the paper dents around your finger as you move it, as well as drawing a gradient. The area under the touch remains flat and undistorted for accuracy.
Also: clear protractor is the best protractor!
Also: circle template and negative space drawing!
Also: touching letters now lets you move a bit, rather than just tap.
One more bug, then v1.2.0!
Given all of the recent discussions, I decided to add Garamond into the latest builds of #LetterSet, and it looks good! Cc @gruber et al.
Related: I never get tired of looking at the clear protractor.
In other news, the upcoming 1.2.0 version of #LetterSet fixes a long-standing, hard-to-track bug regarding complex documents becoming fuzzy over time? I thought maybe it was a scale mismatch or compression issue, but it turns out it was just because I wasn’t explicitly snapping to a pixel grid for each operation! That tiny <0.5px inadvertent rounding step eventually makes the oldest characters look badly compressed. See attached for old/new.
Fixed, finally!
LetterSet 1.2.0 is live with all of the good stuff:
- New rulers
- New font (Garamond)
- Higher quality authoring
- More weird interactions (like the very subtle sheet deformations on touch)
- Even a new iPad / macOS gesture for moving a sheet without rotation
And of course, the same arduous design experience... except much faster!
https://apps.apple.com/us/app/letter-set-typography/id6468196570
Garamond has entered the chat in version 1.2.0, just for fun. Entertaining on an iPhone, quasi-useful on an iPad with pencil.
This new version is now live in the App Store, and the font is part of the free version.
In the #LetterSet app, I have a library called paper-construction, which is used for creating construction and lined paper. I’m currently working on on on the opposite, paper-destruction, and it is lovely!
erin sparling
John Balestrieri