CSS | Generic font-family collection
The font-family property is used to set the font of text in HTML document. The different font-family is used to create attractive web pages. There are many fonts available to choose from font pool like Google fonts, Adobe fonts, etc and require font API linking and customization. Generic font families mainly come under following categories which are listed below:
- Serif
- Sans-serif
- cursive
- monospace
- fantasy
The detailed description of the generic font-family are listed below:
- serif: It is mostly used when text is written for printing purpose like books, newspaper, magazines, etc. Characters of the text are decorated with stroke at the end. The example of serif font-family is Times New Roman, Garamond, Georgia, Literata, Minion, Perpetua, etc.
Syntax:
element { font-family:serif; }Example:
<!DOCTYPE html><html><head><title>Generic Font Family</title><style>.GFG {font-family:serif ;}body {color:green;font-size:20px;}</style></head><body><p>GeeksforGeeks</p><pclass="GFG">GeeksforGeeks</p></body></html>Output:
- sans-serif: Its style is modern, formal and simple in appearance. Unlike “Serif” It does not have a stroke at the ends. It has a wide range of use but most often in the digital form of text. The example of sans-serif is Verdana, Arial, Calibri, Helvetica, Futura, Impact, Lato, Optima, Skia, etc.
element { font-family: sans-serif; }Example:
<!DOCTYPE html><html><head><title>Generic Font Family</title><style>.GFG {font-family:sans-serif ;}body {color:green;font-size:20px;}</style></head><body><p>GeeksforGeeks</p><pclass="GFG">GeeksforGeeks</p></body></html>Output:
- cursive: This type of font is mostly used in the invitation letter, informal messages, headlines, etc. Its appearance is like, handwritten text using a pen or brush. The example of cursive font-family is Flanella, Belluccia, Insolente, Corsiva, Zapfino, etc.
Syntax:
element { font-family:cursive; }Example:
<!DOCTYPE html><html><head><title>Generic Font Family</title><style>.GFG {font-family:cursive;}body {color:green;font-size:20px;}</style></head><body><p>GeeksforGeeks</p><pclass="GFG">GeeksforGeeks</p></body></html>Output:
- monospace: It is used to give examples, typewritten text, instructions, mailing address, code samples, etc.Each character of the text has got the same width. The example of monospace font-family is Courier, Consolas, Monaco, SimSun, Terminal, Menlo, Inconsolata, etc.
Syntax:
element { font-family:monospace; }Example:
<!DOCTYPE html><html><head><title>Generic Font Family</title><style>.GFG {font-family:monospace;}body {color:green;font-size:20px;}</style></head><body><p>GeeksforGeeks</p><pclass="GFG">GeeksforGeeks</p></body></html>Output:
- fantasy: It is used to make the text more decorative, impactful and expressive. This type of font should be used in the shorter text, as it is not easy to read it easily always. The example of fantasy font-family is Impact, Cracked, Critter, Studz, Copperplate, etc.
Syntax:
element { font-family:fantasy; }Example:
<!DOCTYPE html><html><head><title>Generic Font Family</title><style>.GFG {font-family:fantasy;}body {color:green;font-size:20px;}</style></head><body><p>GeeksforGeeks</p><pclass="GFG">GeeksforGeeks</p></body></html>Output:
Followings are the description of some font family mentioned as examples in above generic font-families are listed below:
- Verdana:
- Designed By:Matthew Carter
- Category:sans-serif
- Released on:1996
- helvetica:
- Designed By:Max Miedinger, Eduard Hoffmann
- Category:sans-serif
- Released on:1957
- courier:
- Designed By:Howard “Bud” Kettler
- Category:Monospaced
- Released on:~1956
- arial:
- Designed By:Robin Nicholas and Patricia Saunders
- Category:Sans-serif
- Released on:1982
- impact:
- Designed By:Geoffrey Lee
- Category:Sans-serif
- Released on:1965
- calibri:
- Designed By:Luc(as) de Groot
- Category: Sans-serif
- Released on:2007
- consolas:
- Designed By:Luc(as) de Groot
- Category:Monospaced
- Released on:2002
- georgia:
- Designed By:Matthew Carter
- Category: Serif
- Released on: 1996
- garamond:
- Designed By: Paul Hickson
- Category:Serif
- Released on: 1993
- perpetua:
- Designed By:Eric Gill
- Category:Serif
- Released on:1929-32
- onyx:
- Designed By:Gerry Powell
- Category:Serif
- Released on: 1955
Example: This example use different types of font-family.
<!DOCTYPE html><html> <head> <title> Generic Font Family </title> <style> body { color:green; font-size:20px; } </style></head> <body> <p>GeeksforGeeks</p> <p style="font-family:verdana;">GeeksforGeeks</p> <p style="font-family:helvetica;">GeeksforGeeks</p> <p style="font-family:courier;">GeeksforGeeks</p> <p style="font-family:arial;">GeeksforGeeks</p> <p style="font-family:impact;">GeeksforGeeks</p> <p style="font-family:calibri;">GeeksforGeeks</p> <p style="font-family:consolas;">GeeksforGeeks</p> <p style="font-family:georgia;">GeeksforGeeks</p> <p style="font-family:garamond;">GeeksforGeeks</p> <p style="font-family:perpetua;">GeeksforGeeks</p> <p style="font-family:onyx;">GeeksforGeeks</p></body> </html> |
Output:
Please Login to comment...