Optical typography

John Hudson

It might be better to test things using absolute units, rather than px, which is differently interpreted in different environments. Also, please confirm in what environment you are creating your diagrams.

The relationship of glyph outlines to the em height varies between fonts. So visually it can sometimes be difficult to judge their scaling relative to a graphic element such as a box.

I happen to have a font that almost exactly matches the em height between the top of the d ascender (755/1000 em units) and the bottom of the p descender (246/1000 em units). Here it is scaled to 48pt on a 48pt square in InDesign on Mac OS.


This is exactly as predicted and why I questioned what you are labeling ‘rendered em square’ in your illustrations. That doesn’t look like the em height: that looks like a caret selection height.

Arial is cast slightly smaller on the body, as they would have said of metal type. The d ascender height (1466/2048 em units) and the p descender depth (407/2048 em units) only sum to 91.46% of the total em height. The red line in this illustration is 91.46% of the way from the top of the green square to the bottom and, as predicted by font scaling falls exactly on the Arial descender depth.


This is what Thomas and I have been talking about: the em height is what is scaled to the nominal text size. As Thomas said: if something is not equivalent to the nominal font size, it is not em height.

adamwhite

I used Adobe Illustrator in Windows 10. It is a caret selection which is equivalent to em square which is seen from two cases. One case is the margin which goes from selection to selection exactly, and other when you click on the text element in Illustrator it always shows the outline of em square. They are the same.

In Illustrator and any other solution 1px=1pt so there is not difference in using points or pixels.

We can resolve this by measuring x height or any other paremater in FontLab edit mode and compare it to the same parameter in Illustrator, InDesign or Html/Css element, but as I said the margins are calculated in relation to what I have described, so even if we say that it is not em square than there would be a problem with calculating distance, which again is a crap of font engine.

adamwhite

Just to clarify, my name is Zlatan Salkić and I can't change my username since typedrawers.com probably has the same quality "senior" developers as the ones making these font engines.

John Hudson

It is a caret selection which is equivalent to em square which is seen from two cases. One case is the margin which goes from selection to selection exactly, and other when you click on the text element in Illustrator it always shows the outline of em square.

What makes you think that the caret selection is equivalent to the em height? Caret selection height is often derived from a combination of font vertical metrics settings and text frame settings within an application. Font vertical metrics settings do not necessarily sum to the em height, but are frequently larger. Caret selection height differs across fonts as a result of different vertical metrics settings.

This shows two different fonts within a text frame in Illustrator on Mac OS. The size of both fonts is set to 48pt on 72pt interline spacing. Both lines of text are selected, and you can see that the caret selection height differs: the top font has more generous vertical metrics settings.



Neither caret selection height is equivalent to the em height (illustrated in green), which is 48pt for both fonts.

Thomas Phinney

“It is a caret selection which is equivalent to em square which is seen from two cases. One case is the margin which goes from selection to selection exactly, and other when you click on the text element in Illustrator it always shows the outline of em square.”

Neither of these things is necessarily an em in height. And in fact, given that they differ from the current point size, they are not.

The em is equal to the current point size, BY DEFINITION. Literally, that’s what an em is. It is built into the font format specifications; that is how scaling fonts works.

There are many other bits of vertical metric data in a font, and some of the others are commonly used in highlighting selected text. One can easily make a custom font that makes sets all the various metrics to specific but differing numbers, and determine which metrics are used by different apps to determine the top and bottom of the text selection area.

Such tests have been run before, and the most interesting thing is that different apps/browsers/etcetera can use different metric metadata to determine this! And since some of the data fields vary by platform, you can even sometimes get different results from the “same” app on different platforms. Font vendors generally set the numbers fairly sensibly, but one can do wild things in a test font just to find out.

adamwhite

@John Hudson @Thomas Phinney Thanks for the clarification. But now there is this problem of margins. If you test the margin space distribution it calculates from this area I thought it was the em square size. Not just in Illustrator but in browser as well.

John Hudson

I am unsure what margin you mean.

If you mean the distance from the top of the text frame, that is one of the problematic areas of text layout inconsistency between different environments. The distance may be automatically or explicitly set, relative to font metrics data, but the distance is calculated in different ways depending on the software and which metrics data it uses.

I don’t use Illustrator much, but in general Adobe apps provide a lot of explicit control for setting the distance to the top of the text frame. Browsers, by contrast, tend to automate this distance, and Mac and Windows software tend to rely on different font metrics for this purpose.

You won’t find me disagreeing if you want to say that this inconsistency is stupid.

Cory Maylett

I read every sentence in this topic and have no idea what is being discussed. Furthermore, I doubt anyone else does either.

adamwhite

@Cory Maylett It's the techical part of the digital typography. You need to waste pretty much of your time to dive into it.

John Hudson

We’ve been talking past each other for a lot of it, and it has taken us this far to begin to approach a common terminology and understanding of some basics.

Eris Alar

adamwhite said:

Just to clarify, my name is Zlatan Salkić and I can't change my username since typedrawers.com probably has the same quality "senior" developers as the ones making these font engines.

@adamwhite feel free to DM one of the admin team any time you have issues like this - for now have you looked in Account and Settings? I believe you can change your username there 

adamwhite

@Eris Alar It requires an email confirmation even I did one, and when I update the email it doesn't send new mail for confirmation. So it's stuck like that.

Eris Alar

@James Hultquist-Todd are you able to assist Zlatan?