ComboStrap - Font Size Typographic Attribute

Undraw My Documents


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


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.



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



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="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



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)


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:

Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Recommended Pages
Undraw My Documents
ComboStrap - Font

The fonts used are the default system font of the target system. They are designed specifically with today’ screen in mind. They are known as native font stack or system font stack The following...
Rem Strap Conf
ComboStrap Styling - Length Scale (Size Scale)

Every length are scaled based on what's called the remrem (Root Emphemeral Unit) which is equal by default to 16px. This scale is used for font size and spacing (component spacing and line spacing) The...
Undraw My Documents
ComboStrap UI - Styling

Styling in ComboStrap is the possibility to render every component as you wish. ComboStrap has three levels of styling: the bootstrap stylesheet level - bootstrap standard theme the user stylesheet...
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion
Undraw Add Content Re Vgqa
Typographic effect and attributes in ComboStrap

How to add typographic effect to your text
Undraw Add Content Re Vgqa
itext: applies typographic effect to characters or words

itext is a component that applies typographic effect to characters or words such as boldness, font-size and more

Task Runner