See the Pen Font Families by Aakhya Singh ( on CodePen. In the following example, some of the common fonts for each generic family are used. Some or many of the fonts listed above may not be available on your computer. Examples are Courier, "Courier New", FreeMono, "OCR A Std". Examples are Blippo, Chalkduster, Impact, "Jazz LET", "Stencil Std". Examples are "Apple Chancery", "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting". These are cursive in nature with slightly italic typeface. Examples are "Agency FB", Arial, "Bell Gothic", Calibri, "Century Gothic", Corbel, "Droid Sans", "Franklin Gothic", "Gill Sans", Helvetica, "Lucida Sans", Tahoma, Verdana. These do not have serifs which are small lines at the end vertices of characters. Examples are "Adobe Jenson Pro", Albertus, Baskerville, Bodoni, Bookman, Cambria, "Copperplate Gothic", Garamond, Georgia, Palatino, "Times New Roman". serifĬharacters have tapering end vertices. The names of generic families are serif, sans-serif, cursive, fantasy, monospace.Įach of these generic families is described below along with some examples. Otherwise, the browser will use the default font on the user's system. It is advisable to always give a generic-family at the end so that the browser selects a font from that generic family only (sans-serif in the above case) if the previous fonts are unavailable. any font installed on the computer that is sans-serif. In case Helvetica is also not available, then the browser will choose any similar sans-serif font i.e. The browser will use Helvetica if it couldn't find Arial. Arial and Helvetica are the names of font-families. To understand it better, consider the above example again. It is a set of fonts which are identical in type. It is the name of a generic-family which is explained below. Now, sans-serif isn't the name of a font. then the browser will use a sans-serif font. If you love to play around with fonts you probably stumbled upon the word kerning. If that font is not available or couldn't be used for any reason, then it will use the second font Helvetica. Adjusting the letter spacing in Design Space. In the above example, the browser will first use Arial. Font-family : Arial, Helvetica, sans-serif