Winden

Wizard Font Sizes

This will give you option to generate font sizes with scale ratio, based on steps you defined. If you do not like scale ratio you can also overwrite values.

  • Disable Fluid
  • Use REM instead of PX
  • Extend

Disable Fluid

By the default we are using fluid scale where we calculate:

  • Minimum font size
  • Minimum screen size (where the fluid start from minimum font size)
  • Maximum font size
  • Maximum screen size (where the fluid ends with maximum font size)

Everything below minimum screen size will have fixed minimum font size,
and everything above maximum screen size will have fixed maximum font size.

Use REM instead of PX

By the default we are using pixels for font calculation. You can switch to rems, but then you will need to define rem size.

The pixel value of 1rem. Defaults to 16px in all browsers but can be changed with CSS. For example, if you set your root font size to 62.5%, then 1rem equals 10px.

Builders Fonts Sizes

Under the builders integration you will be presented active builders that you can include to fetch the font sizes values.

If the Builders (Oxygen, Bricks) or FSE are active you will get option to include them.

This will be added as preview without option to edit them.

Extend

This option with add new font sizes on top of tailwind default font sizes. If this is not enabled font sizes in Wizzard will replace tailwind default font sizes.

Main Content Fluid

  • Mix, Max Font Sizes
  • Mix, Max Screen Sizes
  • Scale ratio
  • Steps
  • Base value
  • Generated step

1
2
3
4
5
6

Mix, Max Font Sizes

This will set minimum and maximum font sizes values

Mix, Max Screen Sizes

This will set when scaling starts and ends

Scale ratio

Every step will increased or decreased multiplied with this value. if you set 2 and font size is 10 it will generated 10, 20, 40, 80 …

Note we have it for minimum and maximum and they can be different, so for example every small value can be increased by 1.5 and biggest sizes can be 2.

That is give you values mins 10, 15, 22.5, 33.75 and max can be 10, 20, 40, 80. With this mobile sizes will be much smaller ratio then desktop.

Steps

this will tell to the calculator how many steps are and what they names

Base value

Everything before for be decreased by scale radio and everything after will be increased.

Example:
– Size and 10px
– Steps are: sm, base, md, lg, xl
– ratio: 2
– Base value “base” will generate

  • sm: 5
  • base: 10
  • md: 20
  • lg: 40
  • xl: 80

Generated step

Here you will get the preview of

Steps

This number and names will be generated based on steps input field

Values for each step

This will give you preview of generated values with option to overwrite it if you need something custom

Min and Max size

This will give you preview of generated values for min and max values

checkbox

You can disable values if you need to skip some steps but you need to do the math for you. You may need extra step for extra big titles but you do not need step in between to be displayed under class names.

Main Content non fluid

If fluid is disable we do not need min max screens and font sizes.

We only need font size to determine base and we need number of steps and scale ratio.

You will still have option to overwrite values and disable them.

Table of Contents