[HN Gopher] What you can get out of a high-quality font
___________________________________________________________________
What you can get out of a high-quality font
Author : OlegWock
Score : 215 points
Date : 2024-09-10 16:38 UTC (6 hours ago)
(HTM) web link (sinja.io)
(TXT) w3m dump (sinja.io)
| jsheard wrote:
| 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/).
| jfdjkfdhjds wrote:
| 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 wrote:
| 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 wrote:
| Which is why France's interpretation of the GDPR banned it
| creata wrote:
| > 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 wrote:
| 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 wrote:
| 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
|
| Even if you are using web fonts, those stacks make for
| good fallbacks.
| inferiorhuman wrote:
| Apple ships six Noto fonts (non-Latin alphabets) with the
| current version of MacOS.
| jfdjkfdhjds wrote:
| 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 wrote:
| 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 wrote:
| > 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| nativeit wrote:
| 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 wrote:
| 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#ope...
| OlegWock wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| > delusional
|
| Hard disagree.
|
| > pixel perfect
|
| I prefer that era of wob design to now.
| airstrike wrote:
| Tabular numerals are such a valuable feature. It's a bummer
| they're not more prevalent.
| adrian_b wrote:
| 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 wrote:
| > _I find even more useful the old-style numerals_
|
| A font of antiquated fashion doth boast most excellent and
| substantious qualities, yet prithee, what of olde style
| figures dost thou deem hath benefit that I, in mine own
| discretion, might chooseth?
| nativeit wrote:
| You must be Welsh!
| nine_k wrote:
| Set thy eyes on this excellent Font, for Instance: https://
| en.m.wikipedia.org/wiki/Georgia_(typeface)#/media/Fi...
|
| As can be most clearly seen, the Numerals are not of equale
| Height, but possess Descendants, like the 4, and
| Ascendants, like the 6.
|
| Shouldst thou desire to embellish thy Layout with such a
| Rendition of Numerals, thou canst:
| https://developer.mozilla.org/en-US/docs/Web/CSS/font-
| varian...
|
| This Feature requireth though that the Font so employed
| contained the proper Variants of the numeral Glyphs. Many a
| distinguished Font do.
|
| (Pray note that the -th Ending of Verbs is for Singular
| Third Person Form, not to be used with "thou". I do, thou
| dost, he doth.)
| o11c wrote:
| Any font without tabular numbers is buggy, because it can't
| support U+2007 FIGURE SPACE  
| erik_seaberg wrote:
| Also U+2012 FIGURE DASH (for things like phone numbers), and
| probably U+2212 MINUS SIGN (aligned with plus). Everyone
| usually defaults to hyphen-minus though, and all bets are
| off.
| twic wrote:
| I like tabular numerals. But you really need a small set of
| other glyphs to be tabular to really make them work. In
| particular, you need the plus and minus signs to be the same
| width, so that in a table like: gold +1.2%
| oil -6.4% corn +5.2%
|
| everything lines up and looks nice. At the moment, with CSS,
| there's no way to make that happen, and in normal typefaces the
| hyphen-minus is too narrow. You can replace the minus signs
| with a wider dash, but that is semantically wrong and also a
| pain in the arse.
|
| It occurs to me that contextual alternates could make this Just
| Work. I haven't used any typefaces expensive enough to do that
| though!
| LegionMammal978 wrote:
| I suppose one way to make it work in CSS would be to split
| the numbers on the decimal points, and align the parts as
| necessary. Though there's no way to get around the
| <td>/<span> soup, unfortunately.
| Suppafly wrote:
| >you need the plus and minus signs to be the same width
|
| I've never thought about it, but that is somewhat annoying
| that the math symbols aren't a consistent width with each
| other.
| inferiorhuman wrote:
| _chuckle_
|
| Now throw in inline vs block equations into the mix.
| idoubtit wrote:
| > the hyphen-minus is too narrow. You can replace the minus
| signs with a wider dash, but that is semantically wrong and
| also a pain in the arse.
|
| In this case, an alternative to "-", U+002D HYPHEN-MINUS, is
| "-", U+2212 MINUS SIGN. On Linux, I considered mapping the
| keypad substract key to it, but instead I configured a
| xcompose alias. gold +1.2% oil -6.4%
| corn +5.2%
| airstrike wrote:
| I hear you. Back when I was in Investment Banking, I was
| guilty of replacing hyphens with en dashes in all sorts of
| labels to make them line up properly in a table... It wasn't
| perfect, but it was a decent improvement
|
| Generally, numbers were right-aligned in cells, so the % at
| the end was consistent (when present) and the plus/minus
| before the numbers didn't make a difference because of the
| alignment. But labels on the left like in some P&L or Cash
| Flow statement were always annoying
| ttepasse wrote:
| Back in the days of HTML 4.01 there was the idea of an align
| attribute where possible numerical data could auto-align on a
| specified character: <td align="char"
| char=".">EUR 1.20</td>
|
| https://www.w3.org/TR/html401/struct/tables.html#h-11.3.2
|
| HTML 4 was still in this weird in-between time where there
| were styling attributes in HTML coexisting with the upcoming
| CSS. Afair no browser ever implemented character alignment
| and in Google's HTML it is only written up as obsolete:
|
| https://html.spec.whatwg.org/multipage/obsolete.html#dom-
| tab...
|
| Styling in general is of course a CSS thing - but thinking
| about it arranging alignment in multiple interdependent
| elements is a problem which not just need a property but a
| layout algorithm which browsers then need to implement. So we
| still don't have nice things.
|
| > It occurs to me that contextual alternates could make this
| Just Work.
|
| The replacement mechanism in OpenType fonts is surprisingly
| useful. I remember Apple's San Francisco font switches
| between different variants of the colon if it follows text
| characters ("my proposal: nuke it from the orbit") or if it
| exists between numbers as in a time ("23:52"); in the latter
| it is more centered.
| sdwrj wrote:
| Crazy how most fonts don't support any of this... (update: oops,
| I'm wrong!)
| TheRealPomax wrote:
| 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 wrote:
| Variable Axes have been around since Adobe Multiple Masters
| in the mid to early 90s:
|
| https://web.archive.org/web/20091223045132/http://partners.a.
| ..
| TheRealPomax wrote:
| But the "fvar" table [1], as part of the OpenType
| specification, has not.
|
| [1] https://learn.microsoft.com/en-
| us/typography/opentype/spec/f...
| Gualdrapo wrote:
| Because not all _typefaces_ are OpenType, and not all OpenType
| typefaces have features set.
| ashton314 wrote:
| If you like typography, check out Butterick's Practical
| Typography: 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 wrote:
| 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.
| bloopernova wrote:
| 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
|
| 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#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 wrote:
| 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 wrote:
| TIL several useful things about typefaces!
| TheRealPomax wrote:
| 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/tatras-shaded
|
| https://v-fonts.com/fonts/wavefont
| jsheard wrote:
| Also Recursive (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 wrote:
| 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 wrote:
| 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
| willcodeforfoo wrote:
| Nothing really to add... other than the type on that page looks
| gorgeous.
| Sparkyte wrote:
| 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 wrote:
| > _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 wrote:
| This was my nudge to see if Berkeley Mono v2 is out yet.
|
| It is not.
| cflewis wrote:
| 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 wrote:
| 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 wrote:
| 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
| ttepasse wrote:
| What I'd really love would be a proportional version of
| Berkeley Mono.
| system2 wrote:
| Maybe for print, it is important but for the web, we must stick
| to system fonts for SEO and speed.
| lofaszvanitt wrote:
| How does font type influence SEO and speed!?
| system2 wrote:
| 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/) 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.
| keybored wrote:
| Small caps looks slick. I wish more websites used it.
| ashton314 wrote:
| I commented elsewhere on this; Butterick uses small caps for
| internal links in Practical Typography:
| https://practicaltypography.com/
|
| I think he got this style from classic reference books like
| Elements of Style. It does look super sharp.
| OlegWock wrote:
| 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 wrote:
| 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.
| hammock wrote:
| 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 wrote:
| It still expands, just not as much as before.
| hammock wrote:
| There is a step change of difference. Wondering why.. is that
| a glitch or programmed into the font
___________________________________________________________________
(page generated 2024-09-10 23:00 UTC)