ComboStrap Styling - Font Size

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

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

• Input:
<text font-size="h1">heading 1</text>
<text font-size="h6">heading 6</text>

• Output:

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: