Html - CSS: Is Helvetica The Default 'sans-serif' Font On Mac And Arial ...

    1. Home
    2. Questions
    3. Tags
    4. Users
    5. Companies
    6. Labs
    7. Jobs
    8. Discussions
    9. Collectives
    10. Communities for your favorite technologies. Explore all Collectives

  1. Teams

    Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

    Try Teams for free Explore Teams
  2. Teams
  3. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs CSS: Is Helvetica the default 'sans-serif' font on Mac and Arial the default sans-serif font on Windows? Ask Question Asked 15 years, 2 months ago Modified 11 years, 7 months ago Viewed 30k times 18

I have a lot of CSS that does the following:

font-family: Helvetica, Arial, sans-serif;

It my understanding that Helvetica is the default sans-serif font on Mac and Arial is the default sans-serif font on Windows ... if that's the case, couldn't I just change the above code to be:

font-family: sans-serif;

Yes, no?

Share Improve this question Follow asked Oct 27, 2009 at 14:12 Teddi's user avatar TeddiTeddi 2531 gold badge3 silver badges6 bronze badges Add a comment |

6 Answers 6

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 21

The default font really depends on the browser. For example, in Firefox on Mac, I have Lucida Grande as the default sans-serif font. I don't think I changed it, but I'm not entirely sure. You can't really depend on the defaults being specific fonts, as users can change them in the preferences. If you want a specific font, specify it.

Share Improve this answer Follow answered Oct 27, 2009 at 14:14 Samir Talwar's user avatar Samir TalwarSamir Talwar 14.3k3 gold badges44 silver badges65 bronze badges Add a comment | 14

Helvetica on Windows XP looks horrible due to its poor rendering. Luckily, only a few people have Helvetica installed on Windows XP (because if they care about Helvetica, they’ll probably be using a Mac).

This is safer:

"Helvetica Neue", Arial, sans-serif;

That way, pretty much only Mac OS X will pickup Helvetica Neue (standard on OS X) and Windows can ignore it and move straight into Arial.

Share Improve this answer Follow edited Jan 2, 2012 at 1:41 Ry-'s user avatar Ry- 225k56 gold badges488 silver badges497 bronze badges answered Jan 14, 2011 at 15:02 Thomas Edwards's user avatar Thomas EdwardsThomas Edwards 1411 silver badge2 bronze badges 1
  • 1 +1 Helvetica on Windows XP does indeed look horrible! This is when font smoothing is set to "Standard" (the default setting). Thanks for the "Helvetica Neue" tip. – MrWhite Commented Aug 24, 2012 at 15:12
Add a comment | 3

With fonts, you want to be as specific as possible to prevent layout issues. Your page may look perfect on a machine with Arial as the default sans-serif font, but if someone has a very different font as their default, it can affect spacing of elements (if you use relative measures). Plus it makes any designer on the project angry when they see the wrong font, and you don't want that.

Share Improve this answer Follow answered Oct 27, 2009 at 14:19 Tom's user avatar TomTom 22.8k5 gold badges66 silver badges96 bronze badges Add a comment | 2

What do you want to happen on platforms that have

  • Helvetica or Arial installed and
  • a default sans-serif font that is neither of those?

Or asked differently: do you always prefer Helvetica or Arial over the default, if they are installed? If you prefer the default sans-serif font in all cases, why mention those two at all?

Share Improve this answer Follow answered Oct 27, 2009 at 14:23 Joachim Sauer's user avatar Joachim SauerJoachim Sauer 308k59 gold badges565 silver badges620 bronze badges 2
  • 1 I prefer Helvetica if available, if not Helvetica, than Arial, last resort if neither Helvetica or Arial is available, display using whatever is the default sans-serif typeface. – Teddi Commented Oct 27, 2009 at 14:48
  • 2 @Teddi: in that case, what does the default font matter? If you want Helvetica if available, even if it's not the default then your original CSS is the correct one. – Joachim Sauer Commented Oct 27, 2009 at 14:57
Add a comment | 1

Helvetica is sometimes the default sans on Mac, but to be honest it's not a great screen font.

Geneva, Lucida Sans, and Trebuchet MS are good alternatives.

Share Improve this answer Follow answered May 11, 2011 at 15:37 Foo Bar's user avatar Foo BarFoo Bar 3383 silver badges20 bronze badges Add a comment | 0

You can be pretty certain that Helvetica is installed on machines running Mac OS X, because that font is used in a number of official applications designed by Apple. Arial is also available on any machine, provided that the user hasn't deleted the font file.

But as Tom points out, it's better to be as specific as possible when defining font styles. When I want a sans-serif family displayed I usually have the following in my stylesheets:

Helvetica, Geneva, Arial, sans-serif; Share Improve this answer Follow answered Oct 29, 2009 at 11:09 mensch's user avatar menschmensch 4,4113 gold badges30 silver badges49 bronze badges 1
  • This doesn't make sense. Geneva is a different typeface. Arial is designed to be a cheap Helvetica so for consistency you'd want them to be the same. Your more specific options are "Geneva, Verdana, sans-serif" or "Helvetica, Arial, sans-serif" -- pick the font family you like better. – Eric_B Commented Dec 14, 2017 at 13:55
Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid …

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.

  • The Overflow Blog
  • How AI apps are like Google Search
  • Featured on Meta
  • The December 2024 Community Asks Sprint has been moved to March 2025 (and...
  • Stack Overflow Jobs is expanding to more countries

Linked

7 css line-height rendering differently in IE, Safari and Chrome 10 Helvetica or Arial as base font in CSS? 3 Browser font defaulting 49 CSS Font "Helvetica Neue" 2 CSS - Why is font-style: italic not applied for font-family: Helvetica, Arial, sans-serif? 27 How to set Helvetica font? 7 Different CSS (Font-weight) in Mac OSX and Windows. Why does the font-weight render differently? 1 'Open Sans', sans-serif looks different in mac 4 How to specify the system’s default serif and sans-serif font-family? 0 Default font when using Sans-Serif in CSS 0 Why is the rendered font on my website Arial when I have set font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;

Hot Network Questions

  • Bringing in a peanut butter sandwich to discourage lunch thief who has peanut allergy
  • Does theory ladenness mean I have to throw out science ... and my senses?
  • Is this 240V compressor plug wired correctly?
  • What does the é in Sméagol do to the pronounciation?
  • What HDD copy strategy is best between manually syncing and rewriting from scratch?
  • Question regarding one modification of one inequality of Young type
  • On iOS, can I move or copy data from the Notes.app to the Files.app?
  • Is it necessary to report a researcher if you are sure of academic misconduct?
  • When does a noun take the accusative rather than dative form
  • Why does MS-DOS 6.22 boot so slowly?
  • How many hours of daylight can a planet in an elliptical orbit receive?
  • Manathermy: effects on the ecosystem
  • Is this position possible to have been made legally?
  • Why don't bicycles have the rear sprocket OUTSIDE of the frame spacing? (Single speed)
  • Varying output from single file
  • exploratory factor analysis, non-normal data
  • Is this an effective way to quickly switch between two gain settings in an inverting amplifier configuration?
  • Why do we define the standard error to ignore bias (unlike MSE which includes bias)?
  • Are their any advanatges of a lower value of a loss function?
  • Simple U-Arrow above Arrow in tikz
  • How to do the opposite of shift in zsh?
  • What type of valve has a screwdriver slot and no handle?
  • How was 煞 created from 殺?
  • What Battery Powered Part Is This?
more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html

Từ khóa » Html Font Family Default Sans Serif