[HN Gopher] Typography is impossible (2016)
___________________________________________________________________
Typography is impossible (2016)
Author : pmoriarty
Score : 122 points
Date : 2022-03-16 18:21 UTC (4 hours ago)
(HTM) web link (medium.engineering)
(TXT) w3m dump (medium.engineering)
| unsupp0rted wrote:
| I like good website design and that "good design" evolves every
| year. But how many hours have been spent tweaking fonts in the
| English language by how many brilliant and creative people?
|
| I wish we could all save each other the time, by agreeing to use
| a single font in a dozen iterations (e.g. "Universal Serif" vs
| "Universal Sans" vs. "Universal Fixed Width", like Noto or
| whatever)
|
| It should be a social imposition to use a different font.
|
| Like: yes, you can do it and people do, but keep in mind you're
| exercising your right to be creative at the expense of
| everybody's comfort/convenience, in the same way as a busker on
| the subway.
|
| If you're very good at what you're doing then you might be
| brightening everybody's day. But if you're even average at it,
| you're only annoying people and they will tolerate that annoyance
| out of social obligation, not because they like it.
|
| That would save everybody the hours, days, and sometimes weeks of
| picking a font, a keming, a line-spacing, etc, not to mention the
| annoyance of having to read awkward fonts.
|
| https://fonts.google.com/noto
| cactus2093 wrote:
| I feel like Helvetica is essentially Universal Sans, but thanks
| to licensing fees we've been forced to re-invent that wheel
| over and over.
|
| > But if you're even average at it, you're only annoying people
| and they will tolerate that annoyance out of social obligation,
| not because they like it.
|
| I think this part is already implicitly understood, but
| everyone thinks that they're above average or that their app is
| special enough that it really needs a custom font.
| SonOfLilit wrote:
| In Sweden everything is in Helvetica. It's really hard to
| spot text in other fonts except for (rare) logos.
| echelon wrote:
| Design is good. It employs a lot of people.
|
| At the other end of the spectrum, we could continue to employ
| the same typography and UI primitives reusably and forever,
| getting rid of or repurposing design efforts and design people.
|
| Both choices have trade offs.
|
| The market selected our current methodology and practices, and
| not for a lack of alternatives, for better or worse.
|
| Design is thought to distinguish your brand and elevate your
| experiences. Maybe not everything truly needs this, but I don't
| see enough compelling evidence showing how to compete without
| it. The market says design is important.
| ashton314 wrote:
| This sounds a little similar to the hubris of the GNU moe [1]
| manual. You're assuming you could make a "good enough" font
| that would truly be "good enough". I don't think you can even
| come close.
|
| A font adds so much character to the text. Where one font may
| be appropriate, a different text would look stilted or silly.
| Fiction, fantasy, technical, non-technical non-fiction, etc.
| books all require different fonts, in my opinion, to capture
| the character of the words.
|
| Noto is a fine font, but I don't want to use it for my blog.
| There are a bajillion fonts that are perfectly legible and for
| those of us who care, they make a difference.
|
| What _would_ help would be a little education and maybe some UX
| nudges: stop making Arial the default on stuff, (looking at
| you, Google Docs) encourage well-built fonts by making them the
| only default enabled options in your OS, etc. I don 't think
| there is "one font to rule them all", however.
|
| [1]: https://news.ycombinator.com/item?id=29990149
| ChrisArchitect wrote:
| (2016)!!
| kwatsonafter wrote:
| That's why I'm for Ted Nelson's plan where we turn all the
| computers into dreamtrons and just get the fuck down and leave
| the fonts for the grandmas.
| beardyw wrote:
| Typography used to be an art. Now it's expected to be a science.
| My (much) older brother was a typographer by trade all his life
| and most of what he did was by eye, not by measuring.
|
| For various reasons typography has become something everyone
| dabbles in, but few do well. It should not be a great surprise
| that something which is an art refuses to completely yield to
| science.
|
| Personally I have never felt confident with it (for obvious
| reasons) and just hope to produce something acceptable.
| chrstphrknwtn wrote:
| Totally agree. Typography is similar to grids in the same way.
|
| As a design it's tempting to set up "a perfect grid" so your
| life will be easier and everything will look great. But it's
| often better to know how and why grids work, and then create
| more informal layouts intuitively.
| jart wrote:
| Typography is an artform, but don't blame science for its
| decline but rather conformism. I've generally known people to
| weep and wail when something strays an inch from Helvetica,
| Computer Modern, and Roboto. Therefore, all one needs to do to
| be an 85% expert at type is put <style>@font { roboto:
| url(data:...) charset(latin1); }</style> at the top of an html
| page and everything magically looks good. If I wanted to get
| into typography then I'd probably do it by learning Arabic
| since it's all cursive and really complicated, which means
| plenty of opportunities for creativity.
| beardyw wrote:
| In many ways the familiarity and apparent simplicity of
| English text is a big challenge, particularly whole pages of
| text. A great book to read is Just My Type: A Book About
| Fonts by Simon Garfield. Turns out I live not too far from
| the resting place of the only matrices of Doves type, at the
| bottom of the Thames.
|
| My brother talks about setting whole pages by hand, and
| finding a word missing! Apparently it pays to leave a bit of
| extra space.
| n0w wrote:
| We've started trimming the whitespace from the top/bottom of
| blocks of text so that the bounding box is effectively from the
| top of the cap to the baseline.
|
| Mark Dalgleish describes the technique in this video (around
| 9:45) https://m.youtube.com/watch?v=jnV1u67_yVg
|
| It's made it a lot easier to reason about the layout of text
| compared to other elements on the page and achieve more
| consistent use of spacing.
| lelandfe wrote:
| Doesn't this necessarily mean that descenders will intersect
| with the next element? See the `space="xxsmall"` example at
| 14:17 - "lazy dog" has its "g" dipping into the Submit button
| sibling.
|
| Depending on how you're calculating the offset, this may also
| have problems with things like diacritics and non-Latin text,
| which may be taller (e.g Thai).
| tshaddox wrote:
| Yes, but this is true already. Here's a screenshot of how
| Hacker News looks on MacOS Chrome with some diacritics pasted
| into the beginning of your two paragraphs:
|
| https://imgur.com/a/nH3KDbZ
| n0w wrote:
| Sure, if you put things too close together they will
| intersect/overlap.
|
| This isn't an inherent problem of the technique though. You
| should be giving things enough space so that this kind of
| thing doesn't happen. It should be pretty simple to check
| that the smallest unit of space used anywhere isn't smaller
| than the amount being trimmed from the top/bottom of the text
| box.
| tshaddox wrote:
| > It should be pretty simple to check that the smallest
| unit of space used anywhere isn't smaller than the amount
| being trimmed from the top/bottom of the text box.
|
| It might be worth doing that, but note that there is still
| no guarantee of _any_ reasonable upper bound on the
| vertical dimensions text will render within. Zalgo text is
| a famous example that very clearly illustrates this state
| of affairs [0]. The fact is that _no_ current web design
| can guarantee that no text glyphs will overlap, short of
| using some non-standard font that prevents it, or perhaps
| by greatly restricting the usable Unicode characters.
|
| [0] https://en.wikipedia.org/wiki/Zalgo_text
| lelandfe wrote:
| This is trading typographical consistency issues, then. In
| this described setup, you'll have glyphs poking into the
| margin and padding between elements - which is what the
| existing bounding boxes work to prevent.
|
| Here's an editable interface from that talk: https://seek-
| oss.github.io/braid-design-system/playroom/#?co...
|
| You can see the issues when we write Hello World in Thai:
| https://i.imgur.com/MaHfPr3.png
| tshaddox wrote:
| You're wrapping your two Text components with a Stack
| component which lays out its children vertically, and
| you're explicitly specifying that Stack uses _zero_ space
| between each of its children. This doesn 't have anything
| to do with Thai characters specifically. The glyphs
| already overlap with common English characters like "j"
| and punctuation like commas. Moreover, you can get glyphs
| to overlap between two lines of a normal HTML element
| with line-height: 1 (and obviously even more easily with
| line-height less than 1).
| ratboy666 wrote:
| "Reason" about it -- typography is art. There are many issues
| that started around when GUI word processing started. For
| example -- the "spring space" is simply gone. As is the "set
| indent to current (horizontal and vertical)". Kerning tables
| are pretty much gone (we used to have kerning by size/font
| font/combinations. This has not been simple. But typography is,
| basically, dead.
|
| I have given up "teaching typography".
| n0w wrote:
| At the end of the day I'm a developer, not a designer, so I'm
| not confident to speak to the art/design side of typography.
|
| Having said that, I believe that art (and design) requires
| intention and thus some amount of "reasoning".
| tshaddox wrote:
| I've been doing this as well in some projects. I use Capsize,
| which I believe is the result of his team's work extracted into
| its own tiny library. Interestingly, it no longer uses a
| transform, and now applies negative margins in :before and
| :after pseudo-elements, as such:
|
| .capsizedText { font-size: 19.25px; line-height: 24px; }
|
| .capsizedText::before { content: ""; margin-bottom: -0.2597em;
| display: table; }
|
| .capsizedText::after { content: ""; margin-top: -0.2597em;
| display: table; }
|
| https://seek-oss.github.io/capsize/
| dboreham wrote:
| Presumably it's an inside joke of some sort that the submission
| title has different capitalization than the article?
| seanp2k2 wrote:
| There used to be Infinality which made fonts look amazing on
| Linux a decade ago.
| https://web.archive.org/web/20151103070844/http://www.infina... .
| Now it looks like
| https://gist.github.com/cryzed/e002e7057435f02cc7894b9e748c5...
| is a good source of info on how to achieve this. macOS still
| probably wins on font rendering for whatever reason, but at least
| we have:
|
| https://en.wikipedia.org/wiki/Droid_fonts
|
| https://fonts.google.com/specimen/Source+Code+Pro
|
| and now
|
| https://fonts.google.com/specimen/Inter
| john-doe wrote:
| (2016)
| [deleted]
| ThinBold wrote:
| In vscode, tab (the key above capslock) is implemented by
| counting how many characters are on the current line and adding
| 4floor(x/4+1)-x spaces to the current line.
|
| This obviously doesn't work if there are non-ascii characters
| that (have to) use a different font and hence having different
| widths. Or if you prefer variable-width font, then a purely ascii
| document will break tab.
|
| The developers reply on github that this (characters having
| different widths) is a frontend thing and they don't have enough
| API that can fix this. But of course since vscode is an open
| source project you can always fork it and fix it yourself.
|
| I don't know any other editor that cannot handle tab.
| nosefrog wrote:
| FWIW, the default behavior in Emacs is that tab indents the
| line to what its heuristics tell it the line should be at, no
| matter where your cursor is in the line. This is confusing at
| first, but as long as the heuristic is correct it's pretty nice
| (but it drives you crazy when the heuristic is wrong for
| whatever reason).
| ThinBold wrote:
| I check the document and the it looks great. Even if it fails
| to work at least you are always brought back to an integer
| value of x-coordinate.
| memco wrote:
| > otherwise it will behave like a really, really fast typewriter
| -- it'll go from left to right, letter by letter, until it hits
| the other margin, then start again on the next line.
|
| Or until it is switched to a different writing mode, which I
| would have loved this article to address since a lot of work is
| happening in the internationalization of layout design to
| acomodate that the left to right top to bottom is not the default
| for everyone across the globe
___________________________________________________________________
(page generated 2022-03-16 23:00 UTC)