Open In App

Foundation CSS Global Style Font Sizing

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS offers a global font scaling strategy that enables web developers to specify uniform font sizes across their websites. It is a front-end framework that offers a library of pre-built components, styles, and templates. Foundation CSS’s global style font scaling method allows developers to specify font sizes for all components, including headings, paragraphs, and other text elements, in one location. This helps to maintain uniformity and coherence throughout the page and makes future font size adjustments easy.

Syntax: Foundation CSS font sizing uses a simple syntax that is easy to understand and implement. The syntax for setting the font size for all elements is:

$global-font-size: XXpx;

Properties: There are several properties that can be set using Foundation CSS global style font sizing, including:

  • $global-font-size: This property sets the font size for all elements on the website.
  • $h1-font-size, $h2-font-size, $h3-font-size, $h4-font-size, $h5-font-size, $h6-font-size: These properties set the font size for the different heading levels.
  • $small-font-size: This property sets the font size for small elements, such as captions or labels.

 

Features: Foundation CSS global style font scaling has a number of characteristics that make it a great option for website developers, such as:

  • Design consistency: By using global style font scaling, website developers may make sure that all of the elements have the same font size, which contributes to a design that is consistent.
  • Accessibility: By using standard font size, website designers may increase the website’s accessibility and make it simpler for visitors with visual impairments to read and navigate the material.
  • Time-saving: By removing the need to manually specify font sizes for each individual website element, Foundation CSS’s global style font scaling saves time. This frees up developers to concentrate on the layout and functionality of the design.

Approach: The global style font scaling solution given by Foundation CSS entails specifying font sizes for many text components in a single location. This may be accomplished by specifying font-size variables in a separate file, such as variables.scss or foundation.scss. These variables can then be referenced in CSS files where font sizes must be specified.

For example, the variables.scss file may contain the following code:

$global-font-size-xxl: 36px;
$global-font-size-xl: 30px;
$global-font-size-lg: 24px;
$global-font-size-md: 18px;
$global-font-size-sm: 14px;
$global-font-size-xs: 12px;

Example 1:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Global Font Sizing Example</title>
  
    <link rel="stylesheet" href=
  
    <style>
        h1 {
            font-size: $global-font-size-xxl;
        }
  
        h2 {
            font-size: $global-font-size-xl;
        }
  
        h3 {
            font-size: $global-font-size-lg;
        }
  
        p {
            font-size: $global-font-size-md;
        }
    </style>
</head>
  
<body>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell small-12">
                <h1>HTML</h1>
                <p>
                    HTML stands for HyperText Markup 
                    Language. It is used to design web 
                    pages using the markup language. 
                    HTML is the combination of Hypertext 
                    and Markup language. Hypertext 
                    defines the link between the web 
                    pages and markup language defines 
                    the text document within the tag 
                    that define the structure of web 
                    pages.
                </p>
                  
                <h2>CSS</h2>
                <p>
                    CSS (Cascading Style Sheets)is used 
                    to apply styles to web pages. 
                    Cascading Style Sheets are fondly 
                    referred to as CSS. It is used to 
                    make web pages presentable. The 
                    reason for using this is to simplify 
                    the process of making web pages 
                    presentable. It allows you to apply 
                    styles on web pages. More importantly, 
                    it enables you to do this independently 
                    of the HTML that makes up each web page.
                </p>
                  
                <h3>JavaScript</h3>
                <p>
                    This Javascript Tutorial is designed 
                    to help both beginners and experienced 
                    professionals master the fundamentals 
                    of JavaScript and unleash their 
                    creativity to build powerful web 
                    applications. From basic syntax and 
                    data types to advanced topics such as 
                    object-oriented programming and DOM 
                    manipulation.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

We’ve incorporated Foundation CSS via a CDN (content delivery network) in this example to avoid having to download and host the CSS ourselves. With the style tag, we have also added some custom CSS that applies the global font size variables to various HTML components. To apply various font sizes to different heading levels and paragraphs, we utilized the variables $global-font-size-xxl, $global-font-size-xl, and $global-font-size-lg. Here is a fantastic example of how you can utilize Foundation CSS’s global font scaling to keep your typography consistent across your website.

Example 2: In this example, we’ve defined some custom classes in our CSS that apply the global font size variables to different classes. We’ve then used these classes in our HTML to apply the appropriate font size to different elements.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Global Font Sizing Example</title>
    <link rel="stylesheet" href=
    <style>
        .large-text {
            font-size: $global-font-size-xl;
        }
  
        .medium-text {
            font-size: $global-font-size-md;
        }
  
        .small-text {
            font-size: $global-font-size-sm;
        }
    </style>
</head>
  
<body>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell small-12">
                <h1>Global Font Sizing Example</h1>
                <p class="large-text">
                    This text is large.
                </p>
                <p class="medium-text">
                    This text is medium.
                </p>
                <p class="small-text">
                    This text is small.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

This is a good example of how you can use Foundation CSS’s global font sizing to create your own custom typography classes that can be used throughout your website.



Last Updated : 26 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads