11 ms·
Open Sans, how do we love thee?
- misframer 13y agoSource Sans Pro is another great open source font, and it's by Adobe. http://blogs.adobe.com/typblography/2012/08/source-sans-pro.html http://blogs.adobe.com/typblography/2012/08/source-sans-pro....
- da_n 13y agoI also really like Source Code Pro, my favourite coding font.
- karlshea 13y agoI was a big fan of ProggyClean but Source Code Pro converted me. And it works in more places. (If only there was an italic version. Syntax highlighting can look weird.)
- tsahyt 13y agoLast time I looked, the font wasn't fully finished though. Maybe the italic version will come later?
- misframer 13y agoIt's open source, so if someone's willing to do it...
- FireBeyond 13y agoI kept going back and forth between Source Code Pro and Pragmata Pro. For me, at least, Pragmata won.
- deleted 13y ago[deleted]
- msutherl 13y agoSource Sans Pro is an excellent, extremely versatile, well-hinted and very contemporary-looking humanist sans-serif. Not to mention the platform availability and wide selection of weights. It's become my new Helvetica.
- RexRollman 13y agoWow, very nice.
- buro9 13y agoWe've had a print designer and typography expert in with us these last few weeks and top of the list of things to fix was our web typography. Source Sans Pro is the font we've gone with after a fairly extensive search. And we've set the base size at 16px with a line-height of 24px. Which is to say, fairly large, very readable.
- deleted 13y ago[deleted]
- wfoof 13y agoOpen Sans like all the other Helvetica replacements (except Arial) are only cool the first few days. After that it's like, nah, gimme back Helvetica (which have been cool since the 70s): http://helveticafilm.com http://helveticafilm.com
- cpeterso 13y agoI prefer Helvetica Neue (1983); its spacing and curves are a little more relaxed than traditional Helvetica. Plus, Helvetica is notorious for being rendered poorly on Windows web browsers. Since Windows does not have a Helvetica Neue (unless the user has installed an Adobe design application), you can avoid Helvetica on Windows with a CSS font stack like: font-family: 'Helvetica Neue',Arial,sans-serif;
- msutherl 13y agoI don't understand, Helvetica Neue renders awfully at body-text sizes on computer displays. Unless you need the light weights, use Arial. It's Helvetica made to look good on computers under 16px. font-family: Arial, sans-serif;
- bryne 13y ago16px is proper body-text size.
- msutherl 13y ago"Proper". I agree with Oliver Reichenstein's argument[1], but Google does 13px and it's fine. The font-size in most desktop apps is less than 16px. Human's are adaptable. 16px is just more comfortable. [1]: http://ia.net/blog/100e2r http://ia.net/blog/100e2r
- titlex 13y agoUnfortunately, Helvetica Neue also renders poorly on Windows web browsers. It's a problem that I have been seeing a lot lately, especially with the popularity of Twitter Bootstrap. I understand that being a Windows user with Helvetica/Helvetica Neue installed is not very common, but when a website has an unreadable font I immediately leave it.
- deleted 13y ago[deleted]
- msutherl 13y agoI really like Open Sans for display and small text, but it renders wide and a bit too open for body text, hence the readability issues.
- danso 13y agoI'd add PT Sans as also a great, free sans-serif font. In fact, sometimes I can't tell them apart: see the pairing here: http://www.google.com/fonts/specimen/PT+Sans#pairings http://www.google.com/fonts/specimen/PT+Sans#pairings Open Sans is killing it in usage...1.9 billion font views in the last week, according to Google Fonts API: http://www.google.com/fonts/specimen/Open+Sans#stats http://www.google.com/fonts/specimen/Open+Sans#stats , which is more than 2.5x as popular as the next popular Google Font, Oswald: http://www.google.com/fonts/specimen/Oswald#stats http://www.google.com/fonts/specimen/Oswald#stats I'd love to see Open Sans used so frequently that Helvetica becomes fresh, again.
- deleted 13y ago[deleted]
- shardling 13y agoRecent-ish Firefox Android builds use Open Sans. https://blog.mozilla.org/ux/2013/03/improved-type-on-firefox-for-android/ https://blog.mozilla.org/ux/2013/03/improved-type-on-firefox...
- spatten 13y agoAny recommendations for open source serif fonts?
- pfg 13y agoTry Charis SIL[0]. [0]: http://scripts.sil.org/charissilfont http://scripts.sil.org/charissilfont
- jboynyc 13y agoGentium
- solox3 13y agoLiberation Serif. Great for writing reports.
- misframer 13y agoLinux Libertine. http://www.linuxlibertine.org/ http://www.linuxlibertine.org/
- networked 13y agoHate to be that guy, but Computer Modern [1]. Out of TTF "natives" check out DejaVu Serif [2] and Droid Serif [3]. I've read countless ebooks set in the later. [1] https://en.wikipedia.org/wiki/Computer_Modern https://en.wikipedia.org/wiki/Computer_Modern [2] http://dejavu-fonts.org/wiki/Main_Page http://dejavu-fonts.org/wiki/Main_Page [3] http://www.droidfonts.com/info/droid-serif-fonts/ http://www.droidfonts.com/info/droid-serif-fonts/
- Surio 13y agoI'm partial to Serif myself, so I know what you mean :-) In addition to Droid Serif, Liberation serif and Linux Libertine and Gentium recommended here, check out PT Serif also. Very readable on high resolutions and medium body fonts... All these sets below, are complete (R, SC, B ,IT, B+IT...) fonts AFAIK. http://www.fontsquirrel.com/fonts/pt-serif http://www.fontsquirrel.com/fonts/pt-serif Gandhi Serif, on the other hand makes excellent compliment to PT Serif as a beautiful heading font! http://www.fontsquirrel.com/fonts/gandhi-serif http://www.fontsquirrel.com/fonts/gandhi-serif I also use Alegreya a lot..... http://www.fontsquirrel.com/fonts/alegreya http://www.fontsquirrel.com/fonts/alegreya In addition, these sets below, are complete (R, SC, B ,IT, B+IT...) fonts AFAIK. http://www.dafont.com/justus.font http://www.dafont.com/justus.font http://www.fontsquirrel.com/fonts/Latin-Modern-Roman http://www.fontsquirrel.com/fonts/Latin-Modern-Roman http://www.fontsquirrel.com/fonts/TeX-Gyre-Schola http://www.fontsquirrel.com/fonts/TeX-Gyre-Schola http://www.fontsquirrel.com/fonts/TeX-Gyre-Bonum http://www.fontsquirrel.com/fonts/TeX-Gyre-Bonum -- Bookman clone. These are not complete, but they are close relatives. http://www.fontsquirrel.com/fonts/Theano-Didot http://www.fontsquirrel.com/fonts/Theano-Didot http://www.fontsquirrel.com/foundry/Alexey-Kryukov http://www.fontsquirrel.com/foundry/Alexey-Kryukov http://www.fontsquirrel.com/fonts/Old-Standard-TT http://www.fontsquirrel.com/fonts/Old-Standard-TT http://www.fontsquirrel.com/fonts/Bentham http://www.fontsquirrel.com/fonts/Bentham http://www.fontsquirrel.com/fonts/DubielPlain http://www.fontsquirrel.com/fonts/DubielPlain http://www.fontsquirrel.com/fonts/Theano-Modern http://www.fontsquirrel.com/fonts/Theano-Modern Enjoy!
- taitems 13y agoI'm a frequent user and massive proponent of Open Sans, which I think allows me to say how much I wish it had a Hairline and Black weight. I end up using Lato for a Futura-esque heavy weight. (eg: http://techevents.co http://techevents.co) EDIT: Lato for reference http://www.google.com/fonts/specimen/Lato http://www.google.com/fonts/specimen/Lato
- pgrote 13y agoI am baffled. OpenSans renders fine in IE and Firefox, but Chrome doesn't do it. Here is what I get on the WP page: http://imgur.com/XgmEN9P http://imgur.com/XgmEN9P It is the same for every other site that uses opensans. Windows 7, Chrome 26.0.1410.64 m, Font Size: Medium, Page Zoom, 100%. Any ideas?
- pgrote 13y agoI did fine a bug for Chrome. https://code.google.com/p/chromium/issues/detail?id=137692 https://code.google.com/p/chromium/issues/detail?id=137692 Looks like the workaround is to turn off ClearType.
- mmahemoff 13y agoSeems fine on Chrome 26 in OSX (10.7.5). http://i.imgur.com/RTARq61.png http://i.imgur.com/RTARq61.png
- pgrote 13y agoThanks for the comparison ... and the feelings of envy. lol It really is a gorgeous looking font. For the longest time I just though trendy designers were picking the worst looking font.
- mattengi 13y agohttp://imgur.com/j7TGaA9.png http://imgur.com/j7TGaA9.png from ubuntu with infinality freetype patch.
- tasuki 13y agoThat doesn't look right. The font-weight of the heading is supposed to be 300 and is at least 400 in your screenshot. Chromium on out-of-the-box ubuntu seems better: http://i.imgur.com/0WIO2t6.png http://i.imgur.com/0WIO2t6.png
- Bezvezenator 13y ago> Any ideas? Chrome uses GDI for font rendering while Firefox and IE use DirectWrite.
- tga 13y agoSince we are on this topic, I have a public service announcement: even though light Open Sans looks great and is trendy for headings, using a light font weight for body text is a bad idea because it makes it difficult to read. I keep coming across examples on the web, always with bad results. Thank you.
- robin_reala 13y agoAre you on XP by any chance? It’s got horrible rendering for light fonts in my experience.
- huhtenberg 13y agoMake sure you have ClearType turned on. http://support.microsoft.com/kb/306527 http://support.microsoft.com/kb/306527
- Trezoid 13y agoIt doesn't matter. Any font deliberately set lighter then normal is hard to read on any device.
- dizzystar 13y agoI came into say exactly this. Crying shame that the world's most popular blog platform thoughtlessly made this color mistake, and now this problem is going to become common-place. Not everyone on earth has 20/20 vision and uses an Apple Retina device. Is it possible to block all WP sites so my browsing world is less miserable?
- rthomas6 13y agoI'm by no means any sort of designer, but on their comparison picture the Open Sans body is easier for me to read than the Helvetica/Ariel body.
- bjz_ 13y agoThe type looks fine to me, and and reads very comfortably – better than the original type choice actually. Here are some screenshots on OSX: Firefox 22.0a2 (2013-04-22) http://i.imgur.com/7o0fmL9.png http://i.imgur.com/7o0fmL9.png Chrome 26.0.1410.65 http://i.imgur.com/f9kqILy.png http://i.imgur.com/f9kqILy.png Safari 6.0.4 http://i.imgur.com/PYAxOkw.png http://i.imgur.com/PYAxOkw.png I can't speak for Windows and Linux though. Do you have ClearType turned on?
- josteink 13y agoLooking at both of those screenshots, am I the only one who finds font-rendering on Macs very blurry and extremely hard to read? So blurry in fact, I find it's hard to tell that there are different fonts in those two screenshots. They just both look like text smudged over a while matte when switching back and forth between them.
- dchest 13y agoYes, it's blurry, especially for the eye coming from Windows. You get used to it, though. My favorite font rendering is the current Ubuntu's default: it doesn't destroy letter shapes as much as Windows, but still not as blurry as OS X.
- mryall 13y agoRather than designing to better fit the pixels you can see like on Windows, I'm pretty sure the Mac OS X hinting was designed to get progressively better as screen densities increased. Like their reliance on hardware acceleration in the window manager, it was a forward-looking technical decision built in to the OS. Unfortunately, we got stuck in a 96 DPI rut throughout the 2000s and are only just coming out of it with high-DPI "Retina" displays. Now the Mac hinting decision makes more sense, and the ClearType technology looks bizarre, whereas for all the last decade it was the opposite.
- 28inch 13y ago"It’s beautifully legible" I couldn`t disagree more. The body text set with opensans on Windows(especially in chrome) looks awful.
- huhtenberg 13y agoCare to show a screen grab? There must be something off with your setup, because OpenSans is very legible, even on Windows.
- camus 13y agoI agree , sans serif is just not readable. A mix between serif for text and sans ( for headers , titles ,etc ... ) is the way to go. I just cant read any long text that is sans. It's very painfull.
- pyxy 13y agoAll this doesn't matter to me while I cannot increase font size by zooming in the page. Why does it happen to more and more web sites? I zoom in because font is too small for me, but font size doesn't increase, only paragraph width increases!
- fredyr 13y agoI was experiencing the exact same thing! I hope that trend doesn't stick.
- jfb 13y agoTry using this in a user CSS: * { -webkit-text-size-adjust: auto !important; } Why anybody anywhere thought that the behavior for 'none' was appropriate is baffling [1]. [1] https://bugs.webkit.org/show_bug.cgi?id=56543 https://bugs.webkit.org/show_bug.cgi?id=56543
- huhtenberg 13y agoA short list of body fonts that render consistently well in smaller sizes: Open Sans Source Sans Pro Droid Sans Lato Pontano Sans Proxima Nova Museo Sans PT Sans Segoe UI Tondo Istok Web Interval Sans (Light) http://www.google.com/webfonts/specimen/Source+Sans+Pro http://www.google.com/webfonts/specimen/Source+Sans+Pro http://www.google.com/fonts/specimen/Droid+Sans http://www.google.com/fonts/specimen/Droid+Sans http://www.google.com/fonts/specimen/Lato http://www.google.com/fonts/specimen/Lato http://www.google.com/webfonts/specimen/Pontano+Sans http://www.google.com/webfonts/specimen/Pontano+Sans https://typekit.com/fonts/proxima-nova https://typekit.com/fonts/proxima-nova https://typekit.com/fonts/museo-sans https://typekit.com/fonts/museo-sans http://www.google.com/fonts/specimen/PT+Sans http://www.google.com/fonts/specimen/PT+Sans https://www.microsoft.com/typography/fonts/family.aspx?FID=331 https://www.microsoft.com/typography/fonts/family.aspx?FID=3... http://www.webink.com/face/1133 http://www.webink.com/face/1133 http://www.google.com/fonts/specimen/Istok+Web http://www.google.com/fonts/specimen/Istok+Web http://www.fontspring.com/fonts/mostardesign/interval http://www.fontspring.com/fonts/mostardesign/interval
- chrisvineup 13y agoGood list +1
- Recoil42 13y agoOut of curiosity, did you derive this list from anywhere, or is it just from off the top of your head?
- huhtenberg 13y agoIt's my own list based on sifting through a metric ton of fonts available for online use, trying them for size and what not. I really like type design and related matters, so I used to do that for every project, the OCD way, and it was an enormous time sink. So I ended up compiling a short list and started updating it every time I'd see a good type in use when surfing.
- pavanky 13y ago> Let us count the ways. I count at most one.
- acqq 13y agoDidn't they effectively increased the "download size" of pages and slowed the rendering down because now pages depend on the font which has to be downloaded, at the same time as they made the rendering on Chrome on Windows looking worse? Is that progress?
- andybak 13y agoChrome on Windows is a real problem for webfonts and one that I'm astonished hasn't been addressed yet. How is Firefox on Windows (especially XP) now? It's a while since I've checked.
- DanBC 13y agoI'm hopping between a few machines at the moment. I don't find the fonts on Chrome under Vista[1] particularly bad. Not worse than other OSs. I have lousy eyesight, so most sites have lousy readability, so I often change the fonts. It's weird that fonts on Windows, OS X, and Linux are all so differently blurry / sharp. It'd be great if there was some user-understandable standard language so that users could chose the setting they prefer. You do get used to the differences, but it'd be nice to not have to do that each time I changed machine.
- deleted 13y ago[deleted]
- acdha 13y agoThis would be why my iPhone displays the page without text for 30 seconds until the font loads. Much as I like web fonts, using them for body text is painful.
- dspillett 13y agoDepends where the delay lies. If the font is loaded in such a way that page rendering blocks in all cases then they need to rearrange their code somewhat, but it could be your browser that is broken: unless there is something blocking rendering (the font being loaded synchronously in a static script tag or something) then the browser should render the content using an alternative from the CSS definition or what-ever its default is, and reflow once the font is loaded. While it is extra processing it isn't like modern phones are short of a CPU cycle or few.
- acdha 13y agoNothing is broken, it's just a design decision: do you show unstyled content or wait until you have everything. See http://paulirish.com/2009/fighting-the-font-face-fout/#update2011 http://paulirish.com/2009/fighting-the-font-face-fout/#updat... for details but the gist is that browsers used to differ (Firefox chose the approach you prefer) but have converged on blocking until the fonts have downloaded. Currently the only way to get the behaviour you want would be using something like https://github.com/typekit/webfontloader https://github.com/typekit/webfontloader and using CSS to specify a default to be used until the font has transfered: body { font-family: sans-serif; } .webfonts-loaded body {font-family: "Open Sans"; }
- swah 13y agoOn a second visit, can you guys see webpages with webfonts without delay? My cache does not seem to work.
- duggan 13y agoSo, it turns out that when you have selectively added Open Sans typefaces as system fonts, this is what all these sites start to look like: http://i.imgur.com/kgpY6WO.png http://i.imgur.com/kgpY6WO.png I had added two densities so I could muck around with stuff in Pixelmator and was wondering why everyone had chosen the horrible slender version for body text on various sites, but apparently it just means whatever the system collection provides gets priority (which makes sense).
- uxwtf 13y agoIt would be great if Open Sans could be part of default browser fonts along with Helvetica and Arial.
- mikesten 13y agoThere are a bunch of examples of Open Sans in the wild up on Typio: http://www.typ.io/fonts/open_sans http://www.typ.io/fonts/open_sans