0 0 Votes

CSS: Meaning of font-family : serif or sans-serif

Question by WebHorn | 25/10/2017 at 11:08

From time to time, I am looking in some CSS code for learning purposes and I have often seen "serif" or "sans-serif" as a value for the property "font-family" used as formatting of some text elements.

Usually, you are defining the font that should be used for the corresponding element with "font-family". However, what does it then mean when setting the font to serif or sans-serif? This can not really be a font or the name of a font?!



Show Profile | Message
0Best Answer
0 Votes

Both "serif" as well as "sans-serif" are not a direct font but a generic font family defined in the browser. "serif" is standing for a typeface with serifs such as Georgia, Times or Times New Roman while "sans-serif" is meaning a font without serifs like Arial, Helvetica or Verdana.

But what does that mean in concrete terms? Let's have a look at two definitions of font families:

h1 {font-family: Georgia, Times, serif;}
h2 {font-family: Helvetica, Arial, Verdana, sans-serif;}

If a browser gets these instructions, it should write the h1 headings preferentially in the font Georgia. If the font Georgia is not installed or available, Times should be used instead. If both fonts, Georgia and Times are not available, we are coming to the value "serif". With this, the browser gets the instruction to use at least some font with serifs, if the other serif fonts are not available. The point is that you can at least control a bit how the font face of the website is looking like in cases when the preferred fonts are not available.

The situation is similar with the h2 headings from the example. The specified alternatives will be gone through in the defined order and if none of the listed fonts are installed, sans-serif is ensuring that at least a font without serifs will be used for the text.

Next to serif and sans-serif, there are other values you can use at this position. monospace is standing for a font with fixed width (for example like Courier), cursive is standing for a handwriting font and fantasy is standing for any extraordinary font. Which font is actually be taken if such a property is defined, is decided by the browser. Firefox on Windows is for example using the fonts Times New Roman (serif), Arial (sans-serif) and Courier New (monospace). However, in general, you can adjust those default fonts in the settings.
25/10/2017 at 17:16

ReplyPositive Negative

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own articles on askingbox.com. How to do.