ComboStrap - Font Size Typographic Attribute

About

font-size is a typographic attribute that permits to set the size of the characters font.

Responsive

The font-size is adapting to each screen size.

On a smaller screen, a heading font size would become lower and would then not take the whole height of the screen.

This feature is called responsive font-size.

Syntax

font-size="value"

where value can be:

a scale number from 1 to 6
a heading from h1 to h6
or a length with a css unit (px, rem,…) such as 10px

Example

Scale

With a scale value and the text component

Input:

<text font-size="6">scale 6</text>
<text font-size="5">scale 5</text>
<text font-size="4">scale 4</text>
<text font-size="3">scale 3</text>
<text font-size="2">scale 2</text>
<text font-size="1">scale 1</text>

Output:

scale 6

scale 5

scale 4

scale 3

scale 2

scale 1

Heading

With the size of an heading by number and the text component.

Input:

<text font-size="h1">heading 1</text>
<text font-size="h2">heading 2</text>
<text font-size="h3">heading 3</text>
<text font-size="h4">heading 4</text>
<text font-size="h5">heading 5</text>
<text font-size="h6">heading 6</text>

Output:

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

First letter

with the itext component

Input:

<itext font-size="h1" bold>T</itext>he first letter has the same size than the first heading

Output:

The first letter has the same size than the first heading

Configuration

Scale

The scale value is based on a scale where you can change the base length. To know more about scaled value and the configuration, you should go the scale page: ComboStrap Styling - Length Scale (Size Scale)

Support

Bootstrap note

Bootstrap version 5 does implement responsive size by default. ComboStrap does not apply therefore the fix of Bootstrap 4 for the display title

It has introduced the RFS module (Responsive Font Sizes) that reacts also to styling properties with unit values like: