I made TypeStudio, a Progressive Web App to test and inspect fonts

kedar

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.app
My 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!

Yves Michel

Hi Kedar,
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!

kedar

Yves Michel said:

Hi Kedar,
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!

Thanks @Yves Michel.  

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

Igor Petrovic

Looks very nice and convenient, congrats! Like its UI/UX.

Jānis Kalaus

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!

Jens Kutilek

Thank you for sharing, it looks very useful!

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.

kedar

Jānis Kalaus said:

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!

Thanks for the feedback.

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.

kedar

Jens Kutilek said:

Thank you for sharing, it looks very useful!

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.

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?

Kris Sowersby

It’s faux-bolding for me as well. This is Family Light, OTF. Firefox, macOS Sonoma.

If you inspect element, it's setting

style="font-weight: 700;"

Which may account for the fake bolding.

John Butler

Faux-bolding in Firefox in Windows 10 as well, fyi.

Thomas Phinney

I get faux bold in Chrome Mac, with a variable TTF font

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).

Adam Ladd

Appreciate your work, would it be feasible to consider a toggle option for color theme switches (something more neutral or light on dark)?

kedar

Thanks for the feedback about the faux-bolding. I believe I have fixed it with the latest deploy. Can anyone please check? Thanks.

kedar

Adam Ladd said:

Appreciate your work, would it be feasible to consider a toggle option for color theme switches (something more neutral or light on dark)?

Hey @Adam Ladd, thanks for checking TypeStudio out.

Do you mean a theme additional to the 12 preset themes available? The "Coffee" and "Lilac" themes seem kinda neutral.  

Adam Ladd

@kedar oh, sorry about that, my bad. I overlooked the icon in the upper right after I had gone straight to the tester page and explored those settings. That is what I meant. Thanks

Though, I wonder if a grayscale (black/white/gray values) scheme of 'light' and 'dark' might be nice as well, since the current ones all seem to have some sort of color tint(?).

Thomas Phinney

So, the good news is, all the axis default stuff seems to be fixed. Nice!

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.

Johannes Neumeier

The faux bold causing offender

Great work on the app, looks very nice indeed!

kedar

Johannes Neumeier said:

The faux bold causing offender

Great work on the app, looks very nice indeed!

Thanks @Johannes Neumeier. The issue is now fixed.

Justin Penner

The faux bold issue is still there, but you can easily fix it with something like `* { font-synthesis: none; }`.

Some other suggestions I can make are:

1. Applying the selected font to all the UI elements is not a great experience if it's a display font. It might be better to stick with the system font stack, and then perhaps have an optional toggle somewhere that applies the selected font to the whole UI.
2. Does the URL really need to change when you load a font? With other similar tools like Wakamai Fondue, Samsa, FontDrop, etc, it's all in one page so you can just refresh the page to reset back to the original drag-and-drop interface. Your site breaks if I refresh after uploading a font. Also, if I had less reason to trust this site, the URL change would make me more suspicious about something being externally uploaded in the background.
3. WOFF/WOFF2 support would be convenient for users, but in the meantime you should make a note somewhere about which file types are accepted in the drag-and-drop interface. Right now it seems to imply that only ttf files are supported, but the file picker doesn't restrict by extension, and otf files do seem to work as well. You can restrict by filetype with `<input type=file accept=".ttf,.otf">` which will conveniently filter the system file picker.
4. The axis sliders keep changing when I'm just trying to scroll down the page. Maybe they should only listen for scroll events when they are focused?