- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Typography Helpers
In this chapter, we will study about Typography Helpers. Typography helpers are used to format your text in semantically relevant ways. Helper classes in Foundation let you to scaffold some typographic styles quicker.
The following table lists the Typography Helpers, which are used in Foundation.
| Sr.No. | Typography helper & Description |
|---|---|
| 1 | Text Alignment
It helps in changing the element's text alignment like left, right, center and justify. |
| 2 | Subheader
Subheaders can be added to any header element by using the .subheader class. |
| 3 | Lead Paragraph
It is considerably larger block of text compared to the normal text, which can be used for advertisement or other descriptive text. |
| 4 | Un-bulleted List
By default, the <ul> is a bulleted list in Foundation. To remove the bullets, you can use .no-bullet class. |
| 5 | Statistics
Whenever you are dealing with dashboard, you need to highlight some important numbers. You can achieve this by using .stat class. |
Sass Reference
Variables
The following table lists the SASS variables in the project's settings file that makes the component's default styles to get customized.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$lead-font-size Font size for lead paragraphs by default. |
Number | $global-font-size * 1.25 |
| 2 |
$lead-lineheight Line height for lead paragraph by default. |
String | 1.6 |
| 3 |
$subheader-lineheight Subheader's default line height. |
Number | 1.4 |
| 4 |
$subheader-color Subheader's default font color. |
Color | $dark-gray |
| 5 |
$subheader-font-weight Subheader's default font weight. |
String | $global-weight-normal |
| 6 |
$subheader-margin-top Subheader's default top margin. |
Number | 0.2rem |
| 7 |
$subheader-margin-bottom Subheader's default bottom margin. |
Number | 0.5rem |
| 8 |
$stat-font-size Static number's default font size |
Number | 2.5rem |