---json
{
    "description": "How to set the font-size with the font-size attribute",
    "page_id": "z0k0wfs8j52ldujk2dc62",
    "title": "ComboStrap - Font Size Typographic Attribute "
}
---
====== ComboStrap Styling - Font Size ======


===== About =====
''font-size'' is a [[docs:content:typo|typographic attribute]] that permits to set the size of the [[docs:styling:font|characters font]].



===== Responsive =====
The font-size is adapting to each [[docs:styling:breakpoint|screen size]].

On a smaller screen, a [[docs:content:heading|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 =====

<code dw>
font-size="value"
</code>
where value can be:
  * a [[docs:styling:scale|scale number]] from 1 to 6
  * a [[docs:content:heading|heading]] from h1 to h6
  * or a length with a css unit (px, rem,...) such as ''10px''


===== Example =====



==== Scale ====
With a [[docs:styling:scale|scale value]] and the [[docs:block:text|text component]]

<webcode name="Default" frameborder="0">
  * Input:
<code dw>
<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>
</code>
  * Output:
</webcode>

==== Heading ====

With the size of an [[docs:content:heading|heading]] by number and the [[docs:block:text|text component]].

<webcode name="Default" frameborder="0">
  * Input:
<code dw>
<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>

</code>
  * Output:
</webcode>

==== First letter ====
with the [[docs:content:itext|itext]] component
<webcode name="Default" frameborder="0">
  * Input:
<code dw>
<itext font-size="h1" bold>T</itext>he first letter has the same size than the first heading
</code>
  * Output:
</webcode>

===== Configuration =====
==== Scale ====
The ''scale value'' is based on a [[docs:styling:scale|scale]] where you can change the base length. To know more about scaled value and the configuration, you should go the scale page: [[docs:styling:scale]]



===== Support =====

==== Bootstrap note =====

[[release:archive:1.13_bootstrap5|Bootstrap version 5]] does implement responsive size [[https://getbootstrap.com/docs/5.0/content/typography/#responsive-font-sizes|by default]]. ''ComboStrap'' does not apply therefore the fix of Bootstrap 4 for the [[docs:content:heading#display|display title]]

It has introduced the [[https://getbootstrap.com/docs/5.0/getting-started/rfs/|RFS module (Responsive Font Sizes)]] that reacts also to styling properties with unit values like:
  * [[docs:styling:spacing|margin, padding]],
  * [[docs:styling:border|border-radius]],
  * or even [[docs:styling:shadow|box-shadow]].