Quick Contact

    CSS Fonts

    Styling Fonts with CSS

    For text to be readable on a page, the right font and style must be used.

    For styling the text’s font, CSS offers a number of properties, such as modifying the font’s face, adjusting its size and boldness, managing variants, etc.

    Font-family, font-style, font-weight, font-size, and font-variant are the different font attributes.

    Font Family

    The font that will be used to represent the text is specified by the font-family property.

    As a fallback system, this property can store multiple comma-separated font names. If the first font is not present on the user’s system, the browser will attempt to use the second, and so on.

    Therefore, list the font you want first, followed by any fonts that could take its place if it’s not available. A generic font family of five (serif, sans-serif, monospace, cursive, and fantasy) should be used to conclude the list. An example of a declaration of a font family might be as follows:

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting font-family in CSS< /title>
    < style>
    body {
    font-family: Arial, Helvetica, sans-serif;
        }
    < /style>
    < /head>
    < body>
    < h1>This is a heading< /h1>
    < p>This is a paragraph.< /p>
    < /body>
    < /html>
    

    Note:
    Like “Times New Roman,” “Courier New,” “Segoe UI,” etc., the name of a font family that consists of more than one word must be enclosed in quotation marks.

    Serif and sans-serif font families are most frequently used in web design because they are better suited for reading. While monospace fonts are frequently used to display code, because each letter in this typeface occupies the same amount of space, the text appears to have been typewritten.

    The cursive fonts resemble handwriting or cursive writing. Although the fantasy font is an artistic font, it is not readily widely used because it is not widely available across operating systems.

    Difference between Serif and Sans-serif Fonts

    While sans-serif fonts seem to be straighter and lack these small strokes, serif fonts have a small line or stroke at the character’s extremities.

    Font Style

    An element’s text content can have its font face style changed using the font-style property.

    There are three font styles: regular, italic, and oblique. The normal value is the default.

    To see how it essentially operates, let’s use the example below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting font-style in CSS< /title>
    < 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 normal paragraph.< /p>
    < p class="italic">This is a paragraph with italic font style.< /p>
    < p class="oblique">This is a paragraph with oblique font style.< /p>
    < /body>
    < /html>
    

    Note:
    Oblique and italic font styles initially seem to be the same thing, but there is an difference. Whereas the oblique style is simply a slanted or sloped version of the regular font, the italic style makes use of the italic version of the font.

    Font Size

    The font-size property is utilized to specify the font size for an element’s text content.

    Font size values can be specified in a number of ways, including with keywords, percentages, pixels, ems, etc.

    Setting Font Size with Pixels

    When you require pixel accuracy, setting the font size in pixel values (for example, 14px, 16px, etc.) is a good option. A pixel is an absolute measurement unit that designates a set length.

    To see how it essentially operates, let’s use the example below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Defining Font Size Using Pixels< /title>
    < style>
        h1 {
    font-size: 24px;
        }
    p {
    font-size: 14px;
        }
    < /style>
    < /head>
    < body>
    < h1>This is a heading< /h1>
    < p>This is a paragraph.< /p>
    < /body>
    < /html>
    

    Because a user cannot alter the font size through the browser settings, defining font sizes in pixels is not thought to be very accessible. Users who have poor vision, for example, might want to set the font size much larger than what you’ve suggested.

    As a result, if you want to create an accessible design, users should steer clear of using pixels values and instead use values that are relative to the user’s default font size.

    Setting Font Size with EM

    The parent element’s font size is indicated by the em unit. 1em is equivalent to the font size that is applied to the element’s parent when defining the font-size property.

    Therefore, 1em = 20px and 2em = 40px if the font-size on the body element is set to 20px.

    However, if you haven’t customized the font size anywhere on the page, it will default to the standard 16px font size set by the browser. As a result, 1em equals 16 pixels and 2em, 32.

    To see how it essentially operates, let’s look at the example below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Defining Font Size Using EM< /title>
    < style>
        h1 {
    font-size: 2em;    /* 32px/16px=2em */
        }
    p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
        }
    < /style>
    < /head>
    < body>
    < h1>This is a heading< /h1>
    < p>This is a < span>paragraph< /span>.< /p>
    < /body>
    < /html>
    

    Setting Font Size with Root EM

    Rem unit, also known as “root em,” was added to CSS3 to further simplify things. Unlike em, which is relative to parent element’s font size, rem unit is always relative to the font-size of the root element (html), regardless of where the element is located in the document.

    Accordingly, 1rem is equal to the font size of an html element, which is typically 16px in most browsers. To see how it actually operates, let’s use an example:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Defining Font Size Using REM< /title>
    < style>
    html {
    font-size: 62.5%;    /* font-size 1em = 10px */
        }
    body {
    font-size: 1.6rem;    /* 1.6rem = 16px */
        }
    p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
        }
    p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
        }
    < /style>
    < /head>
    < body>
    < h1>This is a heading< /h1>
    < p>This is a < span>paragraph< /span>.< /p>
    < /body>
    < /html>
    

    Setting Font Size with Keywords

    Several keywords are provided by CSS that you can use to specify font sizes.

    One of the following keywords can be used to specify an absolute font size: xx-small, x-small, small, medium, large, x-large, or xx-large. Whereas, the keywords smaller or larger can be used to specify a relative font size. Let’s use an instance to demonstrate how it functions:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Defining Font Size Using Keywords< /title>
    < style>
    body {
    font-size: large;
        }
        h1 {
    font-size: larger;
        }
    p {
    font-size: smaller;
        }
    < /style>
    < /head>
    < body>
    < h1>This is a heading< /h1>
    < p>This is a paragraph.< /p>
    < /body>
    < /html>
    

    Note:
    The default font size for browsers, which is typically 16px, is represented by the keyword medium. The corresponding pixels for xx-small, x-small, small, large, x-large, and xx-large are 9, 10, 13, 18, and 24, respectively.

    Font Weight

    The font’s boldness or weight is specified by the font-weight property.

    Normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, and inherit are all possible values for this property.

    • The font weights are specified by the numeric values 100 to 900, where each number denotes a heavier weight than the one before it. Normal font size is 400, and bold font size is 700.
    • While the other values, like normal and bold, are unconditional font weights, the bolder and lighter values are relative to the inherited font weight.

    To better understand how this property functions, let’s use an example:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting font-weight in CSS< /title>
    < style>
    p {
    font-weight: bold;
        }
    < /style>
    < /head>
    < body>
    < h1>This is a heading< /h1>
    < p>This is a paragraph in bold font.< /p>
    < /body>
    < /html>
    

    Note:
    Most fonts are only offered in normal and bold, with a few others occasionally being available. If the specified weight of a font is not available, the closest available weight will be used as a replacement.

    Font Variant

    The special small-caps variation of the text can be displayed thanks to the font-variant property.

    In contrast to normal capital letters, which make lowercase letters appear as scaled-down versions of their corresponding uppercase letters, small-caps or small capital letters are a little bit different.

    Try out the example below to see how this property actually functions:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting font-variant in CSS< /title>
    < style>
    p {
    font-variant: small-caps;
        }
    < /style>
    < /head>
    < body>
    < h1>This is a heading< /h1>
    < p>This is a paragraph.< /p>
    < /body>
    < /html>
    

    Small caps have already been configured in the text, but the value normal removes them.

    FAQS

    Q1. What is CSS font size?

    The font size is controlled by the font-size CSS property. The sizes of the font size-relative < length> units, such as em, ex, and so forth, are also updated when the font size is changed.

    Q2. What is CSS example?

    Web pages are styled and laid out using CSS (Cascading Style Sheets), which can be used to change the font, colour, size, and spacing of your content, divide it into multiple columns, or add animations and other decorative elements.

    Q3. What are the 3 types of CSS?

    Following are the three different types of CSS: Inline CSS, Internal or Embedded CSS, and External CSS.

    Q4. How do I give a font style in HTML?

    Use the CSS font-family property to modify font type solely in HTML. Place it inside a style attribute and set the value you desire. Once this style attribute has been added, an HTML element such as a span tag, heading, paragraph, or button can be used.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.