Learn everything about Fonts in CSS

CSS

Preface

This article will share CSS fonts with ace through the examples and practice in this article.

The CSS font properties define the font family, the weight, the size, and the style of the text.

1. Font Families in CSS

In CSS, there are two types of font family names:

  • generic family – a group of font families with a similar look (like “Serif” or “Monospace”)
  • font family – family specific font (like “Times New Roman” or “Arial”)

Note: On a computer screen, a sans-serif font is considered to be easier to read than a serif font.

2. Font Family

The text’s font family is set using attributes font-family

The font-family attribute should contain a number of font names as a “fallback” system. If the browser doesn’t support the first font, the browser will try the next font, and so on

Start with the font you want and end with a generic last name to allow the browser to choose a similar font in the generic family name, if no other fonts are available.

Note: If the name of a font family contains more than one word, it must be enclosed in quotation marks, like: “Times New Roman”.

<!DOCTYPE html>
<html>
<head>
<style>
.serif {
  font-family: "Times New Roman", Times, serif;
}

.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
<p class="monospace">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>

Copy and run the code

3. Font Style

The font-style property is mainly used to specify italic text.

This property has three values:

  • normal – The text is displayed normally
  • italic – Italicized text
  • oblique – Text that is ‘italic’ (italic is very similar to italic, but less supported)

For example:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

</body>
</html>

Copy and run the code

  • The font-weight attribute specifies the weight of the font:
p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}
    null

  • The font-variant attribute specifies whether text should be displayed in small capital letters.

In small capital font, all lower case letters are converted to upper case. However, converted uppercase letters appear at a smaller font size than the original capital letters in the text.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
</style>
</head>
<body>

<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>

</body>
</html>

4. Font Size

The font-size property sets the size of the text.

Being able to manage text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings or paragraph-like headings.

Always use appropriate HTML tags, like

for headings and

for paragraphs.

The font size value can be absolute or relative.

Absolute size:

  • Set text to specified size
  • Don’t allow users to resize text in all browsers (not good for accessibility reasons)
  • Absolute size is useful when the physical size of the output is known

Relative size:

  • Set the size in relation to the surrounding elements
  • Allows user to change text size in browser

Note: If you don’t specify a font size, the default size for normal text, like paragraphs, is 16px (16px = 1em).

Sets the font size with pixels(Pixels)

Setting the text size in pixels gives you full control over the text size:

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Tip: If you use pixels, you can still use the zoom tool to resize the entire page.

Set the font size with Em

To allow users to resize text (in the browser menu), many developers use em instead of pixels.

The em size unit is recommended by cafedev.

1em is the current font size. The default text size in the browser is 16px. So the default size of 1em is 16px.

The size can be calculated from pixel to em using the following formula: pixel / 16 = em

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

In the example above, the text size in em is the same as the previous example in pixels. However, with baby size, it is possible to adjust text size in all browsers.

Unfortunately, there are still issues with older versions of Internet Explorer. Text becomes larger and smaller than when it was made smaller than when made smaller.

Using Percentage and Em Combination

The solution that works on all browsers is to set the default font size in percent for theelement:

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

5. Use Google Fonts

If you don’t want to use any of the standard fonts in HTML, you can use the Google Fonts API to add hundreds of other fonts to your page.

Simply add the stylesheet link and refer to the font family of your choice:

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia";
  font-size: 22px;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</body>
</html> 

Copy and run the code

6. Font shorthand properties

To shorten the code, it is also possible to specify all of the individual font properties in an attribute.

Properties font is an attribute shorthand for:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>

<h1>The font Property</h1>

<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>

<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>

</body>
</html>

Full series self-learning CSS from basic to advanced.

Hope this helps!

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *