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

Comments

• Options

  Yves Michel Posts: 155

  January 5

  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!

  0
• Options

  kedar Posts: 14

  January 5

  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

  0
• Options

  Igor Petrovic Posts: 263

  January 6

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

  0
• Options

  Jānis Kalaus Posts: 6

  January 7

  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!

  0
• Options

  Jens Kutilek Posts: 341

  January 7

  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.

  0
• Options

  kedar Posts: 14

  January 7 edited January 7

  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.

  1
• Options

  kedar Posts: 14

  January 7

  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?
  
  

  0
• Options

  Kris Sowersby Posts: 43

  January 8 edited January 8

  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.
  

  
  

  
  

  
  
  
  

  0
• Options

  John Butler Posts: 248

  January 8

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

  0
• Options

  Thomas Phinney Posts: 2,757

  January 8

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

  0
• Options

  Adam Ladd Posts: 251

  January 8

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

  0
• Options

  kedar Posts: 14

  January 8

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

  0
• Options

  kedar Posts: 14

  January 8 edited January 8

  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.  

  1
• Options

  Adam Ladd Posts: 251

  January 8 edited January 8

  @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(?).

  0
• Options

  Thomas Phinney Posts: 2,757

  January 8

  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.

  0
• Options

  Johannes Neumeier Posts: 363

  January 8

  
  

  The faux bold causing offender

  
  

  Great work on the app, looks very nice indeed!
  

  0
• Options

  kedar Posts: 14

  January 8 edited January 8

  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.

  0
• Options

  Justin Penner Posts: 65

  January 8 edited January 8

  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?

  1