Please remove Helvetica Neue as default font from Bootstrap #13823
Comments
|
I also agree adopting a new font as the default base would be a nice change. |
|
Helvetica Neue is only used on Windows machines if it is indeed installed. Most folks who have problems have bad copies of the fonts from my experience. We won't be changing it. |
|
I'm sorry but that is a cop-out answer. I invite you to go through the The question is why the default font is a licensed non-web font which I don't see your pro-reason of keeping it, other than "works on Mac" while Even Twitter have adjusted and fixed those issues, why cannot Twitter sent from note 3
|
|
Additionally "Helvetica Neue" defaults on Win systems to the font with the Valid fonts from a similar family ruin it already, while HN itself is not sent from note 3
|
Sounds like that's not correct? |
|
Okay, so, lots to address here. Windows without Helvetica (Neue)First and foremost, Windows will not fuck up the rendering of text simply because an uninstalled Helvetica Neue or Helvetica is in the font stack. Here are two screenshots of Safari compared to IE8 and IE9:
While on Safari and OS X you see three different fonts—Helvetica Neue, Helvetica, Arial, Helvetica—on Windows, you see a single font—Arial. Windows with Helvetica (Neue)I'm working on installing both these fonts again and testing, so hold tight on that. However, in my testing prior to this issue, I've not seen the egregious issues others have run into. Twitter and Helvetica (Neue)As you mentioned, Twitter serves Helvetica Neue to Mac users and Arial to Windows users—they didn't simply drop it from their stack entirely or rearrange it (as is being suggested here). I know this because I was one of the two people who made that change when I worked there :). It's not about consistency across OSes—that's entirely impossible and not something we go out of our way to hold ourselves to. We won't be adding browser detection to Bootstrap either. That's not something we want to get in the way of—whatever languages or dev setup you have is your call. Use of licensed fonts because of one OS
I view the use of Helvetica Neue as a progressive enhancement over Helvetica and Arial. If you've got it, you should rock it. The kerning, weighting, and many of the characters are (subjectively) improved over the default Helvetica. It's a wider font and I think it helps out a lot for readability and general looks. Given that a Windows machine without Helvetica (Neue) renders Arial just fine, there's no downside to enabling it for a smaller (and growing) subset of devices. How font stacks workBasically a font stack states a primary fonts, followed by several alternatives. As mentioned in the MDN.
So, to @cvrebert's earlier question—fonts not installed on a machine will not be used. The best match in the stack will be used, or a system default fallback. Preference and aestheticsI've mentioned it already here—I prefer Helvetica Neue. Plenty of font folks do as well given the wider and more balanced stance of the characters. It also renders better across many sizes, though it's still not the best.
Again, I see Helvetica Neue as a progressive enhancement. There is simply no way to make a site look 100% the same across every browser and device. It just doesn't happen. We can get super close, but never 100% parity. Bottom line?So far there isn't enough here for me to override what's been in play on millions of websites for nearly three years. Have there been problems here and there? Yes, but they're a drop in the bucket for folks using Bootstrap-powered sites without (a font) issue. |
|
Really debating leaving this open because nothing new has really been presented here and I've gone down this route so many times before. If something new and concrete can be shared, I'm always happy to re-investigate. Until then, I'm pretty sure nothing will change here. |
|
I'd like to support @mdo I'm replying here to keep the discussion in one place, even though @mastef opened an issue on Docker (Documentation layout) @mastef wrote:
In this case you'll need to understand you are asking the world to change for you, whilst you belong to a (very) small minority. The Helvetica Neue typeface is normally not at all available on Windows machines, and does not get installed when you install the Adobe Creative Suite. This means that in order to trigger the rendering issues you are describing you will need to (self) license and install the font. --This makes the scenario rare, and is probably also the reason Chrome has not fixed it (yet). Our (Docker) alternatives would be to either:
IMHO: for those people who need the licensed and installed Helvetica (Neue) font on windows, using one of the suggested fixes for chrome (changing the font sources for example) is not such a bad solution. |
|
Yeah, chiming in on the Windows 8 auto-install aspect: Helvetica Neue doesn't ship with Win8 per http://www.microsoft.com/typography/fonts/product.aspx?PID=164. |
|
Twitter body classes on Windows Body tag on Twitter http://s.stefanxo.com/EmF.png Which, before Gotham was in place ( and still ) declares font-family as Arial, sans-serif http://s.stefanxo.com/qCS.png and overrides Helvetica Neue, Helvetica, Arial, sans-serif http://s.stefanxo.com/IDy.png Note: Nowadays there are further classes with Gotham added, but the screenshoted classes are still in place. Font comparison I think that h1 font comparison is not fair, as Helvetica Neue is made for big bold text. My h1 styles with HN show great http://s.stefanxo.com/Fbb.png but see a paragraph text comparison instead http://s.stefanxo.com/N14.png |
|
I'd like to offer a compromise: |
|
How font stacks work & Windows 8 behaviour I don't think how font stacks work is in question, rather the behaviour when 'Helvetica Neue' is not found, and a close font from the family ( e.g. http://s.stefanxo.com/RGu.png ) is installed. As Helvetica Neue is heavily used in print, all your Bootstrap websites might fall back to the Bold or Condensed versions. Windows 7/8 itself locks this font, or any of its siblings if it is installed, as it attempts to use it itself in the Detail Pane, etc. Even if you miraculously get it removed with an Unlocker, it's back after a restart. Now I am not 100% sure if it comes pre-installed - the linked document states it is not - I simply remember that it was impossible to remove the whole Helvetica family from Windows, as it would always lock random ones due to using them itself. There's a solution nowadays, but boy oh boy, I remember it took a lot of file-system operations before even remotely getting there. http://answers.microsoft.com/en-us/windows/forum/windows_8-files/how-do-you-delete-font-that-says-it-is-in-use-even/3399f27c-fc87-4878-8f10-2ad78b36b880 And even if you have the proper width/version installed, this is the difference of Helvetica Neue Regular vs Arial on Windows/Chrome http://s.stefanxo.com/TEl.png and on Internet Explorer http://s.stefanxo.com/OS2.png |
|
@dhrp Clearly I'm doing the Don Quixote here, but not without reason ( one of many http://s.stefanxo.com/0y7.png ). It has been boiling up during the past 2 years, and I decided to take action with the issue you have linked. I'm not willing to simply accept this broken process that is so riddled with issues, nor the notion of "works for me, don't care about anyone who it doesn't work for" or "adjust every browser you use" - especially since it IS fixable. And neither the notion of that this is just a 'small group of people' - which is heavily comprised of web developers, web designers and ( but not limited to ) people who work with design tools on Windows. "What is this Helvetica Neue font they are declaring everywhere? Oh let me try and add it, it must be good" - were the last words of the developer/designer trying to test it on Windows. |
|
@mdo My suggestion is for no other reason than to make distinct v4 of Bootstrap from the previous versions. Since a big chunk of websites now runs on BS :-) many things are starting to quite look the same. Have you thought of providing 2-3 choices in the customizer, so devs can have a base with different configuration?.. Just a thing to consider, that is. |
|
@Merg1255 That's an entirely different discussion, I'd suggest moving that to a separate issue. |
You say that, but then you mention some fallback for a font :). Why would regular Helvetica Neue ever fall back to a bold or condensed version? That's not at all how web fonts and the font stack works. It goes left to right, and if nothing is found installed or via at-rule, it goes with the system default. That's it.
Why would you ever have to remove something that's not installed by default? Devil's advocate and a shitty argument, but for 99% of users, I'd wager it isn't a problem.
And anyone who goes to download this from the Internet will inevitably torrent it or otherwise illegally obtain it. If you use the Mac-PC converted font files, you'll end up with a font that looks like this (Neue on top, Arial in the rest):
That's an improperly converted font. Obviously it doesn't look good in the slightest because it's not the real font. The one downloaded from Linotype—or illegally obtained, if you're into that—will not even register for folks given the default Bootstrap font stack because the file and font names are different. Put another way, people are asking for these problems themselves. Moreover, viewing http://www.myfonts.com/fonts/linotype/neue-helvetica/webfont_preview.html in IE8 on Windows 7 shows no problems. However, that's with a web font—what about the desktop version? Turns out it's completely fine as well, assuming you have the proper font file:
Note that the top heading and paragraph is just slightly different than the bottom three. A good indication that Helvetica Neue is present over Arial is the wider So, once more I say: if you're having absurd problems with Helvetica Neue, chances are you did it to yourself. |
|
@darrenmoore Please reconsider leaving a +1 comment in a lengthy thread with plenty of varied opinions. It doesn't help anything and is rather unclear what you actually support. |
|
I'll leave this thread unlocked for the time being in case I've overlooked something super egregious. Unless something irrefutable can be presented to counter what I have spent a couple hours researching, I'm more certain than ever that nothing will change here. |
|
@mdo I know, just didn't want to discourage discussion :) |
|
"You say that, but then you mention some fallback for a font :). Why would regular Helvetica Neue ever fall back to a bold or condensed version? That's not at all how web fonts and the font stack works. It goes left to right, and if nothing is found installed or via at-rule, it goes with the system default. That's it." That's a very good question, why does it do that? If you have "Helvetica Neue Bold" installed, the font-family: "Helvetica Neue" will default on Windows by rendering all text with the "Helvetica Neue Bold" font. If you have "Helvetica Neue Condensed Light" installed, it will be displayed with that font. Feel free to test it out. |
|
"Why would you ever have to remove something that's not installed by default? Devil's advocate and a shitty argument, but for 99% of users, I'd wager it isn't a problem." Because, as noted above, another font of the family was on the system and was skewing all websites that have "Helvetica Neue" as default font. So you try to get rid of it. Why does somebody who works in web development or web design have to justify why they installed a font in first place? Especially when you work on websites you want to test that fonts display correctly. I would rather challenge why somebody does not have a HN font installed when creating websites that have it set as default. Specifically this is also not about "Helvetica Neue", but HN family fonts. I also challenge your 99% as the "shitty" argument, as that's a made up statistic. |
|
Guys—what about my suggestion? If abandoning Helvetica Neue is not an option for Mark and practicing UA-sniffing will not happen in the Bootstrap core, what about simply pointing out to users that this can be an issue and leave it to them to decide if they want to go the route of UA-sniffing or simply use a different font. |
|
@hnrch02 Sorry, meant to mention that earlier—yeah, makes total sense. Open a separate issue for that? |
|
"And anyone who goes to download this from the Internet will inevitably torrent it or otherwise illegally obtain it. (...) So, once more I say: if you're having absurd problems with Helvetica Neue, chances are you did it to yourself." It's an unfounded assumption though, and it strongly contradicts with the points I was making earlier. If you have the legally obtained Helvetica Neue family fonts, like Helvetica Neue Bold, those fonts made for print will render in your browser for small text - rendering it unreadable. As pointed out above, Twitter and other big companies have adopted to those issues and adjusted their stylesheets so Helvetica Neue would not be the default font for Windows users. Again, this is a non-free licensed font that is not easily obtainable or installable and comes with a lot of issues for non-Mac users, as you have pointed it out yourself. It would be even great to simply prepend it in the stack with "Neue Haas Grotesk", as this would allow for cross-browser display of another licensed font actually made for web display ( if present ) across the systems, without all the ballast that comes with HN families and cross-OS version incompatibilities. Please don't misunderstand my motives : HN looks great! But the issues it comes with are simply too many for people who work in our field and don't use Macs, in my view, to make it acceptable as out-of-the-box solution. Which is a sad state affairs and requires a proper solution. |
I have the full stack installed and have zero issues.
I'm looking beyond folks like you and me—the five million or more folks using Bootstrap-powered sites without issue doesn't really highlight a huge problem for me here.
Hah, well yeah, I said I'd wager it's 99% not a problem, and I stand by the general assessment. It's not hard fact, it's intuition and conclusion after looking at this problem on and off for the last six years. Digging back into your original post, I see zero evidence of any specific situation in which the Helvetica Neue font family shits the bed with Windows. Breaking it down, here's what your links address:
Beyond those, there are a few more around nuking Helvetica (Neue) via custom CSS and more, but again, nothing helpful. I point this out not to be a jackass, but because none of these links help us in any possible way. No one has created a reduced test case that repeatedly demonstrates this problem. (That goes for me as well, I suppose, but I've gone farther than most of these links.) Those links are also all over the place and show no common trend other than some people have had problems downloading something off the internet and shit going awry. I'm not trying to trivialize it—that's just exactly what is happening. This goes beyond web developers. Millions of people use Bootstrap-powered websites without font rendering issues. Those who experience problems with Helvetica Neue—any of it's weights—or the intersection of Font X and Font Y are greatly outnumbered by those who have zero problems. I'm going to lock this thread again now as it's clearly not going to go anywhere. Should you or anyone else reliably reproduce a specific problem we can address other than simply dropping the fonts because folks installed something, we can revisit. |
Twitter bootstrap is the most popular front-end framework for developing responsive, mobile first projects on the web. But it uses Helvetica Neue as the default font, which is neither a web font, nor free ( http://graphicdesign.stackexchange.com/questions/29619/commercial-use-of-helvetica-neue-for-web ), nor easily install-able ( or even easily removable ), and simply displays horribly in many many circumstances; doesn't distinguish many times between font-weights, doesn't kern well, and is not easily fixable by even experienced users unless hardcoded and replaced with another font.
Due to this design decision and the popularity of Twitter Bootstrap a lot of websites on the web have adapted in using "Helvetica Neue" as the primary font, with fallbacks to Helvetica, Arial and sans-serif.
If a version of Helvetica Neue is installed on a non-Mac OS, like e.g. in recent Windows versions; then Helvetica Neue is rendered with a non-web Bold version. Rendering professional websites really ugly. It's not possible to get rid of this font in those versions.
It's not possible to 'fix' this, by overwriting this font; and it's not possible to patch it, as this font is not easily downloadable, and has literally hundreds of different versions which all display horribly; and if it's not found, it will default back to the closest font in the family - try them yourself on your website : http://desktoppub.about.com/od/classicfonts/f/How-Many-Helvetica-Names-and-Versions.htm
Is this issue limited to Twitter Bootstrap? No, this is a font issue. But Twitter Bootstrap sets the web standards with style choices, and the decision that was made early on was to use a non web-safe font as the default font. I personally would expect the default fonts to be chosen so they display safely across the OSes, which most do - except Helvetica Neue.
There are even plugins created to automatically alter pages and replace Helvetica Neue with web-safe fonts, that's how bad the situation has become. Even Twitter adds a 'ms-windows' class nowadays to its body, to override Helvetica Neue with Arial ( and later on changed to Gotham as we know ). We are getting back to 'browser detection' ages.
I would understand if this was a specific website with some corporate design guidelines that would cost millions to change; but it isn't so. And it breaks the functionality that Twitter Bootstrap is promising - beautiful front-end sites across the board, and not only on Macs.
Please help in stopping this from spreading, use web-safe fonts as default, instead of licensed OS specific fonts that have a tremendous history of displaying wrongly.
One of the worst parts in this is that most people are dumbfounded when confronted with this. Most designers and developers who primarily work on Macs are simply not aware of this, and took it as a quasi-standard. After speaking with a few bigger startups, I got them to at least change their websites and remove it from their list.
And don't misunderstand me please : Helvetica Neue is great; it's a beatiful font. On T-shirts, in banners, on posters, on Macs. But not in web paragraph text for the many non-Mac users; even though your version might look nice right now, the Mac version has great improvements. But shouldn't all of the bootstrap pages look beautiful by default, no matter the system and which fonts are installed?
https://offroadcode.com/blog/1468/why-you-shouldnt-use-helvetica-in-your-css/
http://meta.stackexchange.com/questions/141362/whats-wrong-with-the-character-encoding-in-the-blog
#705
#3629
#5297
#7672
#10681
#10574
http://superuser.com/questions/719907/why-isnt-helvetica-neue-rendering-properly
http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/
http://forums.whirlpool.net.au/archive/2242160
http://www.hanselman.com/blog/InstallingHelveticaNeueFontsWithGoogleChromeOnWindowsConsideredHarmful.aspx
https://groups.google.com/forum/#!msg/joomlabugsquad/Ja2BvatSaNk/2iY6yuRelC8J
https://productforums.google.com/forum/#!topic/chrome/l5mK6fbPtKY
https://forums.adobe.com/thread/954620
https://forums.adobe.com/thread/1191932
http://blog.webink.com/why-fonts-suck-windows-hinting/
http://www.fastcodesign.com/3031432/why-apples-new-font-wont-work-on-your-desktop
https://productforums.google.com/forum/#!topic/chrome/VKmbhbQTVFA
http://www.reddit.com/r/chrome/comments/20p44j/help_installed_helvetica_neue_chrome_wont_stop/
http://forums.digitalspy.co.uk/showthread.php?p=69623757
People hardcoding Arial in their browsers to replace Helvetica Neue
http://biohazardev.wordpress.com/2012/08/10/helvetica-helvetica-neue-fix-for-windows-for-chrome/
http://smuggbugg.com/fix-helvetica-neue-font-issue-chrome/
https://productforums.google.com/forum/#!topic/chrome/J4dqHZD3dcs%5B51-75-false%5D
http://help.twitch.tv/customer/portal/questions/1403608-bunch-of-gibberish-for-font-on-chrome
People installing specific extensions just to solve this
https://userstyles.org/styles/37774/kill-helvetica
https://chrome.google.com/webstore/detail/change-font-family-style/aabledekpjmoghdjnpnhfkfpmjifklpb
And then people actually offering illegal fixes
http://www.reddit.com/r/chrome/comments/1n8hbu/i_dream_the_day_chrome_will_finally_render_fonts/ccgkbly
https://support.mozilla.org/en-US/questions/988353
FontSquirrel actually has Helvetica Neue on their ban list to prevent this.
And those are just a few of the people who managed to do their research and actually come forward. Now let's think about the people who have no clue what's going on, and for whom the websites are simply ugly and unreadable.
It would be great if this could initiate some thoughts on how to move forward, so the widest variety of visitors of Twitter Bootstrap based sites could enjoy those sites to the same extent.
The text was updated successfully, but these errors were encountered: