Sans-Serif | CSS-Tricks
Có thể bạn quan tâm
Have you ever written this?
body { font-family: Helvetica, Arial, Sans-Serif; }You’re all like: “Helvetica is the most awesome so I want that first, then Arial for PC’s since hey it’s pretty close, then fall back to whatever McSansSerif for crazyputers with like zero normal fonts installed.”
Turns out this is way better:
body { font-family: Sans-Serif; }Macs will get awesome Helvetica by default. On PC’s, even if they have Helvetica it can look worse than Arial for whatever reason, so this way they get Arial by default. And you’re still covered by the generic keyword. Shorter, easier, yay.
Thanks to @mathias for pointing out the specific part (29:32) of this video of Paul Irish talking HTML5 Boilerplate.
If you want to expand out that Helvetica stack and use some nicer variations when available, do see this.
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.Comments
Từ khóa » Html Sans Serif Font Family
-
CSS Web Safe Fonts - W3Schools
-
CSS Font-family Property - W3Schools
-
Font-family - CSS: Cascading Style Sheets - MDN Web Docs
-
The Ultimate List Of Web-Safe HTML And CSS Fonts - HubSpot Blog
-
CSS Font Family Example (Serif And Sans Serif Characters)
-
CSS: Fonts - W3C
-
The 20 Best HTML Fonts To Use In 2022 - Hostinger
-
CSS Font Family List - TutorialBrain
-
30+ Best Web Safe Fonts For Your Next Design In 2022 - Kinsta
-
Lesson 2: Applying Typography In CSS - University Of Washington
-
CSS Font-family - Free Tutorial To Learn HTML And CSS
-
How To Use Web Fonts In CSS: A Tutorial With Examples
-
CSS Font Stack: Web Safe And Web Font Family With HTML And ...
-
Font Family - Tailwind CSS
That’s only true if the browser preferences happen to be set that way. What “sans-serif” says is “use whatever the client has set as its default sans-serif font” , which out of the box may be Helvetica and Arial, but may not, and it may be modified by the user. On my Ubuntu machine that’ll end up being rendered in the Ubuntu font.
The “sans-serif” value just says “override the browser’s default preference of serif vs. sans-serif”, it doesn’t say anyhing about picking Arial over Calibri or anything else.
@shoutyman: isn’t that a good thing though? If I’ve gone to the trouble of specifically setting Ubuntu or Gill Sans or even Comic Sans as my sans-serif font, it would be nice if the site respected that choice.
Absolutely agree. Go further: if you’re hooked on serifs set it to Georgia or something. And if someone’s setting fonts for readability reasons or plain stubbornness there are of course plenty more options such as never using the site’s own fonts.
My impression, though, was that the gist of the post was to aim to use “whichever of Helvetica/Arial renders better on any given client”, though, which is a common aim (eg branding may dictate the use of one or the other with the other as a next-best fallback), and personally I don’t see “font-family: sans-serif;” as the right way of doing that.
(I think bfred.it’s tactic below is a good one.)
@Andy Not if the site only looks properly with that font.
Yep, even more. If you have other font set as default in browser (e.g. great russian free font “PT Sans”), it will be shown.
If you are going to start with this, then we as web folk should never change the color of links, or the point size of headers, or the background color, right?
Completely agree with this. Yes, a site may be intended to look a certain way, but if a site is only supposed to look ONE way with NO customization and wiggle room, aren’t we stepping backwards? What would the point be of having the option to change your default fonts if it had no purpose?
I personally do not toy with this, but Sean brings up a good point. Conformity? no. If somebody sets the font that they would like for a fallback, that is their fallback.
I would say this method is vague, but if you care to have the right setup/type of computer and files there is no problem.
Never thought of this. I heard about the ugly rendering of Helvetica on PC’s so I’ve been using the font stack “Helvetica Neue”, Arial, sans-serif; This will show Helvetica Neue on Macs (all of them have it) and Arial on Windows since most PC’s don’t have it Though for simple font stacks I’ll just use sans-serif;
I followed that exact same line of thinking until I saw a windows colleague with Helvetica Neue installed. It appeared to be displaying Helvetica Neue-Condensed (or similar), rather than the medium weight/variant. Disappointing.
Since then, I default to using sans-serif for copy where the typography is not intended to communicate beyond the content of the words, while continuing to use font stacks for headers. It’s a cheap way to keep expressive type in prominent places while reducing the risk of serious problems across the majority of content.
(Of course) audience and needs vary.
All those years spent creating font hierarchy… this is gonna be a tough habit to break!
Speaking of which, does anyone at css-tricks know why the site looks so horrible in Chrome and Firefox? The font looks just awful.
The default body font, Myriad Pro, is not web safe. The best font tool for the web I’ve seen yet is at http://www.typetester.org. It gives you the web safe list, the Windows/Mac default lists, and it lets you preview what different sizes/line-heights/letter spacings/color will look like.
I am in love with the way this font is rendered for me. (mac with CS5 fonts installed – also Chrome btw)
Only use web safe fonts? That’s the whole point of having font stacks… I think using Myriad on a webpage where most users have Adobe products installed is pretty ingenius. Now if we could only get pretty font rendering to all computers.
It is Myriad, but served through Typekit: http://typekit.com/fonts/myriad-pro
You can see browser samples on that page of how it’s supposed to look. Not sure why it would look any different but it’s definitely possible either they or I are doing something wrong (for certain combinations of browser/platform/version).
Not looking so great on PC Vista with myriad pro installed, http://i.imgur.com/e92sz.jpg
Myriad Pro installed, PC, Win7, Fox4: http://image.freecy.tk/images/188_SNAG_0036.png
XP, No Myriad* installed, FF3: http://image.freecy.tk/images/266_ccfonthorror.png
Looks awesome in firefox and chrome for me. What is your OS and browser versions? From what I understand and from what I have done Fonts served via typekit or the google API or even FontSquirrel appear normally to be in their Best State in firefox and Chrome, and may degrade in visual value on other browsers. Im just curious.
Windows XP browsers do not anti-alias text unless you have ClearType turned on for the SYSTEM. Anti-aliasing is turned on automatically on IE 7 and up, and FireFox 4. This has been the biggest blocker for using custom fonts for small text. Soon, this won’t be as big an issue…
fot rendering u can also try CSS command text-rendering … https://developer.mozilla.org/en/CSS/text-rendering
Choice quotes from Typekit support:
I’m certain I saw something only recently on why you shouldn’t use san-serif by itself…
Either way it’s basically saying it leaves it open to some weird interpretations in some circumstances. But if you’re not fussed, then cleaner code is nice cleaner code!
(In fact, having a quick check in Opera Mac, it looks like it falls back to Lucida Grande)
I didn’t realize I could set sans-serif and it would only show the default fonts. I’m going to use this on my next website project. Thanks for the tip Chris!
I have used font-family: ‘Helvetica Neue’, ‘HelveticaNeue’, Arial, Helvetica, Garuda, sans-serif; but some clients with Windows see all in bold und italic.
Cool tip. :)
Also, “Have you ever wrote…?” Really??
Fixed
I’m a bit new to this but font’s have been a source of frustration for me. your previous post called for: font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif; ; now, this seems to say “axe the Helvetica and Arial and only use sans-serif.” So, does that transpose into leaving out the Helvetica and Arial in the first code and leaving the remainder? What about “Lucida Grande” – I notice that it was behind Helvetica an Arial – BUT, is it still better than simple “sans-serif” on ALL machine types?
And sorry for being so dense, but: I also notice that you call for a size of “300” – I’d like my web to have the best readability it can but don’t have all of them installed on my computer so can’t see for myself. Are all of the equivalent in size? I notice that many fonts do require a tweaking in the size for readability.
Thanks for the help
While shorter may be easier, and knowing how the browsers treat things is good and all. I really think being explicit outweighs the short and easy implicit method. You’re also not guaranteed that browsers will default to the same values in the future.
[…]it can look worse *than* Arial[…]
Got it, thanks
And what if a PC User has Helvetica installed? I own a Mac, but there are designers out there using Windows. So, this is the only right way:
font-family: “Neue Helvetica”,”Helvetica Neue”,helvetica, arial, sans-serif;
I’ve been doing this for years, after I stopped looking for pixel perfection across browsers I instead focused on trying to create pages flexible enough to accommodate browser inconsistencies. It’s a logical conclusion to let go of targeting specific fonts at all.
I was chuffed when I saw that Paul Irish had come to the same conclusion…
also just to clarify a point on one of the previous comments, Shoutyman seemed to be suggesting that sans-serif will target the browsers default, unstyled, font. This is not the case, if your default font is Times New Roman, sans-serif will overwrite this with Arial (or Helvetica, or what have you).
Apologies if i misinterpreted the original comment.
it “override the browser’s default preference of serif vs. sans-serif” but chooses the default sans – since Times is serif it gets overridden
on topic: i belive setting specific fonts is still best if you want an exact look – specially because of possible future differences in defaults (plus kids setting their mom’s default to comic sans ;)
i got many tricks from your post and above comments. thanks
nice article, good stuff
Good point! But ‘Helvetica Neue’ is nicer than ‘Helvetica’, so I prefere:
font-family: ‘Helvetica Neue’, sans-serif;
what gives you: ‘Helvetica Neue’, Helvetica on Mac, and ‘Helvetica Neue’, Arial on PC.
I don’t care about minority changing default browser font setting ’cause it’s less than 1%.
Helvetica Neue does not renders how it should on a lot of browsers including chrome on XP (sometimes) anyways IMO is one of the worst fonts you could choose for a project
Sometimes it’s good to re-think some default tricks that you ‘just’ do. Thanks for that.
@claude We have this problem when testing on our Windows XP machines. We never found out why this occurs.
Here’s another useful link discussing font stacks:
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
Writing your stylesheets to be dependent on defaults on either Mac or Windows is too risky for the simple reason that those defaults could change at a later date.
Dude, I can’t even find the navigation on your website – why are you giving people tips?
The defaults could change, but this is a risk-averse approach. Default environment fonts are chosen for their unexpressive, consistently readable output. If specific x-height or pixels-per-em are required, it’s unlikely default fonts are even a part of the discussion – which is a wholly justifiable approach, just a different one that varies by project.
While this is good for reducing the font stack and giving the user control, I do wonder about how you would check that the site is useable across the myriad combination of platforms and browsers checking that the fonts are readable and the site usable?
Just because someone can set their default font to comic sans doesn’t mean they should. Obviously there are certain users who may benefit from using specific typefaces, but a typeface is part of branding and the overall visual ascetics of a site. As an example would a story on news.bbc.co.uk carry the same gravitas if it was set in comic sans? Would it be as readable? I think not.
While I think that the web is an amazing transformative form of communication which lets all be equal (users and businesses alike), discussions like this makes me agree with Sean’s comment about changing colour and font size and think that we might as well eliminate all styling.
For the sake of saving half a line of code I think you’re better off defining an actual font stack.
Typography is an essential component in web design, one which we spend several hours tailoring the rest of the design around. To leave it as an unknown quantity is a bit too scary for me!
maybe a stupid question but nonetheless
how does this work russian, chinese etc. settings – taking for granted they might have their fonts set as browser defaults …
We russians have Arial as default in browsers, thoguh I changed it to Calibri.
Hmm, i got a decent bug with Helvetica anyway (on my PC ) Every Site with Heletica Neue as first choice in CSS looks so damn ugly. it picks a super bold italic HN Font Type…. Anyone got the same “bug” or a solution for that?
Wikipedia is the only site where I seen it used. Most of the time it’s better to let users decide what font they want to use, instead of forcing Arial.
Haha I saw that on the video too. I was like “genius!”
Thank you for sharing, it’s really new idea, for me I prefer keep everything consistent, it’s good for branding.
i’ve been using that for a while now, it’s nice. :)
I’d rather use the shortform too. I really don’t like the way Helvetica renders on Windows XP. I my own site renders beautifully on a Mac with Helvetica and slightly less beautifully on a PC with Arial, then I’m happy.
I would recommend using a CSS reset though.
Hmmm. I wonder about the sum total of electricity that will be burned up this morning just in this particular discourse alone. All the little computers out there gaily humming away, all the little fingers pecking away, all the little consoomers cybershouting, “Me-me-ME! Look at ME! Here’s what *I* ‘think’! Here’s what *I* ‘believe’!” As the planet slowly suffocates under a hideously mucilaginous coating of its own cybersplooge.
Guess I’m a bit late in the discussion, but I couldn’t leave it unreplied. There is a much better solution if you don’t want to trade off control of your font-stack for solving font rendering problems with IE: use IE conditional comments.
Serve your stylesheet containing the Helvetica first font-stack then serve a custom stylesheet with <!--[if IE]><link type="stylesheet" href="ie.css"><![endif]--> to IE overriding the font-stack with Arial first.
This way everyone will get Helvetica except IE users and your type will be more likely to look as you intended to.