floriankarsten / montagu-slab

Montagu Slab by Florian Karsten
SIL Open Font License 1.1
32 stars 4 forks source link

Browser prev - Vietnamese #10

Closed vv-monsalve closed 3 years ago

vv-monsalve commented 3 years ago

Thin, ExtraLight, Light, Regular

@mightybart the line-height seems to be tight, particularly for Vietnamese uppercase texts. It seems there could be some collisions with stacked diacritics.

OS X High Sierra Safari_11 Desktop_OS_X_High_Sierra_safari_11 1_ Windows 10 Chrome_71 Desktop_Windows_10_chrome_71 0_ Windows 10 Edge_18 Desktop_Windows_10_edge_18 0_

vv-monsalve commented 3 years ago

Medium-SemiBold-Bold

OS X High Sierra Safari_11 Desktop_OS_X_High_Sierra_safari_11 1_ Windows 10 Chrome_71 Desktop_Windows_10_chrome_71 0_ Windows 10 Edge_18 Desktop_Windows_10_edge_18 0_

vv-monsalve commented 3 years ago

SAMPLE 2

OS X High Sierra Safari_11 Desktop_OS_X_High_Sierra_safari_11 1_ Windows 10 Chrome_71 Desktop_Windows_10_chrome_71 0_ Windows 10 Edge_18 Desktop_Windows_10_edge_18 0_

mightybart commented 3 years ago

Addressed this in the latest commit. Below some comparison with other typefaces (the test file is available in "docs" folder)

Screenshot 2021-05-11 at 13 37 14 Screenshot 2021-05-11 at 13 37 35
mightybart commented 3 years ago

@vv-monsalve could you please run a new test to check the new thin weight and adjusted line height?

vv-monsalve commented 3 years ago

@mightybart sure, I'll do it and let you know. Yesterday I was trying to use Builder for Montagu, as it is our latest tool for production workflow. But haven't been able to solve one small thing.

mightybart commented 3 years ago

👍 @vv-monsalve did you solve it or shall we create a new issue for that?

vv-monsalve commented 3 years ago

@mightybart I'm working on it now, no need for a new issue for it right now. I'll keep you posted.

vv-monsalve commented 3 years ago

@mightybart These are the new browser images after pulling the files in the repository at commit 826636c34cf3189749290bfed81adfd950c1a3e8.

Thin, ExtraLight, Light, Regular at 16pt

OS X High Sierra Safari_11 Desktop_OS_X_High_Sierra_safari_11 1_ Windows 10 Chrome_71 Desktop_Windows_10_chrome_71 0_ Windows 10 Edge_18 Desktop_Windows_10_edge_18 0_

mightybart commented 3 years ago

Increasing the size to 16pt from 14pt helped. Also, the weight adjustment was a good step forward. But looking at the Windows screenshots, I'm not sure if it was enough? @vv-monsalve @davelab6

OS X looks OK. Also, when printed at 16pt size, I can confirm there is no issue. I wouldn't change the weight as there is already enough difference between 16pt and 144pt Thin styles. I think if I make it even bolder, then it would be too close to ExtraLight. But if you think it's still too thin, maybe we could increase the minimum size to 18pt?

One more thing that comes to my mind when looking at the renderings – I would increase the gap between accents and characters for 16pt size.

vv-monsalve commented 3 years ago

@mightybart I'm working on it now, no need for a new issue for it right now. I'll keep you posted.

I have now a working workflow using builder in a new local QA branch, but couldn't push it as I have no permissions to do so neither to fork the repo. Please allow the forks so that I can share the new files,

vv-monsalve commented 3 years ago

I'm not sure if it was enough?

I had the same doubt when creating the font. It still seems too light in Windows browsers.

maybe we could increase the minimum size to 18pt?

I wouldn't rely on this as a solution since, as you know, the fonts are often used in different conditions from the ideally designed ones. So any given user could like to use it in 16 pt (which is a common standard in webpages). However, there would always be the ExtraLight weight.

The images above were created using the VF, so all the weights are displayed in that single png. I just created new previews using the static Thin fonts at 16pt to see if they would display better in a single-use image.

Also, I'll attach here the HTML used for the tool to create the images, so that you could test them directly if different Windows environments.

MontaguSlab16pt-Thin.ttf images

OS X High Sierra Safari_11 Desktop_OS_X_High_Sierra_safari_11 1_ Windows 10 Chrome_71 Desktop_Windows_10_chrome_71 0_ Windows 10 Edge_18 Desktop_Windows_10_edge_18 0_

vv-monsalve commented 3 years ago

MontaguSlab144pt-Thin.ttf images

OS X High Sierra Safari_11 Desktop_OS_X_High_Sierra_safari_11 1_ Windows 10 Chrome_71 Desktop_Windows_10_chrome_71 0_ Windows 10 Edge_18 Desktop_Windows_10_edge_18 0_

vv-monsalve commented 3 years ago

Html files 144ptThin.zip 16ptThin.zip

vv-monsalve commented 3 years ago

Windows 10 Edge_18

Actually, seeing them again, the headlines for 144pt-Thin on Edge look with a slightly uneven thickness.

Screen Shot 2021-05-13 at 07 47 34

mightybart commented 3 years ago

Just activated BrowserStack trial, will look into this issue. Especially the serifs, it is really weird that they are rendered so thin.

vv-monsalve commented 3 years ago

Hi @mightybart these are new browser previews for vietnamese after pulling latest files at commit 67844456da8d91cc3c62a79f6c64b7ee1666bf40 The horizontal strokes look thicker than the vertical stems, e.g. A R hyphen 4 in 16pt

Thin - 16pt

Windows 10 Chrome_71 Desktop_Windows_10_chrome_71 0_ Windows 10 Edge_18 Desktop_Windows_10_edge_18 0_ OS X High Sierra Safari_11 Desktop_OS_X_High_Sierra_safari_11 1_

vv-monsalve commented 3 years ago

For the 144pt case, the horizontal issue is only seen in the g. However you could probably want to inspect the slightly uneven thickness issue mentioned above that seems to still happen on Edge

Screen Shot 2021-06-24 at 20 56 53

Thin - 144pt

Windows 10 Chrome_71 Desktop_Windows_10_chrome_71 0_ Windows 10 Edge_18 Desktop_Windows_10_edge_18 0_ OS X High Sierra Safari_11 Desktop_OS_X_High_Sierra_safari_11 1_

vv-monsalve commented 3 years ago

Following this in #13