I am fascinated by typography and page design and enjoy reading about it, but I have to admit I don't understand how this level of pedantry is able to survive.
The amount of documentation and attention to detail spent on typefaces and when to use them is often off the charts compared to the time spent on stuff like keeping the website running, documenting the API or even the basic functionality of the app.
It's like if someone grows oak trees for a century and slices veneer from it with a handcrafted blade and soaks it in coconut oil for a year before slapping it on a IKEA pulp honeycomb. :)
Typographic documentation is for designers generally, but there is a world where this can actually help everyone. Designers should make consistent designs. By doing this Developers can create functional designs systems that have sane default behaviors. Once you can get to that point, the system serves to reduce the load from the dev, not increase.
I have created a tailwind-based design system interpretation like this in the education space at a rather large scale. Our designs and our tailwind-config comes from the same spec.
Doing this removes the engineer from thought by reducing options and possibilities. It also serves as check and balance. Paddings, font-weights, all of it are consistent. Designs that deviate from line-height, padding, weights, colors, etc are incorrect mocks and our configured values will make it obvious to the dev. Code that deviates from the spec is incorrect. This requires a good communication flow between Eng and UX but actually works in practice.
In a functioning system, it is a weight off your shoulders as you end up knowing the defaults just by looking at something.
Might I also remind you, the point of the entire backend of an app is to serve the front end. An app with amazing backend practices but fails at matching designs or specs is just a failure and is noticeable by customers.
Good points which I generally agree with, but I still think it's common to see a remarkable level of time and effort spent on typography compared to even other parts of the frontend. Not always, but surprisingly often.
Many companies have these style guides around typography. Beautiful, thoughtful, very well made things for sure, yet when some backend dev makes a typo so the custom font drops to arial or whatever, it can be days before someone notices and the ones who notice are the font nerds from marketing. Nobody else seems to mind much.
Compare that with what happens if someone misunderstands the 20 year old SQL schema and writes the wrong magic string to a table. Instant crash, everybody notices immediately. Yet database schemas for internal applications tend not to be documented in Porsche-brochure-like sites like this Sweden Sans is.
How did the typography guys get a voice so strong? Note that I don't mind it, I like to see well made things in general, but it's puzzling. It's like there is a secret society of typography nerds that have spread to all major organisations.
>Might I also remind you, the point of the entire backend of an app is to serve the front end. An app with amazing backend practices but fails at matching designs or specs is just a failure and is noticeable by customers.
Just checked my notes and it turns out that frontend is just a temporary fashion-dictated skin over the actually important features of the backend! ;-)
I agree with much of your comment, but take umbrage with:
> the point of the entire backend of an app is to serve the front end
It’s a phoney argument. Once can just as easily say “the whole point of a front end is to provide simple access to the backend, rather than doing it via APIs”.
The whole system is important.
Some backends have appalling frontends and are still popular. The opposite is also true.
Do you have any good recommendations for designing the design system? I’m currently in a position where our designs don’t always “fit” the spec that in theory exists. I’d like to get us on tailwind but widths and paddings and margins at times have weird divisions (I tried getting a rem to fit the px from the design and 1.24444…was close enough. It’s 1.25 and I won’t be bothered to fix it)
> Our designs and our tailwind-config comes from the same spec.
Is this the design system you created, or is this something others can use (or both)? As someone who's avoided frontend work primarily because I find CSS tedious, having a system over top of it that speaks design language sounds interesting.
Admittedly, looking at Tailwind now, looks like it's worth just trying that to start with.
It is generally different roles of people working on design guides like this versus working on documenting an API or other "basic functionality". It's not necessarily a zero sum effort (and probably often is entirely not) to produce design guides and work on other technical requirements at the same time.
Also, design, including and sometimes especially typography, is accessibility and is often worth that sort of attention to detail for exactly that reason, keeping designs accessible to all users. Defining contrasts and visual hierarchy hugely influences how accessible something using a design might be.
One specific example I see is the callout in this particular example for using much less UPPERCASE text moving forward from whatever their previous design language was. This is something I know that I've fought designers I've worked with over as an accessibility problem they've missed. (It's also something that Microsoft went through a huge accidental blow up in very public with early "Metro" designs that they had to apologize for and then walk back in consequent "Fluent" designs.) In general people read word shapes more than individual letters, uppercase forms a lot of very similar looking "rectangles" and even for readers with no other obvious dyslexia uppercase words are the visual equivalent of "speed bumps" in a roadway. They slow reading, sometimes to a crawl, and generally just get in the way, for all readers. (For dyslexic readers I've known they sometimes are even more "walls" than simply "speed bumps" and text entirely in uppercase will completely upset them, if not make the content 100% inaccessible to them and they will nope out entirely.)
That's an important thing about typography that is easy to miss. I've seen so many designs use all uppercase text in places simply because it "looks nice" (those "all words create about the same sort of rectangular shape" that makes a dyslexic viewpoint absolutely hate seeing all uppercase text add a regularity and "cleanliness" to design shapes that some designers find they love; one person's massive accessibility bug is another's aesthetic feature).
I think that's an overly cynical take for the work type designers do.
Design in general is highly detail oriented. In interior design, there are philosophies about the proper arrangement of furniture (feng shui). In visual design the balance of colors is crucial, and there are complex theories about the best ways to match and offset colors. This is highly technical work that might seem overly pedantic to outsiders, but really has an established theory about how it impacts the viewer.
So is the case with type design. There are infinite combinations of shapes and sizes of symbols, and an entire science behind how humans interpret characters to form words and communicate ideas. Think about how much design went into just this paragraph you're reading. A bad type can be tiring to read, while a good one can make the words flow off the page/screen. As readers, we take this for granted, but a type designer needs to take all this into consideration.
Consider the work it takes to design a logotype, and how it sometime seems deceptively simple, when in reality it takes a keen eye to design a brand logo. Now extrapolate that to all letters of all alphabets that a modern type should support, and it's no wonder that great type designers deserve all the praise and recognition.
So, yes, all these documents are necessary, and explain the intent of the designer, or how the user feels the type helps with transmitting their message.
It is actually amazing how much effort is seemingly expended on things like this.
I think it's pretty simple:
- there are a lot of people out there who love obsessing over software
- they want to obsess over software
- so they invent a purpose for obsessing over software
I love it, I'm here for it, and I think we should give people money for obsessing over software.
Just because it's simple on the surface does not mean that there's a lot that goes into it, or that the details don't matter. I feel like what you've written is a little reductionist to the hard work people put into designing frameworks for communications like this, and how much it can help to give voice and unify messaging in intra- and inter-institution communication. How do you keep two government agencies on the same page wrt to design language? or is it ok that one agency likes to produce communications in comic sans while the other uses sans and the third uses helvetica?
It might also be that people who obsess about typography are more inclined to create pretty documents whenever they can. API authors and DB designers are maybe less interested in making pretty documents, which is why their (at the very least equally important work) is often described in a readme.txt meant to be read from the terminal in the typeface of the reader's choice.
This type of guideline can be extremely helpful in a number of ways. People at various levels and with various levels of training tend to love to be creative at the expense of huge brand campaigns, so the branding design team has to find ways to reign in those passions. Technical access is generally much more limited for such people than is access to de facto brand representation through graphical presentation.
If it's a differential comparison vs. tech then that differential should be treated as its own issue, not an issue of design guidelines deserving a label like pedantry just because something else isn't as well-planned or documented.
Well, this is is not guidelines for an app or a website. This is guidelines for how the Ministry for Foreign Affairs, the Ministry of Enterprise and Innovation, the Ministry of Culture, the Swedish Institute, Business Sweden and Visit Sweden and the different agencies they use, should use typography when representing Sweden abroad.
I don't think the type section is unusually large, but I worked at a company for two years that exclusively made design manuals, and the well made ones tend to look like this.
>> I am fascinated by typography and page design and enjoy reading about it
You should check out the Netflix series:
Abstract: The Art of Design
Episode: Jonathan Hoefler: Typeface Design
The guy has some of the most important typefaces. The episode does an amazing job detailing his career and how they develop new typefaces. His work is literally everywhere and its super fascinating some of the misconceptions about type.
From the website running and dev side, I'd argue time spent on typography and page design guidelines have super high ROI.
First, it's basically one shot: once you have a type face and yhe guideline, only small tweaks are needed down the line. Changing it willy nilly has too much impact that it's just not an option either way. So you better spend time having it right.
Then it will be referred to in millions of places. Every single site made by the Swedish government will have to look at this guideline and decide where to use Sweden sans and when to use Noto. For their own project it wil be a small decision, but in aggregate the better the guideline is the lesser time needs to be spent bikeshedding on which font to use and if Times New Roman is acceptable.
The amount of documentation and attention to detail spent on code layout and API design (example: whether array sizes should be signed to unsigned integers, whether to use (start, length) or (start, end) to specify ranges) is often off the charts, too, and those are things the users will never see.
As in those cases, the investment in these kinds of guidelines should be worth it because less time gets spent on such discussions later and consistency of products is improved.
Yes, would be nice if they had a regular A, and that one as stylistic alternate. Removing the bit on the A to turn it into a regular one takes only a few clicks on Fontforge or another font-editing software, and the license allows modification and redistribution ;) [https://github.com/HelsinkiTypeStudio/Finlandica/blob/master...].
The tail on the lower case "a" is even worse imho. Really hurts readability because it barely looks like an "a" any more - more like an upside down "e".
The # & and @ are horrible. The A and the G are strange, two characters with a grace in a sans font. But i and j have that too. However I is designed to look different from l, which is not the case in many fonts.
It really doesn't matter how much attention you spend on typeface and design if the way you greet visitors is with an obnoxious "are you sure you don't want our tracking cookies?" where I have to click two tiny checkboxes, followed by a user-hostile trick bold "accept all" button next to the faded "accepted selected" option.
If you really wanted to improve UX, one of those things is more worthy of attention.
That is such a silly take. GDPR doesn't force you to keep using unsafe tracking methods on your not-even-commercial website. GDPR doesn't require you try and trick me with the two "accept" buttons.
Collect metrics in a lawful way and GDPR doesn't hurt your UX.
I think Public is pretty nice, honestly. It feels official while still looking friendly and modern. Sweden’s is cool, but I don’t see what it actually does better on a practical level.
sweden.se is fine; it's identity.sweden.se that's having some problems. This is a really limited site with a target audience that's normally in the hundreds, perhaps thousands, of developers. It's probably just running on a cheap server/VPS somewhere, which is fine almost all of the time.
Sorry, I know HN isn’t a support forum, but am I the only one who gets “Safari couldn’t establish a secure connection” to any of the archive.xx sites? It’s been happening for ages now.
I think this is just for some site focussed at promoting Sweden's image to foreigners? I don't think I've ever seen this font in use in normal communications from the Swedish state, living here in Sweden.
I like the Swedish Tax Agency's design language, if it can be called that. I don't think they use this Sweden Sans, but I'm not sure what they do use.
> I think this is just for some site focussed at promoting Sweden's image to foreigners?
It’s run by the Swedish Institute.
> The Swedish Institute is a public agency that builds interest and trust in Sweden around the world. We work with Sweden promotion, cooperation in the Baltic Sea region and global development. […] SI’s operations are financed mainly through appropriations directly through the state budget. SI has approximately 470 million Swedish government funds in four areas: international cooperation, international assistance, education and university research and business.[1]
It's definitely interesting how countries have their own PR these days.
And it's working, if you think of a nordic country, chances are, Sweden is the first one that comes to mind.
Is it? Norway has been topping all the livability charts for at least the past decade so that's the one I've always considered "the best in the world." Then probably the Netherlands, if you stretch the definition of Nordic.
Someone on Sweden was saying the Police have to catch you on the day to prove you are the driver, but I think I will stick to the German autobahns, less moose on the loose.
It's called Sweden Sans, but it appears to have serifs on at least some of the letters like lowercase i and l. Am I misunderstanding what a serif is? Or am I understanding what sans means in this context?
There's a lot of wiggle room. Sometimes a font designer will even throw in a single serif because hey--this is also an emotive art. Or maybe for a specific reason due to the project spec.
When I used to teach typography in the 2000s, sometimes students would point this out. Or as an example of a beginner's lesson, they'd use a font without really examining it, and some detail about the font would catch them out later.
It's weird but most people pick fonts without really thinking about the font itself, or even reading its name, let alone examining it. They are thinking about their design, their thoughts & feelings, their message, their amazing design opportunity, or whatever.
Skilled designers need to be trained to think about whether they're basically hallucinating the purpose of the font, as a few seconds of inspection will often make the original purpose really obvious. To people who learn how this works, it becomes just that obvious why those slab serifs might be in there.
It isn't a strict category like that. It is more like an indicator of the general font lineage the designer considers it to be in.
But plenty of sans fonts have a handful of serifs, particularly on the mistakable chars like l. And especially if they're expected to be used in technical contexts or as an "everything all the time" font like this one.
The regular and bold versions probably qualify as slab serifs, but the “book” weight is a true sans. (Might be easiest to see if you just download the font and look at the OTF files.)
Yeah, it looks like there are some slab serifs in there. I guess you could generously say that serif and sans-serif are handles on either end of what is really a spectrum. It may be simpler to call it a sans-serif, because if you called it a serif, people would expect it to be more serify.
Nobody's selling this font. Cynicism in regards to corporations is a good thing but this is cynicism to the point of disconnecting from the actual underlying facts.
Readit News
The amount of documentation and attention to detail spent on typefaces and when to use them is often off the charts compared to the time spent on stuff like keeping the website running, documenting the API or even the basic functionality of the app.
It's like if someone grows oak trees for a century and slices veneer from it with a handcrafted blade and soaks it in coconut oil for a year before slapping it on a IKEA pulp honeycomb. :)
I have created a tailwind-based design system interpretation like this in the education space at a rather large scale. Our designs and our tailwind-config comes from the same spec.
Doing this removes the engineer from thought by reducing options and possibilities. It also serves as check and balance. Paddings, font-weights, all of it are consistent. Designs that deviate from line-height, padding, weights, colors, etc are incorrect mocks and our configured values will make it obvious to the dev. Code that deviates from the spec is incorrect. This requires a good communication flow between Eng and UX but actually works in practice.
In a functioning system, it is a weight off your shoulders as you end up knowing the defaults just by looking at something.
Might I also remind you, the point of the entire backend of an app is to serve the front end. An app with amazing backend practices but fails at matching designs or specs is just a failure and is noticeable by customers.
Many companies have these style guides around typography. Beautiful, thoughtful, very well made things for sure, yet when some backend dev makes a typo so the custom font drops to arial or whatever, it can be days before someone notices and the ones who notice are the font nerds from marketing. Nobody else seems to mind much.
Compare that with what happens if someone misunderstands the 20 year old SQL schema and writes the wrong magic string to a table. Instant crash, everybody notices immediately. Yet database schemas for internal applications tend not to be documented in Porsche-brochure-like sites like this Sweden Sans is.
How did the typography guys get a voice so strong? Note that I don't mind it, I like to see well made things in general, but it's puzzling. It's like there is a secret society of typography nerds that have spread to all major organisations.
>Might I also remind you, the point of the entire backend of an app is to serve the front end. An app with amazing backend practices but fails at matching designs or specs is just a failure and is noticeable by customers.
Just checked my notes and it turns out that frontend is just a temporary fashion-dictated skin over the actually important features of the backend! ;-)
> the point of the entire backend of an app is to serve the front end
It’s a phoney argument. Once can just as easily say “the whole point of a front end is to provide simple access to the backend, rather than doing it via APIs”.
The whole system is important.
Some backends have appalling frontends and are still popular. The opposite is also true.
Is this the design system you created, or is this something others can use (or both)? As someone who's avoided frontend work primarily because I find CSS tedious, having a system over top of it that speaks design language sounds interesting.
Admittedly, looking at Tailwind now, looks like it's worth just trying that to start with.
Also, design, including and sometimes especially typography, is accessibility and is often worth that sort of attention to detail for exactly that reason, keeping designs accessible to all users. Defining contrasts and visual hierarchy hugely influences how accessible something using a design might be.
One specific example I see is the callout in this particular example for using much less UPPERCASE text moving forward from whatever their previous design language was. This is something I know that I've fought designers I've worked with over as an accessibility problem they've missed. (It's also something that Microsoft went through a huge accidental blow up in very public with early "Metro" designs that they had to apologize for and then walk back in consequent "Fluent" designs.) In general people read word shapes more than individual letters, uppercase forms a lot of very similar looking "rectangles" and even for readers with no other obvious dyslexia uppercase words are the visual equivalent of "speed bumps" in a roadway. They slow reading, sometimes to a crawl, and generally just get in the way, for all readers. (For dyslexic readers I've known they sometimes are even more "walls" than simply "speed bumps" and text entirely in uppercase will completely upset them, if not make the content 100% inaccessible to them and they will nope out entirely.)
That's an important thing about typography that is easy to miss. I've seen so many designs use all uppercase text in places simply because it "looks nice" (those "all words create about the same sort of rectangular shape" that makes a dyslexic viewpoint absolutely hate seeing all uppercase text add a regularity and "cleanliness" to design shapes that some designers find they love; one person's massive accessibility bug is another's aesthetic feature).
I think it's pretty simple:
- there are a lot of people out there who love obsessing over typography
- they want to obsess over typography
- so they invent a purpose for obsessing over typography
I love it, I'm here for it, and I think we should give people money for obsessing over typography.
Design in general is highly detail oriented. In interior design, there are philosophies about the proper arrangement of furniture (feng shui). In visual design the balance of colors is crucial, and there are complex theories about the best ways to match and offset colors. This is highly technical work that might seem overly pedantic to outsiders, but really has an established theory about how it impacts the viewer.
So is the case with type design. There are infinite combinations of shapes and sizes of symbols, and an entire science behind how humans interpret characters to form words and communicate ideas. Think about how much design went into just this paragraph you're reading. A bad type can be tiring to read, while a good one can make the words flow off the page/screen. As readers, we take this for granted, but a type designer needs to take all this into consideration.
Consider the work it takes to design a logotype, and how it sometime seems deceptively simple, when in reality it takes a keen eye to design a brand logo. Now extrapolate that to all letters of all alphabets that a modern type should support, and it's no wonder that great type designers deserve all the praise and recognition.
So, yes, all these documents are necessary, and explain the intent of the designer, or how the user feels the type helps with transmitting their message.
- there are not that many people out there who love obsessing about typography
- the few that do have figured out that they can make a viable business of selling typefaces for slightly less than the cost of licencing helvetica
- writing a document like the one linked here makes people feel a bit better about cutting a big cheque for a typeface
I think it's pretty simple:
- there are a lot of people out there who love obsessing over software
- they want to obsess over software
- so they invent a purpose for obsessing over software
I love it, I'm here for it, and I think we should give people money for obsessing over software.
Just because it's simple on the surface does not mean that there's a lot that goes into it, or that the details don't matter. I feel like what you've written is a little reductionist to the hard work people put into designing frameworks for communications like this, and how much it can help to give voice and unify messaging in intra- and inter-institution communication. How do you keep two government agencies on the same page wrt to design language? or is it ok that one agency likes to produce communications in comic sans while the other uses sans and the third uses helvetica?
It's one of those 99% invisible things.
It might also be that people who obsess about typography are more inclined to create pretty documents whenever they can. API authors and DB designers are maybe less interested in making pretty documents, which is why their (at the very least equally important work) is often described in a readme.txt meant to be read from the terminal in the typeface of the reader's choice.
If it's a differential comparison vs. tech then that differential should be treated as its own issue, not an issue of design guidelines deserving a label like pedantry just because something else isn't as well-planned or documented.
I don't think the type section is unusually large, but I worked at a company for two years that exclusively made design manuals, and the well made ones tend to look like this.
You should check out the Netflix series:
Abstract: The Art of Design Episode: Jonathan Hoefler: Typeface Design
The guy has some of the most important typefaces. The episode does an amazing job detailing his career and how they develop new typefaces. His work is literally everywhere and its super fascinating some of the misconceptions about type.
1. https://frerejones.com
2. https://nymag.com/news/features/jonathan-hoefler-tobias-frer...
First, it's basically one shot: once you have a type face and yhe guideline, only small tweaks are needed down the line. Changing it willy nilly has too much impact that it's just not an option either way. So you better spend time having it right.
Then it will be referred to in millions of places. Every single site made by the Swedish government will have to look at this guideline and decide where to use Sweden sans and when to use Noto. For their own project it wil be a small decision, but in aggregate the better the guideline is the lesser time needs to be spent bikeshedding on which font to use and if Times New Roman is acceptable.
As in those cases, the investment in these kinds of guidelines should be worth it because less time gets spent on such discussions later and consistency of products is improved.
If you really wanted to improve UX, one of those things is more worthy of attention.
Collect metrics in a lawful way and GDPR doesn't hurt your UX.
I think we hugged it to death.
Deleted Comment
I like the Swedish Tax Agency's design language, if it can be called that. I don't think they use this Sweden Sans, but I'm not sure what they do use.
It’s run by the Swedish Institute.
> The Swedish Institute is a public agency that builds interest and trust in Sweden around the world. We work with Sweden promotion, cooperation in the Baltic Sea region and global development. […] SI’s operations are financed mainly through appropriations directly through the state budget. SI has approximately 470 million Swedish government funds in four areas: international cooperation, international assistance, education and university research and business.[1]
[1] https://si.se/en/about-si/our-mission/
Is it? Norway has been topping all the livability charts for at least the past decade so that's the one I've always considered "the best in the world." Then probably the Netherlands, if you stretch the definition of Nordic.
I did think that myself, certainly a bit of space and countryside to enjoy and getting around Sweden doesnt take long if you have a motorbike...
https://www.youtube.com/watch?v=qXiIJ32kaZU
Someone on Sweden was saying the Police have to catch you on the day to prove you are the driver, but I think I will stick to the German autobahns, less moose on the loose.
ghost rider patrik fürstenhoff
When I used to teach typography in the 2000s, sometimes students would point this out. Or as an example of a beginner's lesson, they'd use a font without really examining it, and some detail about the font would catch them out later.
It's weird but most people pick fonts without really thinking about the font itself, or even reading its name, let alone examining it. They are thinking about their design, their thoughts & feelings, their message, their amazing design opportunity, or whatever.
Skilled designers need to be trained to think about whether they're basically hallucinating the purpose of the font, as a few seconds of inspection will often make the original purpose really obvious. To people who learn how this works, it becomes just that obvious why those slab serifs might be in there.
But plenty of sans fonts have a handful of serifs, particularly on the mistakable chars like l. And especially if they're expected to be used in technical contexts or as an "everything all the time" font like this one.