Hi,
I have built a Web App for testing, inspecting and analyzing fonts. It's called Typestudio and you can check it out on
typestudio.appMy main motivation was to build a Google Fonts like Type Tester, while allowing uploading a font of my choice.
I also wanted to provide an offline experience. So, type designers can test their commercial or proprietary fonts without having to upload them anywhere.
I also wanted the app to support multiple color palette themes to enable how the font would look on real-world web/apps.
The web app is
installable on any device. And like I mentioned before, it can work
100% offline. It was built for
Opentype fonts and supports all features and variation settings.
And very importantly, the web app is totally
accessible for all.
Please check out
typestudio.app and provide your feedback. Thanks. And a happy new year!
Comments
I must be the first to try your app. I tried it with my new font still in development.
I must say I'm impressed by the quality and the clarity.
Didn't find a download button but it must be in your plans.
Bravo!
It's a Web app (similar to Spotify or Pinterest). It is an app that's built with web-based technologies, but that provides a user experience like that of a native app. Check more info here.
The app is "installable". I have created an overview guide on how to do that: https://typestudio.app/install
Hello! The app looks good. I've added a couple of my own fonts (there are really only two at the moment).
Chrome — It seems that in the Glyphs Showcase section, the Glyphs are not standing on the Baseline but have slipped lower. Also, the fonts "embedded" in the application have dropped below the Baseline. Additionally, for some, the Baseline, x-Height, Cap Height, etc., are not showing.
Safari — Only the fonts "embedded" in the application work. I'm unable to upload my own or others from the computer. It's just spinning (loading icon).
Firefox — The embedded font Glyphs are standing on the Baseline. For some, the upload does not occur, just spinning (loading icon). Others upload successfully. Again, for some, the Baseline, x-Height, Cap Height, etc., are not showing.
I will continue testing when I have free time. Good luck with your work!
Just some comments:
It doesn't load any fonts for me in Safari as well. The icon spins and further below there is a message "Unable to load font. NetworkError: A network error occurred.". It works in Chrome.
I think the font in (at least) the main sample box is fake-bolded, it looks much bolder than it should:
And it would be great if the selected variation also applied to the character set showing below.
In the character set, there are some .notdef signs showing for my font. I think it affects all glyphs with a Unicode > 0xFFFF.
I will take a look at the browser specific issues. I tested the app on Chrome, Edge and Firefox. I did not test on Safari, tbh. I will fix that as a priority.
for some, the Baseline, x-Height, Cap Height, etc., are not showing.
That is a known functionality. The logic depends on the OS/2 Metrics Table. If the OpenType font provides that info, the app shows it. For the fonts that do not show the metrics, the OS/2 info is unavailable.
If there's a better way than the OS/2 Metrcis table, to get the info, plz let me know.
Thanks for the feedback.
I tested the app on Chrome, Edge and Firefox. I did not test on Safari, tbh. I will fix that as a priority.
No additional settings are applied to the text in the textbox. But, I think when the page loads, the initial state of the text in the textbox and the values for the sliders on the left may be mis-matching. Did you find the text to be fake-bolded on initial load or after updating the slider values?
Also, the actual preview appears to show the font’s default instance (plus faux bold), but the initial settings of the variable axes are all as close to zero as possible, which means that only Slant shows something that matches the preview.
If I start changing any given axis, then the preview changes to be correct on that axis only (plus the faux bold, so the weight axis is never really correct), with all the other axes still mismatched. So I have to adjust all four axes to get the preview matching the axis settings (again, not counting the faux bold laid on top).
Do you mean a theme additional to the 12 preset themes available? The "Coffee" and "Lilac" themes seem kinda neutral.
But the weight is still not coming out right. At all weights, it is too bold. In particular, it still looks like faux bolding to me. One very noticeable effect is, at all weights the upper portion of my lowercase “a” is just too close to closed—and at bolder weights it closes up completely. This is not something that happens in the actual designspace.
Some other suggestions I can make are: