Foundation CSS Global Style Font Sizing
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 = "https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css" > < 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 = "https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css" > < 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.
Contact Us