10 ms·

What you can get out of a high-quality font

347 points by OlegWock 2y ago

jsheard 2y ago
Caveat: Google Fonts, and by extension Fontsource which mostly just mirrors Googles files, strips out nearly all of the advanced OpenType features to reduce the filesize. It's worth checking the upstream version of your font to see which features it actually offers. e.g. Wakamai Fondue lists 11 features for Googles version of Inter (some essential ones plus fractions, tabular numbers, numerators, denominators and contextual alts), while the full fat version of Inter has a whopping 44 features (too many to list, see https://rsms.me/inter/ https://rsms.me/inter/).
- jfdjkfdhjds 2y ago
  it's the year of the lord 2024 and OSes still don't ship with a common set of open license fonts with most of unicode like nerdfonts. shameful. I wish all the effort the big four wasted fighting for emoji supremacy would have been used to normalize a decent set of full unicode fonts once and for all.
  - zelphirkalt 2y ago
    Can't expect the big four to use their immeasurable wealth for the common good, now can we? If anyone, then distro creators and maintainers will have to make that step. Google surely enjoys getting so much information due to hapless users loading Googlefonts on websites.
    - 3836293648 2y ago
      Which is why France's interpretation of the GDPR banned it
      - zelphirkalt 2y ago
        In some important areas France has better laws than other EU countries. Another example I believe was about avoiding wasting food on the supply chain of food to supermarkets and what happens with food afterwards.
  - creata 2y ago
    > a common set of open license fonts with most of unicode I am (clearly) clueless here, but isn't that what Noto's supposed to be?
    - jmcmaster 2y ago
      Noto doesn't ship with OS, and users need multiple fonts for different use cases. Grandparent comment is saying that Microsoft, Google, Apple could settle on a common set of open licence fonts and bundle them with the OS (and Linux distros / other OSS OSes could also do the same). Then web design & dev could rely on those fonts without having to locally serve them, or embed with Google fonts, etc. Noto could indeed be one of the bundled fonts in this alternate reality. But no real incentive for any of those big players to do so, and disincentive for Google who gain surveillance data from font embeds as noted elsewhere in thread.
      - jsheard 2y ago
        Although if you're not too picky about the finer details or being perfectly consistent across every platform, the system fonts are generally good enough nowadays to put together a pretty decent stack without having to resort to serving web fonts. https://github.com/system-fonts/modern-font-stacks https://github.com/system-fonts/modern-font-stacks Even if you are using web fonts, those stacks make for good fallbacks.
      - inferiorhuman 2y ago
        Apple ships six Noto fonts (non-Latin alphabets) with the current version of MacOS.
    - jfdjkfdhjds 2y ago
      first of, currently it is impossible to cover all of unicode because, surprise surprise, we still have page table issues! the same char in zh, tw, jp, kr might use the same unicode id but have different glyphs. secondly, yes, but even google fonts strip most things from noto it serves because they want the fine grain data of each site/user is using wink wink.
  - matheusmoreira 2y ago
    Proprietary OS problem. Linux distributions package and distribute all the fonts they're legally allowed to ship. Every font I ever cared to use can be found in the repositories. And they don't strip out features either. I get to customize everything about Fira Code.
    - SkiFire13 2y ago
      > Every font I ever cared to use can be found in the repositories. If you have to download/install them separately then it means it doesn't ship with it. The fact that you can install it from the distro repositories means nothing to a third party website that can't assume you have done so.
      - matheusmoreira 2y ago
        Websites can't really assume anything that's not a web standard. If this is important to them, they should be lobbying the web standards bodies to come up with a list of fonts that browsers are required to make available. Then the browsers will pull them in as dependencies when they're installed. The Linux distributions did their jobs with excellence. The fonts are all there and installing them is a oneliner. The web folks made their own OS though so if anyone is to be blamed it's whoever is in charge of that OS called the web platform. Who's in charge of the web as a platform these days? Google. Who is no doubt profiting from the Google Fonts thing.
    - jfdjkfdhjds 2y ago
      correct. that's why I mention the nerdfonts as the holy grail. but without the big OSes agreeing on a new unicode, today it's technically impossible to have a single unicode font (see how noto ships 200 variants on linux, all having some 500mb and only differing a few chars from one another. it's a monstrosity)
  - emchammer 2y ago
    Wow, is Inter ever a beautiful typeface. A rare find when there seemed to be a glut of corporate NIH typefaces for a while. macOS used to ship with a beautiful Hebrew typeface that was like the open-source font Shofar, but it seems to have been removed. I do not see similar Hebrew letters in one of the remaining typefaces. I imagine that it is not easy to give a typeface a consistent feel, in all Latin and non-Latin character sets, to the fluent readers of those languages.
    - giraffe_lady 2y ago
      The number of fonts that include even two good alphabets is pretty low. I have run into needing english and greek or cyrillic in the same document. I know of like three good fonts that have a good english and a good greek. My eye isn't as practiced at looking at cyrillic fonts but it seems even rarer for that combination. Which honestly makes sense and there may not be a solution for. Different alphabets and writing systems have their own typographical histories and conventions. It's reasonable that there is a very limited design space where you're adhering to the conventions of two separate systems as well as maintaining interior consistency.
      - thefringthing 2y ago
        English is a language, Cyrillic is an alphabet, and Greek is both. The alphabet one finds in the range U+0000 to U+007F is called "Latin", not "English". If any alphabet has a claim on being "English", it's Shavian. (Found at U+10450 to U+1047F.)
        jfdjkfdhjds 2y ago
        thats the kind of nitpick that got us where we are today :) if you're talking with users, you assume alphabets and map from the languages.
    - nativeit 2y ago
      Inter quickly became my go-to sans serif font for the web. In A/B tests it somehow always looks better than anything, frequently by wide margins—which is saying something when you’re basically running through a dozen variations on Helvetica.
- CharlesW 2y ago
  Wow. Do you happen to know if that just for API-based usage, or for downloads too? > The Google Fonts API currently does not support requesting the inclusion of optional (also known as discretionary, or opt-in) OpenType Features, such as Stylistic Sets (salt) or Small Caps (smcp, c2sc). Instead the glyphs contained in these features may be published as a separate family… https://googlefonts.github.io/gf-guide/requirements.html#opentype-features-support https://googlefonts.github.io/gf-guide/requirements.html#ope...
  - OlegWock 2y ago
    I think that might depend on particular font, but from what I tested, manually downloaded fonts do include OpenType features like smcp or swsh
    - iggldiggl 2y ago
      Sometimes they might also ship outdated versions, e.g. the last released version of Fira Sans is 4.301, but Google still only serves version 4.203. Plus technically Fira Sans has been superseded by Fira Go, which includes additional scripts, but Google doesn't offer that one at all.
jfdjkfdhjds 2y ago
as a designer by education, this level of font control for web is delusional. and mostly a waste of time (both for the designers and the users receiving on unexpected screen ratios/resolutions/tech/era/etc and getting a worse experience if the designers hadn't wasted the time) this brings me bad memories from the time websites were done by "desktop publishing" designers and html was crafted "pixel perfect" (with tables) thankfully I can easily be a curmudgeon and just set all sites to use my favorite fixed width font and disable the designers choice with one checkbox on firefox.
- Halian 2y ago
  > delusional Hard disagree. > pixel perfect I prefer that era of wob design to now.
airstrike 2y ago
Tabular numerals are such a valuable feature. It's a bummer they're not more prevalent.
- adrian_b 2y ago
  Tabular numerals are very useful in certain cases, but I find even more useful the old-style numerals. By default, I always use old-style numerals, because they are much easier to read, especially for big numbers, for the same reason why the lowercase letters are easier to read, by having ascenders and descenders that break the uniformity of the characters. I use lining numerals only in the same places where I would use uppercase letters, e.g. in titles or when a sentence begins with a number.
  - fsckboy 2y ago
    >I find even more useful the old-style numerals A font of antiquated faſhion doth boaſt moſt excellent and ſubſtantious qualities, yet prithee, what of olde ſtyle figures doſt thou deem hath beneﬁt that I, in mine own diſcretion, might chooſeth?
    - nativeit 2y ago
      You must be Welsh!
    - nine_k 2y ago
      Set thy eyes on this excellent Font, for Inſtance: https://en.m.wikipedia.org/wiki/Georgia_(typeface)#/media/File%3AGeorgiaSpecimenAIB.svg https://en.m.wikipedia.org/wiki/Georgia_(typeface)#/media/Fi... As can be moſt clearly ſeen, the Numerals are not of equale Height, but poſſeſs Deſcendants, like the 4, and Aſcendants, like the 6. Shouldſt thou deſire to embelliſh thy Layout with ſuch a Rendition of Numerals, thou canst: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric https://developer.mozilla.org/en-US/docs/Web/CSS/font-varian... This Feature requireth though that the Font ſo employed containéd the proper Variants of the numeral Glyphs. Many a diſtinguished Font do. (Pray note that the -th Ending of Verbs is for Singular Third Perſon Form, not to be uſed with "thou". I do, thou dost, he doth.)
sdwrj 2y ago
Crazy how most fonts don't support any of this... (update: oops, I'm wrong!)
- TheRealPomax 2y ago
  Almost all fonts commonly used today support most if not all of this (except for variable axes, because that's still a relatively new development)
  - WillAdams 2y ago
    Variable Axes have been around since Adobe Multiple Masters in the mid to early 90s: https://web.archive.org/web/20091223045132/http://partners.adobe.com/public/developer/en/font/5015.Type1_Supp.pdf https://web.archive.org/web/20091223045132/http://partners.a...
    - TheRealPomax 2y ago
      But the "fvar" table [1], as part of the OpenType specification, has not. [1] https://learn.microsoft.com/en-us/typography/opentype/spec/fvar https://learn.microsoft.com/en-us/typography/opentype/spec/f...
- Gualdrapo 2y ago
  Because not all typefaces are OpenType, and not all OpenType typefaces have features set.
ashton314 2y ago
If you like typography, check out Butterick's Practical Typography: https://practicaltypography.com/ https://practicaltypography.com/ It's full of good, pragmatic advice on how to make printed and digital documents look wonderful. I've bought two fonts from him and his font license is easily the most permissive of any paid professional font I've seen: no restrictions on the number of page views or anything, unlike most other pro fonts. Are his fonts open source? No. Are there good open source fonts? Of course. But are his fonts beautiful? You bet. I've got Valkyrie and Concourse. Concourse is particularly flexible when it comes to contextual alternatives and such.
- xelamonster 2y ago
  Nice thanks! I'm happy to pay for a good font but the page view restrictions and all have always bothered me. Not a fan of the idea that they might end up extorting large sums out of you down the line if your site becomes popular or if you want to to build an app with the font to keep your branding consistent.
- omnimus 2y ago
  Swiss typefaces https://www.swisstypefaces.com/ https://www.swisstypefaces.com/ have similar licensing and are one of the highest quality foundries period
bloopernova 2y ago
Not really related: to get VSCode to support comments, jsdocs, other syntax highlighting features using different fonts, you will probably have to use the extension vscode-custom-css from be5invis: https://github.com/be5invis/vscode-custom-css https://github.com/be5invis/vscode-custom-css Mine is: .mtki { font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important; font-style: italic !important; color: #757575 !important; } .comment { font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important; font-style: italic !important; color: #757575 !important; } .comment:not(.punctuation) { font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important; font-style: italic !important; color: #757575 !important; } Which looks like the last picture in this comment: https://github.com/microsoft/vscode/issues/36512#issuecomment-2295329605 https://github.com/microsoft/vscode/issues/36512#issuecommen... Just be prepared to experiment a lot, VSCode's (Electron's?) font handling is buggy. Why are font features so difficult to support correctly?
- inferiorhuman 2y ago
  Why are font features so difficult to support correctly? Because the standards are mostly a result of slapping the name "OpenType" on existing behavior. There's maybe three or four ways to encode any given piece of information. The standards are a mess. You can identify a font as italic in four different places with varying semantics. Off the top of my head, three different places to mark a font as bold (and this may not jive with the weight). Three different ways to specify vector glyphs (five if you include 'COLR' and SVG). Raster glyphs? Do you want PNG, JPEG, TIFF, or raw bytes? Should the raw data be bit or byte aligned? The result of that complexity is that fonts often have all sorts of conflicting information. Depending on what behavior you're referring to specifically I'd be that the fonts themselves may be to blame. TrueType style glyphs specifically put a lot of burden for getting the hinting right on the font designer. CFF/CFF2 doesn't. Noto went full Google. Noto Display was abandoned a few years ago. In their own words it's not intended to be what most folks would consider a display font so there's no good replacement. The metadata in last release is all kinds of fucked up. Names are a hilarious shit show, what constitutes an appropriate name varies from font to font leaving app makers to come up with their own magic and leaving font selection a huge mess. Plus names can be encoded in any number of encodings. Apple still has MacRoman encoded strings in some of their fonts. Is Arial Black the black weight of Arial or a whole new font family?
pbronez 2y ago
TIL several useful things about typefaces!
TheRealPomax 2y ago
The real power of variable axes is that it's not related to weight in the slighted. That's the most obvious use-case, but it's just a mechanism to control "which points in a glyph's outline go where based on what one or more variables are set to", so just using it to change weight is... kinda obvious and boring? Let's kick it up a notch: https://v-fonts.com/fonts/extendomatic-variable https://v-fonts.com/fonts/extendomatic-variable https://v-fonts.com/fonts/tatras-shaded https://v-fonts.com/fonts/tatras-shaded https://v-fonts.com/fonts/wavefont https://v-fonts.com/fonts/wavefont
- jsheard 2y ago
  Also Recursive (https://www.recursive.design https://www.recursive.design) which has the usual weight and slant axis, with cursive alternates which can be toggled explicitly or used automatically when the slant is strong enough, but also a monospace axis (which allows for semi-monospace) and a "casual" axis which changes the whole character of the font.
Gualdrapo 2y ago
I'm a bit surprised as I thought this was common knowledge for web designers and developers. Though to check the features or variable ranges of an OpenType file, you can use something like fontdrop.info.
umaar 2y ago
I made a video showcasing some advanced techniques to use fonts on the web, without compromising performance. Covers interesting font metrics like ascenders and descenders. Fascinating to see how much information is contained within a font file! https://www.youtube.com/watch?v=wSOIbdOaKR8 https://www.youtube.com/watch?v=wSOIbdOaKR8
willcodeforfoo 2y ago
Nothing really to add... other than the type on that page looks gorgeous.
- dryanau 2y ago
  Really? The headings look mediaeval
wetpaws 2y ago
[dead]
Sparkyte 2y ago
Beautiful letters? Or ugly ones I want some high-quality Comic Sans font. That live demo on the page is solid by the way.
rob74 2y ago
> Since such numerals line up when typed on multiple lines, they're useful in, well, tabular data: tables, bills, reports, you name it. Or things like showing a clock, countdown, whatever. A time that "jumps around" on the screen from one second to the next annoys the hell out of me...
kstrauser 2y ago
This was my nudge to see if Berkeley Mono v2 is out yet. It is not.
- cflewis 2y ago
  Yeah, I'm waiting to see if BM condensed ever arrives. I am thinking it won't. I don't think it would take this long if they really intended to get v2 out the door. It's vaporware.
  - xelamonster 2y ago
    BM condensed, where does that land on the Bristol stool scale? Sorry I couldn't resist. I am actually curious about this though, the Berkeley Mono font I found with a search does look quite nice. What's the deal with v2?
    - kstrauser 2y ago
      I've bought v1 and I'm quite happy with it as it is. It's just that I've been looking forward to the tweaks that'd been described for the last year and a half, like[0]: "We threw away almost all of v1.00X, Berkeley Mono v2.000 improves substantially on legibility, fitting, and cohesiveness, especially for bold weights." If I hadn't heard of v2 I wouldn't be missing it. But I have heard of it, goshdarnit, and now I want to see the new shininess! [0]https://x.com/usgraphics/status/1629588764560625664 https://x.com/usgraphics/status/1629588764560625664
  - phforms 2y ago
    Would also love to see v2 finally get released, since I'm a big fan of Berkeley Mono and would like more weights and widths to make my Emacs look nicer. From their update in february[1] this year it seems like it is basically complete but personal things got in the way and maybe they struggle to set up the systems for custom builds, ecommerce, etc. to ship it. People are constantly asking for the release, so I think it will eventually arrive, but good things often take longer than expected. :) [1]: https://x.com/usgraphics/status/1762128387483824160 https://x.com/usgraphics/status/1762128387483824160
system2 2y ago
Maybe for print, it is important but for the web, we must stick to system fonts for SEO and speed.
- lofaszvanitt 2y ago
  How does font type influence SEO and speed!?
  - system2 2y ago
    Loading a font can cause multiple things including load time delay. For example, connecting to Google and downloading a Lato font is around 4-5 requests + js + CSS files + 500kb added download. Processing the font itself also is at least 500ms to a second depending on the device type. We keep the total requests under 25, which cannot be done after multiple 3rd party fonts are added. Additionally, some fonts can introduce CLS (content layout shift) after the font is loaded. Especially H tags because they shift a lot. CLS = your SEO is dead. For speed purposes, especially mobile, using a 3rd party font is SEO suicide. The sites we build for our clients are below 1.2 second mobile and 0.2 second desktop load time which gives these sites an enormous SEO advantage. These load times are complete loads, not initial draws or TTFBs. (results are provided by Google page speed insights - https://pagespeed.web.dev/ https://pagespeed.web.dev/) These load times change when we use the client's own fonts or the ones they pick from Google fonts. We have this discussion almost every time we onboard a new client.
    - inferiorhuman 2y ago
      Processing the font itself also is at least 500ms to a second depending on the device type. I think that's off by quite a lot. On my MacBook Pro I can dump one of the Helvetica Neue faces in one second with ttx (fonttools). If a python script can parse a font, create an XML representation, and write a pretty printed version of that to disk in a second then yea 500 ms seems really slow. Hell, typst (rust) can render a PDF with two subsetted fonts (Apple Color Emoji + Cambria Math) in about 750 ms. I certainly hope Harfbuzz is at least that fast.
Haskell4life 2y ago
[dead]
keybored 2y ago
Small caps looks slick. I wish more websites used it.
- ashton314 2y ago
  I commented elsewhere on this; Butterick uses small caps for internal links in Practical Typography: https://practicaltypography.com/ https://practicaltypography.com/ I think he got this style from classic reference books like Elements of Style. It does look super sharp.
  - OlegWock 2y ago
    Yeah, that's where I first encountered them too and liked it a lot. I'm now using small caps for links in my Obsidian, I like it a lot
wseqyrku 2y ago
Fascinating that it's just now that someone got curious about this enough to write a post. I know if you looked for it you'd probably find this stuff but it is definitely scarce IMO. Thing is, not enough developers and designers that worked on this for many years bother to blog about it perhaps for reasonable reasons but still.
- omnimus 2y ago
  Hate to break it to you but there are whole conferences, 100s books and indeed websites about this stuff. https://www.typewolf.com/resources https://www.typewolf.com/resources Maybe it might seem like nobody is talking about this but if you are designer/student you know about this
hammock 2y ago
What is going on with the wght (weight) axis? When I slide to the left of 400, the text condenses as it gets thinner. But to the right of 400, the text does not expand, it just gets thicker. So it would not appear to be a continuous variable, as the slider would suggest.
- red_trumpet 2y ago
  It still expands, just not as much as before.
  - hammock 2y ago
    There is a step change of difference. Wondering why.. is that a glitch or programmed into the font
bobbylarrybobby 2y ago
Have a font file you want to investigate? See if it supports whatever features? https://wakamaifondue.com https://wakamaifondue.com is your friend
- KronisLV 2y ago
  That is an immensely cool site, thanks for linking it!
- amake 2y ago
  And if you want to work with fonts locally I recommend https://github.com/fonttools/fonttools https://github.com/fonttools/fonttools In particular the `ttx` tool is great for digging into the innards of font files.

347 points by OlegWock 2y ago

Caveat: Google Fonts, and by extension Fontsource which mostly just mirrors Googles files, strips out nearly all of the advanced OpenType features to reduce the filesize. It's worth checking the upstream version of your font to see which features it actually offers. e.g. Wakamai Fondue lists 11 features for Googles version of Inter (some essential ones plus fractions, tabular numbers, numerators, denominators and contextual alts), while the full fat version of Inter has a whopping 44 features (too many to list, see https://rsms.me/inter/ https://rsms.me/inter/).

jfdjkfdhjds 2y ago
it's the year of the lord 2024 and OSes still don't ship with a common set of open license fonts with most of unicode like nerdfonts. shameful. I wish all the effort the big four wasted fighting for emoji supremacy would have been used to normalize a decent set of full unicode fonts once and for all.
- zelphirkalt 2y ago
  Can't expect the big four to use their immeasurable wealth for the common good, now can we? If anyone, then distro creators and maintainers will have to make that step. Google surely enjoys getting so much information due to hapless users loading Googlefonts on websites.
  - 3836293648 2y ago
    Which is why France's interpretation of the GDPR banned it
    - zelphirkalt 2y ago
      In some important areas France has better laws than other EU countries. Another example I believe was about avoiding wasting food on the supply chain of food to supermarkets and what happens with food afterwards.
- creata 2y ago
  > a common set of open license fonts with most of unicode I am (clearly) clueless here, but isn't that what Noto's supposed to be?
  - jmcmaster 2y ago
    Noto doesn't ship with OS, and users need multiple fonts for different use cases. Grandparent comment is saying that Microsoft, Google, Apple could settle on a common set of open licence fonts and bundle them with the OS (and Linux distros / other OSS OSes could also do the same). Then web design & dev could rely on those fonts without having to locally serve them, or embed with Google fonts, etc. Noto could indeed be one of the bundled fonts in this alternate reality. But no real incentive for any of those big players to do so, and disincentive for Google who gain surveillance data from font embeds as noted elsewhere in thread.
    - jsheard 2y ago
      Although if you're not too picky about the finer details or being perfectly consistent across every platform, the system fonts are generally good enough nowadays to put together a pretty decent stack without having to resort to serving web fonts. https://github.com/system-fonts/modern-font-stacks https://github.com/system-fonts/modern-font-stacks Even if you are using web fonts, those stacks make for good fallbacks.
    - inferiorhuman 2y ago
      Apple ships six Noto fonts (non-Latin alphabets) with the current version of MacOS.
  - jfdjkfdhjds 2y ago
    first of, currently it is impossible to cover all of unicode because, surprise surprise, we still have page table issues! the same char in zh, tw, jp, kr might use the same unicode id but have different glyphs. secondly, yes, but even google fonts strip most things from noto it serves because they want the fine grain data of each site/user is using wink wink.
- matheusmoreira 2y ago
  Proprietary OS problem. Linux distributions package and distribute all the fonts they're legally allowed to ship. Every font I ever cared to use can be found in the repositories. And they don't strip out features either. I get to customize everything about Fira Code.
  - SkiFire13 2y ago
    > Every font I ever cared to use can be found in the repositories. If you have to download/install them separately then it means it doesn't ship with it. The fact that you can install it from the distro repositories means nothing to a third party website that can't assume you have done so.
    - matheusmoreira 2y ago
      Websites can't really assume anything that's not a web standard. If this is important to them, they should be lobbying the web standards bodies to come up with a list of fonts that browsers are required to make available. Then the browsers will pull them in as dependencies when they're installed. The Linux distributions did their jobs with excellence. The fonts are all there and installing them is a oneliner. The web folks made their own OS though so if anyone is to be blamed it's whoever is in charge of that OS called the web platform. Who's in charge of the web as a platform these days? Google. Who is no doubt profiting from the Google Fonts thing.
  - jfdjkfdhjds 2y ago
    correct. that's why I mention the nerdfonts as the holy grail. but without the big OSes agreeing on a new unicode, today it's technically impossible to have a single unicode font (see how noto ships 200 variants on linux, all having some 500mb and only differing a few chars from one another. it's a monstrosity)
- emchammer 2y ago
  Wow, is Inter ever a beautiful typeface. A rare find when there seemed to be a glut of corporate NIH typefaces for a while. macOS used to ship with a beautiful Hebrew typeface that was like the open-source font Shofar, but it seems to have been removed. I do not see similar Hebrew letters in one of the remaining typefaces. I imagine that it is not easy to give a typeface a consistent feel, in all Latin and non-Latin character sets, to the fluent readers of those languages.
  - giraffe_lady 2y ago
    The number of fonts that include even two good alphabets is pretty low. I have run into needing english and greek or cyrillic in the same document. I know of like three good fonts that have a good english and a good greek. My eye isn't as practiced at looking at cyrillic fonts but it seems even rarer for that combination. Which honestly makes sense and there may not be a solution for. Different alphabets and writing systems have their own typographical histories and conventions. It's reasonable that there is a very limited design space where you're adhering to the conventions of two separate systems as well as maintaining interior consistency.
    - thefringthing 2y ago
      English is a language, Cyrillic is an alphabet, and Greek is both. The alphabet one finds in the range U+0000 to U+007F is called "Latin", not "English". If any alphabet has a claim on being "English", it's Shavian. (Found at U+10450 to U+1047F.)
      - jfdjkfdhjds 2y ago
        thats the kind of nitpick that got us where we are today :) if you're talking with users, you assume alphabets and map from the languages.
  - nativeit 2y ago
    Inter quickly became my go-to sans serif font for the web. In A/B tests it somehow always looks better than anything, frequently by wide margins—which is saying something when you’re basically running through a dozen variations on Helvetica.
CharlesW 2y ago
Wow. Do you happen to know if that just for API-based usage, or for downloads too? > The Google Fonts API currently does not support requesting the inclusion of optional (also known as discretionary, or opt-in) OpenType Features, such as Stylistic Sets (salt) or Small Caps (smcp, c2sc). Instead the glyphs contained in these features may be published as a separate family… https://googlefonts.github.io/gf-guide/requirements.html#opentype-features-support https://googlefonts.github.io/gf-guide/requirements.html#ope...
- OlegWock 2y ago
  I think that might depend on particular font, but from what I tested, manually downloaded fonts do include OpenType features like smcp or swsh
  - iggldiggl 2y ago
    Sometimes they might also ship outdated versions, e.g. the last released version of Fira Sans is 4.301, but Google still only serves version 4.203. Plus technically Fira Sans has been superseded by Fira Go, which includes additional scripts, but Google doesn't offer that one at all.

jfdjkfdhjds 2y ago

as a designer by education, this level of font control for web is delusional. and mostly a waste of time (both for the designers and the users receiving on unexpected screen ratios/resolutions/tech/era/etc and getting a worse experience if the designers hadn't wasted the time) this brings me bad memories from the time websites were done by "desktop publishing" designers and html was crafted "pixel perfect" (with tables) thankfully I can easily be a curmudgeon and just set all sites to use my favorite fixed width font and disable the designers choice with one checkbox on firefox.

Halian 2y ago
> delusional Hard disagree. > pixel perfect I prefer that era of wob design to now.

airstrike 2y ago

Tabular numerals are such a valuable feature. It's a bummer they're not more prevalent.

adrian_b 2y ago
Tabular numerals are very useful in certain cases, but I find even more useful the old-style numerals. By default, I always use old-style numerals, because they are much easier to read, especially for big numbers, for the same reason why the lowercase letters are easier to read, by having ascenders and descenders that break the uniformity of the characters. I use lining numerals only in the same places where I would use uppercase letters, e.g. in titles or when a sentence begins with a number.
- fsckboy 2y ago
  >I find even more useful the old-style numerals A font of antiquated faſhion doth boaſt moſt excellent and ſubſtantious qualities, yet prithee, what of olde ſtyle figures doſt thou deem hath beneﬁt that I, in mine own diſcretion, might chooſeth?
  - nativeit 2y ago
    You must be Welsh!
  - nine_k 2y ago
    Set thy eyes on this excellent Font, for Inſtance: https://en.m.wikipedia.org/wiki/Georgia_(typeface)#/media/File%3AGeorgiaSpecimenAIB.svg https://en.m.wikipedia.org/wiki/Georgia_(typeface)#/media/Fi... As can be moſt clearly ſeen, the Numerals are not of equale Height, but poſſeſs Deſcendants, like the 4, and Aſcendants, like the 6. Shouldſt thou deſire to embelliſh thy Layout with ſuch a Rendition of Numerals, thou canst: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric https://developer.mozilla.org/en-US/docs/Web/CSS/font-varian... This Feature requireth though that the Font ſo employed containéd the proper Variants of the numeral Glyphs. Many a diſtinguished Font do. (Pray note that the -th Ending of Verbs is for Singular Third Perſon Form, not to be uſed with "thou". I do, thou dost, he doth.)

sdwrj 2y ago

Crazy how most fonts don't support any of this... (update: oops, I'm wrong!)

TheRealPomax 2y ago
Almost all fonts commonly used today support most if not all of this (except for variable axes, because that's still a relatively new development)
- WillAdams 2y ago
  Variable Axes have been around since Adobe Multiple Masters in the mid to early 90s: https://web.archive.org/web/20091223045132/http://partners.adobe.com/public/developer/en/font/5015.Type1_Supp.pdf https://web.archive.org/web/20091223045132/http://partners.a...
  - TheRealPomax 2y ago
    But the "fvar" table [1], as part of the OpenType specification, has not. [1] https://learn.microsoft.com/en-us/typography/opentype/spec/fvar https://learn.microsoft.com/en-us/typography/opentype/spec/f...
Gualdrapo 2y ago
Because not all typefaces are OpenType, and not all OpenType typefaces have features set.

ashton314 2y ago

If you like typography, check out Butterick's Practical Typography: https://practicaltypography.com/ https://practicaltypography.com/ It's full of good, pragmatic advice on how to make printed and digital documents look wonderful. I've bought two fonts from him and his font license is easily the most permissive of any paid professional font I've seen: no restrictions on the number of page views or anything, unlike most other pro fonts. Are his fonts open source? No. Are there good open source fonts? Of course. But are his fonts beautiful? You bet. I've got Valkyrie and Concourse. Concourse is particularly flexible when it comes to contextual alternatives and such.

xelamonster 2y ago
Nice thanks! I'm happy to pay for a good font but the page view restrictions and all have always bothered me. Not a fan of the idea that they might end up extorting large sums out of you down the line if your site becomes popular or if you want to to build an app with the font to keep your branding consistent.
omnimus 2y ago
Swiss typefaces https://www.swisstypefaces.com/ https://www.swisstypefaces.com/ have similar licensing and are one of the highest quality foundries period

bloopernova 2y ago

Not really related: to get VSCode to support comments, jsdocs, other syntax highlighting features using different fonts, you will probably have to use the extension vscode-custom-css from be5invis: https://github.com/be5invis/vscode-custom-css https://github.com/be5invis/vscode-custom-css Mine is: .mtki { font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important; font-style: italic !important; color: #757575 !important; } .comment { font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important; font-style: italic !important; color: #757575 !important; } .comment:not(.punctuation) { font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important; font-style: italic !important; color: #757575 !important; } Which looks like the last picture in this comment: https://github.com/microsoft/vscode/issues/36512#issuecomment-2295329605 https://github.com/microsoft/vscode/issues/36512#issuecommen... Just be prepared to experiment a lot, VSCode's (Electron's?) font handling is buggy. Why are font features so difficult to support correctly?

inferiorhuman 2y ago
Why are font features so difficult to support correctly? Because the standards are mostly a result of slapping the name "OpenType" on existing behavior. There's maybe three or four ways to encode any given piece of information. The standards are a mess. You can identify a font as italic in four different places with varying semantics. Off the top of my head, three different places to mark a font as bold (and this may not jive with the weight). Three different ways to specify vector glyphs (five if you include 'COLR' and SVG). Raster glyphs? Do you want PNG, JPEG, TIFF, or raw bytes? Should the raw data be bit or byte aligned? The result of that complexity is that fonts often have all sorts of conflicting information. Depending on what behavior you're referring to specifically I'd be that the fonts themselves may be to blame. TrueType style glyphs specifically put a lot of burden for getting the hinting right on the font designer. CFF/CFF2 doesn't. Noto went full Google. Noto Display was abandoned a few years ago. In their own words it's not intended to be what most folks would consider a display font so there's no good replacement. The metadata in last release is all kinds of fucked up. Names are a hilarious shit show, what constitutes an appropriate name varies from font to font leaving app makers to come up with their own magic and leaving font selection a huge mess. Plus names can be encoded in any number of encodings. Apple still has MacRoman encoded strings in some of their fonts. Is Arial Black the black weight of Arial or a whole new font family?

pbronez 2y ago

TIL several useful things about typefaces!

TheRealPomax 2y ago

The real power of variable axes is that it's not related to weight in the slighted. That's the most obvious use-case, but it's just a mechanism to control "which points in a glyph's outline go where based on what one or more variables are set to", so just using it to change weight is... kinda obvious and boring? Let's kick it up a notch: https://v-fonts.com/fonts/extendomatic-variable https://v-fonts.com/fonts/extendomatic-variable https://v-fonts.com/fonts/tatras-shaded https://v-fonts.com/fonts/tatras-shaded https://v-fonts.com/fonts/wavefont https://v-fonts.com/fonts/wavefont

jsheard 2y ago
Also Recursive (https://www.recursive.design https://www.recursive.design) which has the usual weight and slant axis, with cursive alternates which can be toggled explicitly or used automatically when the slant is strong enough, but also a monospace axis (which allows for semi-monospace) and a "casual" axis which changes the whole character of the font.

Gualdrapo 2y ago

I'm a bit surprised as I thought this was common knowledge for web designers and developers. Though to check the features or variable ranges of an OpenType file, you can use something like fontdrop.info.

umaar 2y ago

I made a video showcasing some advanced techniques to use fonts on the web, without compromising performance. Covers interesting font metrics like ascenders and descenders. Fascinating to see how much information is contained within a font file! https://www.youtube.com/watch?v=wSOIbdOaKR8 https://www.youtube.com/watch?v=wSOIbdOaKR8

willcodeforfoo 2y ago

Nothing really to add... other than the type on that page looks gorgeous.

dryanau 2y ago
Really? The headings look mediaeval

wetpaws 2y ago

[dead]

Sparkyte 2y ago

Beautiful letters? Or ugly ones I want some high-quality Comic Sans font. That live demo on the page is solid by the way.

rob74 2y ago

> Since such numerals line up when typed on multiple lines, they're useful in, well, tabular data: tables, bills, reports, you name it. Or things like showing a clock, countdown, whatever. A time that "jumps around" on the screen from one second to the next annoys the hell out of me...

kstrauser 2y ago

This was my nudge to see if Berkeley Mono v2 is out yet. It is not.

cflewis 2y ago
Yeah, I'm waiting to see if BM condensed ever arrives. I am thinking it won't. I don't think it would take this long if they really intended to get v2 out the door. It's vaporware.
- xelamonster 2y ago
  BM condensed, where does that land on the Bristol stool scale? Sorry I couldn't resist. I am actually curious about this though, the Berkeley Mono font I found with a search does look quite nice. What's the deal with v2?
  - kstrauser 2y ago
    I've bought v1 and I'm quite happy with it as it is. It's just that I've been looking forward to the tweaks that'd been described for the last year and a half, like[0]: "We threw away almost all of v1.00X, Berkeley Mono v2.000 improves substantially on legibility, fitting, and cohesiveness, especially for bold weights." If I hadn't heard of v2 I wouldn't be missing it. But I have heard of it, goshdarnit, and now I want to see the new shininess! [0]https://x.com/usgraphics/status/1629588764560625664 https://x.com/usgraphics/status/1629588764560625664
- phforms 2y ago
  Would also love to see v2 finally get released, since I'm a big fan of Berkeley Mono and would like more weights and widths to make my Emacs look nicer. From their update in february[1] this year it seems like it is basically complete but personal things got in the way and maybe they struggle to set up the systems for custom builds, ecommerce, etc. to ship it. People are constantly asking for the release, so I think it will eventually arrive, but good things often take longer than expected. :) [1]: https://x.com/usgraphics/status/1762128387483824160 https://x.com/usgraphics/status/1762128387483824160

system2 2y ago

Maybe for print, it is important but for the web, we must stick to system fonts for SEO and speed.

lofaszvanitt 2y ago
How does font type influence SEO and speed!?
- system2 2y ago
  Loading a font can cause multiple things including load time delay. For example, connecting to Google and downloading a Lato font is around 4-5 requests + js + CSS files + 500kb added download. Processing the font itself also is at least 500ms to a second depending on the device type. We keep the total requests under 25, which cannot be done after multiple 3rd party fonts are added. Additionally, some fonts can introduce CLS (content layout shift) after the font is loaded. Especially H tags because they shift a lot. CLS = your SEO is dead. For speed purposes, especially mobile, using a 3rd party font is SEO suicide. The sites we build for our clients are below 1.2 second mobile and 0.2 second desktop load time which gives these sites an enormous SEO advantage. These load times are complete loads, not initial draws or TTFBs. (results are provided by Google page speed insights - https://pagespeed.web.dev/ https://pagespeed.web.dev/) These load times change when we use the client's own fonts or the ones they pick from Google fonts. We have this discussion almost every time we onboard a new client.
  - inferiorhuman 2y ago
    Processing the font itself also is at least 500ms to a second depending on the device type. I think that's off by quite a lot. On my MacBook Pro I can dump one of the Helvetica Neue faces in one second with ttx (fonttools). If a python script can parse a font, create an XML representation, and write a pretty printed version of that to disk in a second then yea 500 ms seems really slow. Hell, typst (rust) can render a PDF with two subsetted fonts (Apple Color Emoji + Cambria Math) in about 750 ms. I certainly hope Harfbuzz is at least that fast.

Haskell4life 2y ago

[dead]

keybored 2y ago

Small caps looks slick. I wish more websites used it.

ashton314 2y ago
I commented elsewhere on this; Butterick uses small caps for internal links in Practical Typography: https://practicaltypography.com/ https://practicaltypography.com/ I think he got this style from classic reference books like Elements of Style. It does look super sharp.
- OlegWock 2y ago
  Yeah, that's where I first encountered them too and liked it a lot. I'm now using small caps for links in my Obsidian, I like it a lot

wseqyrku 2y ago

Fascinating that it's just now that someone got curious about this enough to write a post. I know if you looked for it you'd probably find this stuff but it is definitely scarce IMO. Thing is, not enough developers and designers that worked on this for many years bother to blog about it perhaps for reasonable reasons but still.

omnimus 2y ago
Hate to break it to you but there are whole conferences, 100s books and indeed websites about this stuff. https://www.typewolf.com/resources https://www.typewolf.com/resources Maybe it might seem like nobody is talking about this but if you are designer/student you know about this

hammock 2y ago

What is going on with the wght (weight) axis? When I slide to the left of 400, the text condenses as it gets thinner. But to the right of 400, the text does not expand, it just gets thicker. So it would not appear to be a continuous variable, as the slider would suggest.

red_trumpet 2y ago
It still expands, just not as much as before.
- hammock 2y ago
  There is a step change of difference. Wondering why.. is that a glitch or programmed into the font

bobbylarrybobby 2y ago

Have a font file you want to investigate? See if it supports whatever features? https://wakamaifondue.com https://wakamaifondue.com is your friend

KronisLV 2y ago
That is an immensely cool site, thanks for linking it!
amake 2y ago
And if you want to work with fonts locally I recommend https://github.com/fonttools/fonttools https://github.com/fonttools/fonttools In particular the `ttx` tool is great for digging into the innards of font files.