Hacker News new | past | comments | ask | show | jobs | submit login
Is there such a thing as a web-safe font? (highperformancewebfonts.com)
35 points by mariuz 34 days ago | hide | past | favorite | 62 comments



I've been writing "font-family: sans-serif" when I wanted user preferred font without serifs and "monospace" for user preferred monospace font. Is that not the correct way?


Depends heavily on what you mean with ”user preferred”. Approximately 0% of users will have made an active choice on what sans-serif typeface they prefer.


I tried to change browser defaults before, but that made some sites look strange because developer’s assumptions about defaults were merged with the design.

Today when I want to change the font, I just add a per-site StyleBot rule.


Indeed you are doing it correctly


Yes, those are web-safe fonts.


The web is backwards. Designers and web site operators spend ridiculous amounts of engineering trying to control what users see, with the limitation that they have no control (other than exclusion) over what software the users chooses to view the content.

HTML went way too far IMO, trying not only to represent the structure of information, but ALSO trying to solve the layout problem.

It will never happen, but I long for a web where layout and content are disassociated. Where content is structured, requested by clients, delivered by servers, and then the client chooses the layout. Blind? Terminal only? Compute limited? No problem, use an agent that works for you.

But big content wants CONTROL. They want to control what you see, how you see it, and what the preconditions are. They also want the web to be an application platform (that they can control, of course, and not have to deal with Apple or Google or Microsoft) that is free to them and supports all their controls.

<rant/>


Seems it shouldn't be impossible for a new type of browser to restructure and present content in a matter that suits the user if the markup is semantic.

A lynx for the modern age?


There is the system font that you can use:

font-family: 'system-ui', sans-serif;

System fonts and font rendering are now so good for readability, that you don't need anything else. I use it on one website where I don't care about pixel-perfect. In cases where the customer/owner wants a pixel-perfect layout, this will not work.


https://modernfontstacks.com/ is a great resource for more detail on this and useful suggestions for font stacks that have a similar style across platforms.


There really should be a set of a few hundred fonts standardized by the w3c or whatwg that should come with every browser (and OS) install.

This would be like how early versions of PostScript came with about 30 standard fonts available to all PostScript printers.


I lean in the opposite direction, just remove the ability to specify the font type on webpages and let the browser use whatever is the system defaults.


This is the right answer. I've never understood why "designers" feel the need to decide what font looks good to other people. You can specify font size and that should be enough.


You can still build web pages like it's 1999. Nothing is stopping you. You can add menu bars like you're imitating Word 6, for all I care. But people will stop visiting your site. The eye likes candy. That's why.


The problem is that others are building 2025 web pages.

I recently had to pay for parking online (already an annoyance) because the kiosk was broken. That one transaction used like 3% of my data for the month. Why does it take dozens of megabytes to ask for a credit card number, license plate number, and lot id? Please just send me a single 500 byte form with some inputs. I'm not on your site to be entertained. It doesn't need to be a SPA. It needs an "enter your info" page and a "thank you" page.


I agree it's often overdone, but the people have spoken: they want a pretty looking form, and they want it now. Unfortunately, many web devs are absolutely illiterate when it comes to topics such as efficiency, performance, maths, correctness, etc., but the demand for flashy web pages is too great.

Be glad your parking garage didn't have its own app.


I make interfaces sometimes and don’t like using “frameworks”. But if I don’t use one, all sorts of issues start to emerge. V-scrolls in single line inputs, my hbox/vboxes start fighting over margins when nested, labels don’t baseline align with input texts and look real ugly, scrollbars suddenly pop up into existence because something is 1px larger than expected.

Of course the next thing I “should” do is to “learn css”, which is a steaming pile of crap that makes no sense and is barely generalizable even with a few megabytes of any reasonable “framework”, which usually still uses non-css-compiled-to-css sources and multiple auxiliary tools to add polyfills and browser specifics. No desktop framework I worked with required so much tuning and fixing and adjusting just to look normal-ish.

So no. “You wanted 500 bytes? Too bad, here bootstrap.css.”

Those responsible for it should fix this effing pile of shit that they call “browser layout and boxing model” then I’ll think about the few-kilobytes range.


It's a payment form for a parking lot, not an art piece. It needs 2 text inputs. The default will just work. Think of all the forms that you've filled out by hand that someone typed up in Word using inconsistent spacing and a random number of underscores. Did you ever care? Of course not. Default HTML styles are literally a step up from that. The thing it's standing in for is a garbage LCD with 2s latency and a crappy keypad where it can only fit "License Plt #" as a prompt. And that's the better experience than the actual web one (which also required me to go fiddle with allowing scripts).


I just checked my login page: bootstrap.min.css is a bit over 20kB (compressed).


I'm guilty of that.

Last week I shipped a few updates to one of my sites and completely ignored @ndriscoll's UI/UX guidelines. Can you believe it?

Now, let's say I entertain your idea for 0.001 microseconds, we are going to backtrack on the largest human collaborative platform ever created and severely cripple it, forcing everybody to comply with your demands or else they're out of "the web".

Do you even have them written in some document we can easily read/share? Or is going through your entire history of HN comments to figure out your arbitrary preferences expected as well?


>> Now, let's say I entertain your idea for 0.001 microseconds, we are going to backtrack on the largest human collaborative platform ever created and severely cripple it, forcing everybody to comply with your demands or else they're out of "the web".

The problem is that the web designers are the ones "forcing everybody to comply" with their FONT choice and downloading all that font data. Keep the self-centered trait applied to the correct party please ;-)


Wait, how come the party that owns the website should not be the one who decides the content in it?


Sure, https://developer.mozilla.org/en-US/docs/Web/HTML/Element has a list of off the shelf elements and what they're for. If you're building a form, you can find the relevant bits under "Forms". In this case, they needed 2 pieces of short text, so they would use 2 text inputs, 2 labels, and a submit button. The lotid could've been in the URL so they could display the name on the page and the user wouldn't need to enter it if they used a QR code to navigate to the page.

If they're feeling particularly adventurous, they could spend another hundred bytes on the Luhn algorithm in javascript to validate one of the two inputs. Or they could do it only on the server. It doesn't make much difference.


designers entire profession is around figuring out what looks good to the most people, not just fonts; your comment is so ignorant and dismissive of an entire profession that it's startling.

you are hereby cursed to use papyrus to code and you will be forced to drive an AMC Gremlin until you appreciate the value of visual design


> your comment is so ignorant and dismissive of an entire profession that it's startling

It's unfortunately not at all startling, not on Hackernews. People here have the worst case of being good at one thing (usually software/systems/databases or similar) and assuming this means that they know more about everything else than everyone else, that I've ever seen in an online community.

I think it's called Neil Degrasse Tyson syndrome.


I've seen what designers make and I'm mostly not impressed.


This is not the right answer because people have different preferences, both physiological and aesthetic and contextual.

The right answer is for browsers to provide knobs for a user that would control relative brightness, contrast, saturation, boldness, fluffiness, comicness, sharpness, height, width, line spacing, and so on. Per browser and then per-site adjustments. A simple sidebar or a drawer.


because the customers have been trained to think that websites are about design. Its something the people paying for the site can understand. It leads to lots of bike shedding too.


It’s because designer know what you like better than you know yourself. They get paid to know you.

Never let the user design their own interfaces. Users have absolutely no idea what they’re doing.


While we're at it, can we take color away too? Dark mode should be a browser feature, not a site feature. If I want green mode for work tabs and blue mode for personal ones, and red for one's my peers find dubious... That should be between me and the browser without the site author's involvement.


You can actually take this away in Firefox! Go to your color settings and set the drop-down to always use your specified palette. Not sure if there's a way to do it based on container tabs. I don't really use containers. Unfortunately missing color variety reveals that many sites have garbage layouts and missing labels on things and do stuff like use div where they meant button, so things can be difficult to use at times. This site remains completely usable.


In a perfect world, that would be glorious.

In the real world, designers will just plaster all webpages with images to replicate the fonts they aren't allowed to use. SVG sprites, anyone? :(


Perhaps soon we'll just render the page in a headless VM and have an AI extract the important parts, styled according to to user's wishes--a sort of condom for the web--svg-text being the least evil of the things we're filtering.


[flagged]


Please don't cross into personal attack. It's not what this site is for, and destroys what it is for.

https://news.ycombinator.com/newsguidelines.html


What difference does it make what font a website uses? I get having a monotype, a serif and possibly a sans-serif, obviously setting the font size should be a thing, but the actual font?

I just don't see what difference it makes if a website is in Helvetica, Times New Roman or Arial. If one font is easier for me to read than another I can chance it in my browser, which makes more sense than letting some web designer, who's more focused on brand identity, pick a font for me.

There might be some cases where you really wish you could pick a specific font, but you can't really use it to convey meaning anyway, because that would not work for screen readers or people who chance the font on their system to help readability.


>Why are there many clothing brands instead of just one that makes the same thing all the time?

>Why are people allowed to choose different things? Why don't they just let me choose what's good for everybody?


Why would a website need a different font from the system font? I can get that there's "better" fonts (or at least worse ones) with different kerning or whatever, but surely people want a good font for everything? So the system is the right place to fix it.

Firefox lets you disable the ability for web pages to override the system font, and I did that a while back. Throw web fonts in the bad idea pile with blink and marquee.


It’s usually because the system font is ugly, causing your fashion website to lose sales because it doesn’t match the style you’re selling.

The style IS the message.


Why would a user agent build functionality for more effective advertising?


So you have more effective advertising?

Oh, you thought people were gonna make websites for free?


Yes? A massive amount of material on the web (including basically everything worthwhile) is given and frequently even made for free. In any case, that has nothing to do with the user agent. Why would browsers (the agent of the user) implement functionality to make more effective advertisements?


For the same reason that an OS like Windows puts ads in their Start Menu, presumably.

Because their audiences are either captive, uneducated, uncaring or a mix of those and therefore will accept whatever defaults you throw at them. If those defaults help you as the org to make more money, then it’s a no brainer.


The free stuff is junk. Anything worthwhile you will need to pay for.

People don’t want to work for free, regardless of how little you value their time.

As always, you get what you pay for.


Unless you’re in fashion, you likely won’t.

In fashion (and a lot of other fields), the style IS the message.


It's a nice thought, but internationalisation would make that difficult. On my system, the Noto international font weighs about 170 MiB compressed (gzip-compressed TTF, sans and serif styles, all weights, including symbols and colour emoji).

Even just focusing on Latin scripts, a few hundred fonts would roughly double the compressed download size for browsers and Electron apps.

It might be possible to come up with a better compression scheme which exploits redundancy between different typefaces, but as far as I know, that tech doesn't exist yet.


Here in the grim darkness of the future, every install of a general-purpose OS better be shipping with at least one font (or collection of fonts that operate via glyph fallback) to cover every Unicode codepoint for every language that isn't extinct yet. (In other words, apps that expect to be used with any arbitrary language, including browsers, should not be forced to ship with a font just to ensure basic coverage).

And then, once you have that system-provided codepoint coverage, you can make your font parametric in order to avoid needing to ship multiple copies of the font for different styles. It's not a perfect solution, but it's still pretty acceptable given the constraints.


To provide fonts for N different scripts would multiply the file size by roughly N, and there are a lot of scripts in common use:

https://en.wikipedia.org/wiki/List_of_writing_systems#/media...

Variable fonts would help, but I don't think it would be enough, especially if the goal is to provide a wide selection of fonts.


> There really should be a set of a few hundred fonts standardized by the w3c or whatwg that should come with every browser (and OS) install.

It's surprising that this is never the actual discussion we have, but it's always a discussion of web safe fonts vs custom fonts.

Then again, while browsers and OSes are already pretty big size wise, fonts wouldn't exactly make that better. On the other hand, they already include a whole bunch of fonts, so having some authority delegate what should be available everywhere wouldn't be inconceivable.


> There really should be a set of a few hundred fonts standardized by the w3c or whatwg that should come with every browser (and OS) install.

One attempt by Microsoft:

* https://en.wikipedia.org/wiki/Core_fonts_for_the_Web


Kind of ironic that the heading font takes enough time to load that there is a flash and the layout shifts around.

I have long decided to skip web fonts altogether and go with a) Georgia and b) a fallback font stack that suggests a couple of similar alternatives that are common across operating systems and falls back to standard defaults.


serif, sans-serif, monospace

There, you have it, and it's perfect.


The whole point of a font stack is to give a prioritised selection between beautiful modern fonts that won't be available on every machine and basic standard defaults like 'sans-serif' that will.


I think the W3C or somebody else should make Arial and Times New Roman standard and open source.


Doesn't Microsoft hold all rights to Arial because they didn't want to license Helvetica? I don't think W3C has much say in that.


We could make say Helvetica Libre and Times Free Roman


They already exist, but of course aren’t exactly the same https://en.wikipedia.org/wiki/GNU_FreeFont


Liberation/Croscore fonts are more relevant here because they are designed to be drop-in replacements (metrically compatible) for MS fonts.

https://en.wikipedia.org/wiki/Liberation_fonts

https://en.wikipedia.org/wiki/Croscore_fonts


That’s actually what I was looking for, but I forgot the name and was on mobile—thanks!


The gpl makes those completely useless for such a purpose.


It uses a variant of the GPL. You can include it in any usage as a font, just modifications of the actual font are normal GPL.


Yes. It's comic sans :)


Yes, verdana


We do not say the 'v' word, here.




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: