The font-optical-sizing property was added to CSS in 2017/2018 when support for variable fonts was also added. With the advent of variable fonts in OpenType, however, optical size variants are making a strong comeback. Scalable digital type continued that trend: Some optical size type (e.g., Adobe Kepler) was still available, but most fonts did not have optical size variants. When scalable photo-typesetting was invented in the mid twentieth century (type designed on film, clear with a black mask, then used to expose photographic plates), the same design started being used for all sizes, and typography quality in general regressed. Back in the days of metal type, it was very common for type to have optical size variants. This feature in CSS is tied to the introduction of OpenType Font Variations six years ago. In CSS, when font-optical-sizing is set to auto, if the selected family has optical size variants, then the browser will automatically select the specific optical variant based on the font-size property value. Note that most of the 168 fonts within the family have an extra descriptor at the end of the name: "Caption", "Display", "Subhead": those are variants of the design intended for very small size text ("Caption"), very large size text, such as titles ("Display"), and somewhat large-larger than body text ("Subhead") These kinds of typeface variants within a font family are referred to by typographers as optical sizes, and a font family that includes such variants might be referred to as an optical size family or as having optical sizes.Īdobe’s Kepler family is an example of a family with optical sizes. So, for smaller sizes, variants of the font are created to trade off some of the details of the design to improve legibility. Also, the spacing between glyphs would get too tight, further hindering legibility. But if you scaled that font down to a small size, for body text or captions, then those details would be lost, and the glyphs would become less legible. The first is intended for use at large text sizes and has fine details such as the thin serifs and significant change (modulation) in the width of the round stroke in the letter e. The four fonts are intended for use at different sizes, but they are scaled to the same size to make the differences in the design more noticeable. For example, in the following figure the four lines are samples from the same font family intended for use at different sizes. The Google Fonts article is explaining just that. Rather, it has to do with the fact that some font families are crafted with different glyphs intended for use and different text sizes. The term is used but isn't really an accurate description of the process-no size adjustment is being done. Optical kerning would be understood to mean an algorithm for setting kerning adjustments using an automated analysis of shapes. (Quickly done example isn't perfect but illustrates the point.) In the second, these pairs are kerned to reduce the space. In the first, there's too much space between T and A, and too much between A and V. A representative example is the letter pair AV, and TA is another good example. Kerning has to do with adjusting the spacing between glyphs so that the spacing across a line is more consistent. The only similarity is that both have "optical", but they are very different concepts and would well understood by typographers. similar names to what I believe are two very different concepts. The terminology in the question is getting mixed up: that is optical kerning, not optical sizing. The important thing to note in the CSS description is that it is something that type foundries add themselves.Ĭan somebody confirm that these two are, in fact, two separate and very different things. Generally speaking, small (body or caption) optical sizes tend to have less stroke contrast, larger x-heights, wider characters, and more open spacing. In this article written for the Google fonts team, they describe Optical sizing as "the practice of type foundries creating slightly different versions of a typeface intended to be used at different sizes. However, in CSS, I don't believe that this spacing is done algorithmically. The Optical font sizing done by Illustrator is done via this algorithm. In CSS, there is a rule which can be expressed thusly: font-optical-sizing: auto In Adobe, when you choose a font, you have a couple options when it comes to Kerning rules Auto, Optical, Metric-Roman. Confusingly, CSS and Adobe have similar names to what I believe are two very different concepts.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |