Foundation - Base Typography

Description

Typography in Foundation defines headings, paragraphs, lists and other inline elements which create attractive and simple default styles for elements.

The following table lists the different types of typography used in Foundation −

Sr.No. Typography & Description
1 Paragraphs

Paragraph is a group of sentences defined with different font size, highlighted words, line height etc.
2 Header

It defines HTML headings from h1 to h6.
3 Links

It creates a hyperlink that opens another document when you click on the text or an image.
4 Dividers

It is used to give a break between the sections by using <hr> tag.
5 Ordered and Unordered Lists

Foundation supports ordered lists, unordered lists to list the things.
6 Definition Lists

Definition Lists are used to display name value pairs.
7 Blockquotes

It represents block of text, which defines much bigger than normal.
8 Abbreviations and Code

Abbreviation defines a shortened term of word or phrase and code represents a piece of code.
9 Keystrokes

It is used to perform a specific function.
10 Accessibility

Foundation provides some guidelines to access the content of the page.

Sass Reference

You can change the styles of the components by using the following SASS variables as listed in the table.

Sr.No. Name & Description Type Default Value
1

$header-font-family

Specifies the font family for header elements.

 String or List $body-font-family
2

$header-font-weight

Specifies font weight of headers.

 String $global-weight-normal
3

$header-font-style

Provides font style of headers.

 String normal
4

$font-family-monospace

Font stack used for elements that use monospaced type, such as code samples.

 String or List Consolas, 'Liberation Mono', Courier, monospace
5

$header-sizes

Defines screen sizes of headings and each key is a breakpoint, and each value is a map of heading sizes.

 Map 
small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)
6

$header-color

Provides color of the headers.

 Color inherit
7

$header-lineheight

Defines line height of headers.

 Number 1.4
8

$header-margin-bottom

Provides bottom margin of headers.

 Number 0.5rem
9

$header-text-rendering

Defines method for text rendering.

 String optimizeLegibility
10

$small-font-size

Specifies font size for <small> elements.

 Number 80%
11

$paragraph-margin-bottom

Specifies bottom margin of paragraphs.

 Number 1rem
12

$paragraph-text-rendering

Methods for text rendering paragraph.

 String optimizeLegibility
13

$code-color

Provides text color to code samples.

 Color $black
14

$code-font-family

Provides font family to the code samples.

 String or List $font-family-monospace
15

$code-border

Specifies the border around the code.

 List 1px solid $medium-gray
16

$code-padding

Specifies the padding around the text.

 Number or List rem-calc(2 5 1)
17

$anchor-color

Default color for links.

 Color $primary-color
18

$anchor-color-hover

Specifies the default color for links on hover.

 Color scale-color($anchor-color, $lightness: -14%)
19

$anchor-text-decoration

Default text decoration for links.

 String none
20

$anchor-text-decoration-hover

Default text decoration for links on hover.

 String none
21

$hr-width

Defines maximum width of a divider.

 Number $global-width
22

$hr-border

Specifies default border for a divider.

 List 1px solid $medium-gray
23

$hr-margin

Default margin for a divider.

 Number or List rem-calc(20) auto
24

$list-lineheight

It defines line height for items in a list.

 Number $paragraph-lineheight
25

$list-style-type

Provides bullet type for unordered lists.

 String disc
26

$list-style-position

It defines positioning for bullets on unordered lists.

 String outside
27

$list-side-margin

Defines left side (or right) margin.

 Number 1.25rem
28

$defnlist-term-weight

Provides font weight for <dt> elements.

 String $global-weight-bold
29

$defnlist-term-margin-bottom

Provides spacing between <dt> and <dd> elements.

 Number 0.3rem
30

$blockquote-color

It applies text color of <blockquote> elements.

 Color $dark-gray
31

$blockquote-padding

Provides padding inside a <blockquote> elements.

 Number or List rem-calc(9 20 0 19)
32

$blockquote-border

It gives side border for the <blockquote> elements.

 List 1px solid $medium-gray
33

$cite-font-size

Defines font size for the <cite> elements.

 Number rem-calc(13)
34

$cite-color

Provides text color for <cite> elements.

 Color $dark-gray
35

$keystroke-font

Defines font family for the <kbd> elements.

 String or List $font-family-monospace
36

$keystroke-color

Defines text color for the <kbd> elements.

 Color $black
37

$keystroke-background

Provides background color for the <kbd> elements.

 Color $light-gray
38

$keystroke-padding

Specifies padding for the <kbd> elements.

 Number or List rem-calc(2 4 0)
39

$keystroke-radius

Displays the border radius for the <kbd> elements.

 Number or List $global-radius
40

$abbr-underline

Provides the bottom border style for the <abbr> elements.

 List 1px dotted $black
Advertisements