This article will introduce you to a simple yet an important topic that is Fonts In CSS and will also give you a practical demonstration on the subject. Following pointers will be covered in this article,
- Fonts in CSS
- Attributes in CSS Font
- font-style attribute
- font-weight attribute
- font-size attribute
- font-family attribute
Web sites carry content in the form of images, audio, video and textual content. However, most web pages still rely on text as the predominant format. This is because plain text offers some very significant advantages.
Non-intrusive readability – You want to check the latest match score while at office. Obviously you want a quick text update, not a noisy video!
Low network bandwidth requirement – Text content can be loaded even in poor internet connectivity areas, while rich media cannot.
Search friendly – Web sites always keep an eye on how easily their content gets noticed on search engines. Text is best suited for this, at least until AI completely takes over the internet!
While formatting text content, web designers have only few parameters to work on – font, alignment, highlighting and color. Selecting the right font for your text is a critical choice. The standard practice is to use CSS font tags to define fonts for text in HTML pages.
If you are new to the world of HTML programming, get a basic starter tour here. You might want to read up on the CSS basics before getting on with learning about CSS fonts.
For a comprehensive CSS tutorial, visit Edureka CSS Tutorial For Beginners. You will get an excellent heads-up on the way CSS is to be used to augment HTML web design.
Moving on with this article on Fonts in CSS
Fonts in CSS
A font is basically a set of characteristics associated with the display of text. Fonts are differentiated from one another by their size, indentation, width, slant and so on. Let’s begin with a basic text display in different fonts.
Example 1: Headings and paragraph in various fonts
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: lightblue;
}
h1
{
font: bold 30px arial, sans-serif;
}
h2
{
font: 15px verdana;
}
p
{
font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<h1>The first heading in Arial font</h1>
<h2>The second heading in Verdana font</h1>
<p>The paragraph in italic bold Georgia font</p>
</body>
</html>Example 1: Output
In Example 1, we have 3 different lines of text in different fonts. You would notice that each of the fonts vary in their character widths, indentations, etc.
Moving on with this article on Fonts in CSS
Attributes in CSS Font
CSS Fonts have 4 primary attributes – style, weight, size and family. The style attribute denotes normal or italic. The weight shows the font as plain or bold. Weight can also be expressed numerically. The size is simply the font size; bigger the size, larger the text in appearance. There are multiple ways in which font size can be assigned, detailed descriptions are given in later sections. The family attribute is to assign the font name to the text.
In Example 1, we have used different font names for the headings and paragraph. Under the h1 and p tags, we see two font names listed, while the h2 tag names only one font. This is the definition of a font family, more about this later.
Moving on with this article on Fonts in CSS
font-style attribute:
The two primary styles can be set are ‘normal’ and ‘italic’. Italics are supposed to be cursive in nature with a slant. Normal is the default option which is straight. There is another less used option called ‘oblique’, which resembles the italic option in most fonts. You can also set the style to ‘inherit’ so that it takes the font style from its parent element.
| Example 2: Font style options | |
| font-family: verdana; font-style: normal; font-size: 15; | Verdana normal font |
| font-family: verdana; font-style: italic; font-size: 15; | Verdana italic font |
| font-family: verdana; font-style: oblique; font-size: 15; | Verdana oblique font |
Moving on with this article on Fonts in CSS
font-weight attribute:
This attribute decides whether the font should appear thick or thin. It can be set to ‘normal’ or ‘bold’. Default value is normal. This value can also be set as numeric. Weight of 400 represents normal and 700 is for bold. There are few other settings (ranging from 100 – very light to 900 – very bold), but they are not supported by all fonts. All the weight options are shown in Example 3.
| Example 3: Font weight options | |
| font-family: verdana; font-weight: normal; font-size: 15; | Verdana normal weight |
| font-family: verdana; font-weight: bold; font-size: 15; | Verdana bold weight |
| font-family: verdana; font-weight: 500; font-size: 15; | Verdana numeric weight |
Moving on with this article on Fonts in CSS
font-size attribute:
The size attribute can be set in multiple ways. Let’s list down these ways below.
● Enumerated value such as ‘medium’, ‘large’. In fact just like sizes of clothing, the values can range from XX Small to XX Large!
● Set relative to its parent element, as ‘larger’ or ‘smaller’.
● Percentage of the parent element’s size.
● Set as ‘inherit’ to directly adopt the size of the parent element.
● As absolute value in the units of px (pixels), pt (points) or cm (centimeter)
‘Medium’ is the default value set for this parameter.
Moving on with this article on Fonts in CSS
font-family attribute:
In HTML, the CSS font family is for setting the font name. You can either just put a single font name with the tag. Or you can assign multiple values as a font-family list that defines the priority in which the browser should choose the font.
The list is prioritized from left to right, in the form of a fall-back system. The first value if available is chosen, or control goes to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.
CSS font families are of 2 types – generic families and font families.
● Generic families – based on some general characteristics, fonts are grouped as ‘serif’, ‘sans serif’, ‘monospace’, etc. For instance, Sans serif means fonts without the serif style.
● Family names – fonts belonging to specific family hierarchies. Times, Arial, Courier are all font families and Times New Roman is an example font of the Times family.
The various font family usage options are listed in Example 4 below.
| Example 4: Font family options | |
| font-family: verdana; | Verdana single font |
| font-family: “Times New Roman”, Times, Courier; | Times New Roman followed by font families |
| font-family: Arial, monospace, sans-serif; | Arial followed by generic families |
Some common points to note
● Like several other CSS properties, some of the font settings vary in different browsers. Check for browser support before using some rare font settings.
● You can set font settings separately using the individual tags of font-style, font-weight, etc. Alternatively if you prefer compact code, you can use the shorthand font attribute with all values in the same line.
● In user scenarios where you want the font to vary in size depending on the browser size, there is a useful font size setting called responsive font setting. It can be set with a vw unit, which means “viewport width”. That way the text size will follow the size of the browser window.
Hope you found the information you were looking for on Fonts In CSS. Do share your experience with us in the comments section below. Happy designing!
Check out the Angular Course Online by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
If you’re interested in learning more about web-development, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).