Shades of FF Chartwell, which is one of those amazing things you just think to yourself "well, this is going to take over the world of design and GUI's and so on", only .. for some reason, it doesn't:
"FF Chartwell is a set of three fonts* that together create a remarkable set of tools for creating bar, line, and pie charts. It uses OpenType ligatures to perform its magic – a series of numbers can be transformed into clean, perfectly rendered graphs, as you type."
Having used Chartwell for a few projects, I'm fairly convinced that this ligature trick is the way all GUI's should be done. In fact I've got this hypothesis going, that every GUI toolkit/method is eventually just going to re-invent ligatures and type... ;)
Why? That seemed a trick in search of a problem. I mean, I get having a small dsl for describing charts. That is why we have quite a plethora of them. They usually have more complexity than you'd hope, because it is a complex problem.
But spark lines, you might protest. Of ridiculous niche value and really need to be super high resolution. The point is to pack a ton of density. If you are just showing a few numbers, consider just showing the numbers.
And if you haven't used the likes of metapost, graphviz, etc., Give them a try.
Yeah, I'm quite familiar with these toolkits. (Been at it 30 years, yo.)
The thing about the ligature trick, and fonts in general, and more specifically the packing of known functional GUI elements into a broader ligature description, is that its human readable/comprehendible without also requiring a great deal of 'programming'. Well, in fact Chartwell "is" programming, or at least coding (not Turing..) of information in a reproducible way - and the fact that we use the language of glyphs as a GUI metaphor, is also appealing. My affinity for this approach is that it is tied to human symbol-making in an intrinsic, self-describing way; whereas a technical GUI system might consists of a multi-variate collection of abstractions, putting it all into glyphs and ligatures ties it into our most basic of operational agilities, reading and writing.
Not, compiling, hacking, code, transmogrifying, mutating, extending, abstraction, tool-pushing, etc., but rather "describe this in glyphs/ligatures like every language ever, or GTFO>.."
I mean, WIMP has its thing, and touch and mobile too, but I do wonder if there isn't something to a pure graphemes and symbols based mode of interaction... which I would argue is where we are heading, with our multiple-gigabyte OS updates, anyway .. when we could nevertheless be doing it in <128k.
I think you are seriously abusing "describe this in glyphs/ligatures". In particular, there is a reason "a picture is worth a thousand words." :)
Some things are simply more easily done outside of the standard glyphs we use for words. I don't expect this will ever change. And I shudder at all of the complexity added to our glyph systems to support efforts at making "one true language" that can do everything.
Oh, no question there is abuse going on here - this thought experiment is really reaching and extending beyond a certain horizon, which may or may not be idiotic. ;)
Perhaps you're familiar with the wonderful and super-crazy TempleOS? There are some great things about the way the UI is expressed there ..
>Some things are simply more easily done outside of the standard glyphs we use for words. I don't expect this will ever change. And I shudder at all of the complexity added to our glyph systems to support efforts at making "one true language" that can do everything.
Certainly a valid concern, and I acknowledge your conservatism, but I think you might want to look at the cyclomatic complexity of the work required to splash a modern GUI up on the screen, and compare it with the cyclomatic complexity required to render a human-readable string of glyphs. There is a lot of opportunity to optimise these processes - and I would wager that having a font full of glyphs required to construct a UI paradigm, having those primitive elements processed by the OS in a simple way, and giving those elements to the end-user (who admittedly would need to learn something new for it to be productive), may indeed produced a "simpler" interaction method for future users. Yes, there is a certain fallacy to the "one true language" approach - but if you pay careful attention, you'll notice that the OS's of most common use in the last 10 years are on that road, anyway.
Break this out of the box a little, lets move from glyph/grapheme/font territory - what if the entire OS was instead expressed with SVG files? I think this is a viable thought experiment, personally.
Most modern gui toolkits bother me in ways that I can't adequately express. All the more so because most fallback to thinking CSS is the answer. Often completely ignoring what you can easily accomplish if you are willing to use absolute positioning, oddly enough!
Seriously, I don't think CSS is the worst answer. However, trying to get everything to work with some default flow behavior is borderline insanity. More, it is completely unnecessary. My favorite example lately has been http://taeric.github.io/cube-permutations-1.html for how you can layout using absolute positioning perfectly fine. (I similarly did sudoku with minimal effort using similar markup.)
But the worst sin is the sheer instability of what we are building as our foundation. The box and glue methods of TeX might not be the most intuitive method, nor the most powerful. However, it is nice that they have been stable. And not just in the "doesn't crash" sense of the word. In the, "I would feel comfortable building on top of it" sense.
So, let me be clear that I'm skeptical, but I would be delighted to be proved wrong.
I've been into GUI's and so on since before the birth of the web, and I've always had this deep discomfort with where we have arrived here and now, today. The Web and its UI is such a disastrous, convoluted mess of abstractions and significance and conceptual complexity - yet, it works "well enough" that a majority of the world can deal with it.
But this doesn't mean we can't think outside the box. Yes, I concur - TeX's box and glue is another kettle of fish - but then so too are things like Box2D's physics forces and contact mechanisms, which I personally believe, were it integrated into a forward-thinking GUI framework, would open the doors to very interesting and versatile interfaces - as has been demonstrated by its application towards making those most intuitive interfaces of all times, games. I would love to be able to say "[ the context of this independent element has a gravity of -1. ]", and then watch as my sentence floats away to the top of the screen, to function as a daily "Todo list" which, once I press the '.' period at the end of the ToDo item, then sets the gravity to 1, and the whole thing lands at the bottom of the screen, away from my attention. There are many abstractions like this out there which could be applied to human/computer interaction - we've selected a set of words, symbols, concepts that are granted us by the designers of modern OS's, but I truly believe that the effort of producing interaction symbology is far, far from where it could be. As do many other people of course (http://worrydream.com) .. there seems to be a plethora of views about this. Almost as many views, as symbols in the world there are to be read ...
I am fascinated by this idea despite the fact that I don't actually understand it. Ever since I read your comment, I've been trying to think what it would mean to build a GUI this way. It has been thought-provoking, and has caused me to read about interesting things like ligature substitution rules in OpenType, but I still haven't made much progress.
I would be grateful if you would elaborate in any way at all.
Here's a simple example of what I mean: consider the title-bar of the window you're reading this page in (assuming your wm has titlebars, but lets assume it does and you know what I'm referring to..)
From left to right, there is a narrative - quite a bit like words in a sentence.
The resources to construct that sentence - the bitmaps for the window control buttons, the spacing and formatting of the title, the right-hand-side elements of the window title - all of these resources consume some kind of storage on the computer, and require a set of abstractions in order to process through the pipeline that eventually renders something visible to the screen .. there are multiple filters in that process - the file-opening, then parsing of the file resource (.png) for an icon or two, then opening some type file, finding the elements of the on-screen elements which construct the glyphs in the title text, etc.
This all, eventually, gets stuck up on the screen using some final method - perhaps the OS is using GL, and everything is just triangles, all the way down. Perhaps there's texture blitting and line-drawing primitives too ..
All of these elements can be expressed as glyphs in a typographic way, and all of the changes and states that can occur with these elements, also - as ligatures, individual glyphs, etc.
My idea is that these resources can be replaced with glyphs and ligatures from a font, and that indeed GUI elements themselves can be expressed (I would argue 'better') as graphemes in a common language context.
Think of it like this: instead of having a filesystem full of resources that have to be individually processed and extracted, there is simply "funkyOSfromtheFuture.ttf", and everything that is required to be displayed by the OS, indeed anything, can be expressed as an array of mappings to glyphs within that single .ttf.
Its not just that I hope to achieve a 'resource compaction' down to an ultimate font file and thus do away with a filesystem full of differing technologies to produce, ultimately, graphemes - though that is a nice effect. Its more also that I think that GUI's can be expressed in the same way that letters and words can be used to construct entire useful sentences - and I wonder at what sort of programming advances can be made with an OS (or more specifically, GUI environment) that is designed around the central principle that the elements of the interface are expressible using typographic metrics commonly used to render human-readable text. To me the "close window" icon is equivalent to the "." character, in terms of its effect on my eyeballs. So, why should it be splashed up on the screen using technology vastly different to that used to render other symbols, instead of just being included in a 'new GUI alphabet'.
There have been efforts made to put things into this kind of technical context in the past - take for example NextSteps' approach where "everything is just display postscript" as a metaphor.
"What if we built an OS whose entire look and feel was derived from a single font, and those elements were accessible to the keyboard user?", is the thought experiment.. like, I could have an alternative element in the font, and convenient key combination, that would turn any "?" in this sentence into a clickable link .. and you, upon clicking it, are presented with a means of answering the question...
Instead of having abstract concepts of communication that are entirely different (forms, fields, WIMP elements, etc.) than the base set of tools we're already used to using as humans (letters/words/sentences/symbols), we merge the set. My window title becomes "< hi there .", and if you click any of those symbols, they do things.. of course, this is a very simplistic description but can think of others.
Lets try another simple one: "[ This sentence would be a draggable window because the '[]' chars are considered by the OS to be clickable/draggable and represent a 'collection' of information that the user might want to move around the screen, so to do so they just click either one of the '[]' symbols that represent the edges of the collection.]"
Another one: "Do you want to answer this question? Then simply click the '?' symbol at the side of the sentence, and you will be prompted to input your data - if not, simply click the period at the end of this sentence to dismiss the element."
I've been thinking about this within the context of data visualisation schemas like Vega (http://vega.github.io/). They sort of a represent a middle ground between a full programming API like matplotlib to specify a graph or the XML SVG language, and the language of matrices that bitmap images really are. Easy for a machine to parse and easy to change with a more consistent structure for a given graph, with some limitations on what you can express.
Given this idea, I can't figure out how to deal with the fact that fonts are finite and, even with ligatures, relatively quickly enumerable. User interfaces, on the other hand, often require drawing arbitrary pictures. As I understand it, Chartwell takes advantage of the fact that charts have finite resolution, so that it's possible to enumerate all the possible heights for a bar or angles for a pie wedge as individual glyphs. But would that be possible for a general user interface? I may be missing something obvious.
Compositionality should help with that. But at the same time, constraints should be domain based. Within the domain model, you can have a language express what you need.
Your comment brings 3 thoughts to me:
1. Compositionality should enable elegant combinations of GUIs. Our programming language primitives are finite, yet there are infinite ways to combine them. Just as there is 26 letters in the alphabet, and yet we we have a growing language.
2. Domain modelling matters. Constraints on the system should be on the domain we are working within. Hence the primitives would have to be designed according to the domain.
3. Something about "constraints" and "creativity".
This article is more about typographic considerations for charts, not replacing graphics.
Chartwell is a neat hack made by clever people, but on the web we should eschew icon fonts. Your interface should not rely on custom typefaces making it to and being displayed by your visitor's browser.
There is actually regulation in the EU (and I suppose other countries) that requires a minimum height of the letters in the ingredient list. The wider typeface would not satisfy these regulations.
Wow their side menu (Apps, Branding, Choosing Fonts) has such horribly low contrast (1.5 - 2, depending on where you measure the text colour; it's small type so due to antialiasing there isn't really a single predominant colour when you zoom in to a screen grab) it's almost unreadable.
Legibility is the most important part of typography. I'm not suggesting this should detract from the article as the writer is probably not the person who made that design decision (EDIT: I think the article's very good actually), but it's pretty weak coming from a site called typography.com.
Most dash-boards are not that useful, but damn they sell, so go with as much eye-candy as possible. Use futuristic, 3d, moving, real time graphs, etc. If it's something serious though, concentrate on formatting and spacing, and pick a boring simple font. Make it neat and stylish, but don't add distractions. Give focus on the content and what is important. Use spacing instead of contrast.
Legal status of fonts and typefaces is INSANE. The cost of some of these fonts in $199 https://www.typography.com/fonts/isotope/overview/ And well you can kind of have a strange position in copyright law in the US and internationally.
The cost of these fonts are up in the hundreds of dollars. Yet in US we have a mixed bag. Officially it is:
> Typefaces cannot be protected by copyright in the United States (Code of Federal Regulations, Ch 37, Sec. 202.1(e); Eltra Corp. vs. Ringer). The idea that typefaces (rather than fonts, which are computer software) cannot be copyrighted in the United States is black letter law. 37 C.F.R. § 202.1(e). Under U.S. law, typefaces and their letter forms or glyphs are considered utilitarian objects whose public utility outweighs any private interest in protecting their creative elements.
BUT we have cases where judgement has been awarded to Adobe and Target is a defendant in a lawsuit for their use of a unlicensed font in a video.
I am conflicted. I love having fonts and I love open source, BUT I also appreciate the technical and artistic achievement these fonts produce.
The BEST font for me has been Cardo and it has had the best license ever http://scholarsfonts.net/cardofnt.html I studied several "ancient languages" and a font Cardo saved my academic life by making an awesome unicode font for my languages. One font for English, Greek, Hebrew, Aramaic, Latin and others. Before that I had to write my papers in Latex just to cover the languages or transliterate them (ugh).
It is incredibly difficult, time-consuming, highly-skilled work to create typefaces in the ranges of weights at the scale discussed in this article.
At the same time, literally nobody _needs_ an fancy custom typeface; you can accomplish any expressive task you have, competently, with the fonts accompanying your OS.
Expensive typefaces are a form of fashion. If they light you up (they do for me!), pay for them. Otherwise, use free fonts. There's really no insanity here. People pay through the nose for mechanical watches, handbags, shoes, furniture, orchids, and chefs knives, despite perfectly satisficing alternatives at minimal cost.
It would be weird to complain about the insanity of regulations that allows Sakai to charge $5,000 for a knife when equivalently functional knives are available for $100. We all understand what's happening when people buy them.
No the insanity is 100% the legal status of fonts and typefaces in copyright law. They contradict each other.
> pay for them. Otherwise, use free fonts
I did state I have paid for some fonts. I wasn't mad about the idea of paying money BUT the prices are extravagant.
TLDR for bellow: Things for creative people shouldn't be so expensive they are then reserved for only the elite or corporate world.
I am an opinionated person and my career has been varied and one of my favorite roles is being the "tech guy" who is also the "creative person" of the company. So I take the official photos for my company and I also produce videos. I use to do it with my own personal equipment but now I have much better gear that the company has purchased for my job.
I have also owned my own recording studio and had a small record label. My bands ended up touring the world, getting on MTV (When they use to still play music videos) and move on to bigger Indie Labels. (Side note: the most these guys made was $7,000 per person a year after touring cost).
I own expensive gear and I have thousands of dollars in plugins and programs I personally own. Many audio plugins are $300+ and the software I have paid over $1,000 for one program.
These plugins shouldn't cost more than $50. Applications should be free with option of paying in for certain extra non-essential features. (Resolve was a $3,000 video editor 4 years ago and now it is available for commercial use for free and $299 for the professional features which I rarely use).
I want everyone to have the ability to fulfill their creative outlets and if they have the ability to make a living awesome. People who make the tools should also be able to make a living, but not so expensive and overpriced that they cater to only those who have expendable income or corporate money to spend.
The instrument Kanye pirated is a synthesizer called Serum. It's $190. So one way that has changed is they have a rent to own model. You pay $10 a month and you use it right away, but it also takes $10 off the price. You stop using it and stopped paying for a few months no problem just start right back from where you ended.
Another thing in music is now the plugin package I paid $1500 for in 1999 is now $400 and on sale you can grab it for $180 and you have access to the same plugins that Grammy Award winning artist use.
Why should it not come to fonts where people can pay $5 per font or say $50 for a complex font. Many of these $200+ fonts are initiative changes of a dozen other fonts.
I believe fonts are awesome and well worth it BUT they shouldn't price the vast majority of people from using them legally.
A Sakai water-quenched sashimi knife will set you back $1200. A perfectly adequate yanagi can be had for $60. A truly skilled, dedicated cook might own the $1200 knife, because they work with it all day long and having the best, most finely-crafted knife available to them might make the work more pleasant. At the same time, rich morons who treat knives as Veblen goods are bidding up the prices on the Sakais. Is it "fair" that only the elite and the wealthy get the water-quenched sashimi knives, while plenty of serious journeyman cooks make do with the $60 knife?
If the answer is "no, it's not fair", that's fine. But I'd be interested in an argument about the insanity of font licensing that didn't depend on us relitigating capitalism.
You are priced out of all sorts of things. Among them: very high-end typefaces, which are licensed to ad agencies, Fortune 500 company marketing departments, and major periodicals. You can shell out some extra cash to use the same fancy typefaces they do, or you can use serviceable free typefaces.
I'm not seeing the insanity or the unfairness.
To me, typefaces are almost the platonic ideal of a good whose pricing can't really reasonably be challenged. Nobody needs them. Every deployment of a commercially licensed typeface is a vanity. Vanity is fine! But it's never an entitlement.
I dig the article (mostly about small fonts, a lot of GDPR and cookie warnings and such are written as notes / small fonts and are hard to read for example), but at the same time I noticed the top logo, which read "Fontsby Hoefler&Co.". Who's Fontsby? Bit of an odd name, bit posh.
Im fairly sure it was typography.com is notorious for tracking your movements around the Internet, obviously this is common behaviour from web font providers but I seem to remember this group being especially intertwined with ad tracking *citation needed but currently walking and typing!
I haven’t personally investigated... and I’m not sure how one would go about it, given how, at least without GDPR, I suspect more and more confirmation of analytics data between parties will happen server-side for performance reasons. Of all third-party content, SaaS and font networks would already have to track everyone with unique IDs if invoicing based on usage, but it’s damning if your paid service provider says it collects and shares data (presumably about your users) with advertising companies in the privacy policy. As if they aren’t making enough money from you? Or maybe it’s to support tiers of service?
Not really that much in the article except for some OK advice on sizes and superscripts.
Overall I was left with an impression of how American it looked. It was like a plastic woodgrain dashboard. I guess that shows how much design aesthetics come into it - but that's OK if you know you want to look American.
Interesting! I don't immediately perceive anything distinctly American about it, but I'm definitely biased. Could you provide any examples of what you'd consider non-american data design, if only for my personal design curiosity. :)
I enjoy typography and design, but I don't like the blind realisation of obviously bad design decisions. Take https://d31td5fkd89rr1.cloudfront.net/assets/images/blog/des... -- the ingredient list is sick itself, it should not be an unformatted block of text but at least a proper list. They are designers, why don't they invent an informative way to display ingredients? My feeling is that they have to support the attempt of their client to hide information. I would not want to do such a designers job, supporting bad intentions.
In a vacuum a list is preferable, but I doubt that's possible in the vast majority of cases. Take the label you linked: space on packaging is limited, so you can't just make it run on forever. You could divide the list in multiple columns (with clear dividers to make the reading direction unambiguous), but some words are much longer than others ("PEG-120 Methyl Glucose Dioleate" vs "Allantoin"). You can't reorder the list either because the order is legally mandated.
You might be able to make a multi-column list where most list items run for multiple lines, but that isn't that much better than the block of text and still takes up more space (space better used for branding)
Not that someone won't always be there to do it, but about six years ago I decided as a designer / engineer, that I'm accountable and won't purposefully implement dark UX patterns after being asked to add a feature to a deposition platform that I was working on to score "truthfulness" of statements based off "microtremmor lie detection". A totally bullshit science. I fell out with my cofounders over that and left the company.
Also no weapons or oil and gas.
If we all just said we wouldn't do shit like that, I think we can make changes. I mean someone's still going to design discount toilet paper rolls that are 5 sheets but look like a full roll, and I guess cram the text together on bathroom cleaners so you don't know how you're poisoning yourself or that two almost identical looking cleaners contain ammonia vs. bleach so you mustard gas your roommate.
> Let me read you the road to hell, a series of questions that become more difficulty the deeper you go. the first couple are easy, would you—
> 1. Design a package to look larger on the shelf?
> 2. Do an ad for a slow-moving, boring film to make it seem like a lighthearted comedy?
> 3. Design a crest for a new vineyard to suggest that it’s been in business for a long time?
> 4. Design a jacket for a book whose sexual content you find personally repellent?
> 5. Design an advertising campaign for a company with a history of known discrimination in minority hiring?
> 6. Design a package for a cereal aimed at children, which has low nutritional value and high sugar content?
> 7. Design a line of t-shirts for a manufacturer who employs child labor?
> 8. Design a promotion for a diet product that you know doesn’t work?
> 9. Design an ad for a political candidate whose policies you believe would be harmful to the general public?
> 10. Design a brochure piece for an SuV that turned over more frequently than average in emergency conditions and caused the death of 150 people?
> 11. Design an ad for a product whose continued use might cause the user’s death?
> When i gave this test to students between the ages of 21 to 28, i discovered that in a group of 20, 3 or 4 of them were willing to go all the way—that is, participate in
advertising a product whose use might cause the user’s death. these were generally idealistic young people as yet seemingly uncorrupted by money or professional life. However, they drew the line at harming their family, friends or neighbors.
I've never seen a (printed) product label with the ingredient list as a formatted list. They are always a comma-separated free-flowing text chunk. I guess this saves space.
A big fat bullet instead of a comma wouldn't cost much space, but I don't think I've seen it used. People are perhaps scared of innovating when there are legal requirements that they haven't referred to recently, while they are fairly confident that what they've always done is compatible with the rules.
By the way, what is it with a large proportion of labels containing either an asterisk but no footnote, or a footnote but no asterisk in the text for it to refer to? I suppose it tells us something about the workflow they use for producing these labels.
I think it's less about fear of innovation and more about other constraints like space and readability.
A comma in most condensed sans serif collections like those used for nutrition labels (Helvetica, Univers, et al.) takes up less space and is more readable than a bullet or other glyph.
Here's a quick example using Roboto Condensed and the ingredients for Fruit Loops. The bullets are longer or harder to read. (Using Roboto Condensed because it's free so others can test with it and it's comparable to Helvetica/Univers).
Labels on products have limtied available space: if the ingredients were formatted as a list with a newline between each item, then the text would have to be smaller, which would probably make it harder to read overall.
Many of the fonts mentioned seem to be commercial. There are plenty of free/floss fonts that have similar features. Montserrat, Roboto, Noto and Open Sans are particularly good.
I can see why your comment is being downvoted — the lack of explanation makes it seem more provocative — but I agree with your sentiment.
Although a settlement was reached in the H&FJ lawsuit, which probably involved Tobias Frere-Jones receiving payment of some sorts, it’s hard to see Hoefler profiting from work that he (morally, at least) stole.
It's only the lower part of the image that's of interest as an example; to use low contrast on the (mostly irrelevant) upper part of the image makes it easier to focus on the part that's discussed in the text. IMHO.
You might be right. Nevertheless it seems distracting on a typography focused article, while the same focus could have been drawn without affecting the look of the document.
Also the actual first image bothers me in a similar way: the colors seem to blend into the background.
I concede it might not be a very valid reason to give up on the article but since it seems to be an ad for a set of products I find it fitting to judge it on appearance.
https://typographica.org/typeface-reviews/chartwell/
"FF Chartwell is a set of three fonts* that together create a remarkable set of tools for creating bar, line, and pie charts. It uses OpenType ligatures to perform its magic – a series of numbers can be transformed into clean, perfectly rendered graphs, as you type."
Having used Chartwell for a few projects, I'm fairly convinced that this ligature trick is the way all GUI's should be done. In fact I've got this hypothesis going, that every GUI toolkit/method is eventually just going to re-invent ligatures and type... ;)