7 ms·
Typography is impossible (2016)
- john-doe 5y ago(2016)
- deleted 5y ago[deleted]
- kwatsonafter 5y agoThat'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.
- n0w 5y agoWe'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 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 5y agoDoesn'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).
- n0w 5y agoSure, 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.
- lelandfe 5y agoThis 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/#?code=N4Igxg9gJgpiBcIA8BhAhgJygPgDoDsACQpAZQBc0wBrQgZwAcqYBeXEADy7oFs0AbfuzxFiJACowO5bAAkYgiIQDuEDPyhIA9JOkixEqTMBUcIHI4QIxwxwChwgVjhAUHCAmOFOAhOECkcIEA4bbpkFi2ilTUItroWCIgAL5AA 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 https://i.imgur.com/MaHfPr3.png
- tshaddox 5y agoYou'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).
- tshaddox 5y ago> 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 https://en.wikipedia.org/wiki/Zalgo_text
- tshaddox 5y agoYes, 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 https://imgur.com/a/nH3KDbZ
- ratboy666 5y ago"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 5y agoAt 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".
- daniel-cussen 5y agoThink of it like this, though. Suppose books were invented second to the computer, not first. They'd be the hottest thing. Everyone would be reading in public and giving up their unreliable and vulnerable smartphones, who could resist the atomic collateral of a book, it simply uses so many more atoms per bit than a chip. Books are so much more trustworthy! I've only witnessed one hack on a book whereas I've seen so so many on computers. So then, someone would post exactly your comment, but in reverse, "I have given up 'teaching typography'." Why? Because nobody cared about subpixel rendering, rotating screens, SVGs versus rasters, because everyone would be exploring kerning tables and spring space.
- tshaddox 5y agoI'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/ https://seek-oss.github.io/capsize/
- dboreham 5y agoPresumably it's an inside joke of some sort that the submission title has different capitalization than the article?
- pmoriarty 5y agoI copied and pasted the title from the article and HN capitalized all the words in the title.
- memco 5y ago> 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 acomódate that the left to right top to bottom is not the default for everyone across the globe
- ChrisArchitect 5y ago(2016)!!
- beardyw 5y agoTypography 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 5y agoTotally 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 5y agoTypography 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 5y agoIn 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.
- 5y ago
- ThinBold 5y agoIn 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 5y agoFWIW, 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 5y agoI 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.
- unsupp0rted 5y agoI 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 https://fonts.google.com/noto
- cactus2093 5y agoI 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 5y agoIn Sweden everything is in Helvetica. It's really hard to spot text in other fonts except for (rare) logos.
- LordDragonfang 5y ago> but thanks to licensing fees we've been forced to re-invent that wheel over and over. The fact that licensing fees are even an obstacle here for adoption of a font designed over half a century ago highlights how broken the current intellectual property laws are. At some point of near-universal adoption, a functioning society should just release such a thing into the public domain and provide the original author a pension for his troubles, instead of worrying about rent-seeker from every amateur designer.
- seanp2k2 5y agoThere used to be Infinality which made fonts look amazing on Linux a decade ago. https://web.archive.org/web/20151103070844/http://www.infinality.net/blog/ https://web.archive.org/web/20151103070844/http://www.infina... . Now it looks like https://gist.github.com/cryzed/e002e7057435f02cc7894b9e748c5671 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://en.wikipedia.org/wiki/Droid_fonts https://fonts.google.com/specimen/Source+Code+Pro https://fonts.google.com/specimen/Source+Code+Pro and now https://fonts.google.com/specimen/Inter https://fonts.google.com/specimen/Inter
- wildrhythms 5y agoI do mostly front-end development for work, I use a iMac with a 4.5k display, and the few times I start up a Windows or Linux machine and look at how it's rendered I'm really taken aback at how BAD fonts look across the board. And it's not a browser issue; across the entire OS the text just doesn't look right compared to the Mac. The strokes are too thin sometimes, too thick sometimes, edges that should be smooth are unexpectedly jagged... Maybe it's a resolution issue, maybe it's a display issue, maybe that's just how fonts are supposed to look and Mac OS has warped my perception. But they look terrible.
- tshaddox 5y agoCould it be mostly that your Mac is rendering text with 4 times the number of pixels as comparably sized text on other displays?
- Gracana 5y ago> maybe that's just how fonts are supposed to look and Mac OS has warped my perception Well, Mac OS users lived with this serious rendering bug for more than a decade: https://www.lighterra.com/articles/macosxtextaabug/ https://www.lighterra.com/articles/macosxtextaabug/ I remember that look well, and even thought that was how text was supposed to look. I stopped using Mac OS before that bug was fixed, so I don't know what else may be going on over there. However, there was a period where a lot of websites looked terrible on non-Macs because Mac-using designers would set really light font weights, which apparently looked fine with Apple's font rendering. Were they right, while everyone else was wrong? I don't know. Nowadays I run pretty-much-default Ubuntu linux with a 4k display, and I think fonts throughout my system and the web look great, both compared to my iPhone (which also looks great) and compared to my standard definition Windows setup at work (which looks anywhere from 'bad' to 'fine', depending on the program, font, scaling, etc).
- needle0 5y agoAnd that is just for western text. Welcome to Chinese/Japanese/Korean/Vietnamese -- Over 50,000 kanji glyphs, hangul, hiragana/katakana/kanji mixed script, language-specific glyph variants with identical codepoints, Left-to-Right, vertical text where some glyphs must rotate but some must not, ruby text, language-specific word wrapping rules, language-specific ligatures that exist but mostly shouldn't be used save for very few occasions, terrible software implementations based on non-understanding of all of the above, ARRRRRGH!
- 77pt77 5y ago> ruby text Excuse me?
- mvgoogler 5y agohttps://en.wikipedia.org/wiki/Ruby_character https://en.wikipedia.org/wiki/Ruby_character
- eyelidlessness 5y agoNot to be confused with Ruby strings, which have their own complexities
- dorianmariefr 5y agoNot to be confused with `"ruby".class #=> String` :)
- wodenokoto 5y agoI don’t know why it’s called ruby. If you know Japanese you will know this as “furigana”. It’s mainly used for added readings to words written using kanji.
- RobertKerans 5y ago"Ruby" is the name of the size of the type
- throwaway14356 5y agoim impressed by how well it all works. cant think of any API that comes even close. Often not by lack of effort.