Fluid fonts

Question 1

How can you make a font fluid?

Answer 1

Using viewport units on the font-size property. The following CSS ruleset makes the heading font size 13% of the viewport width:

h1 {
  font-size: 13vw;
}

Note: if you are going to support hand held devices you may prefer to use vmin viewport unit that way your font will always be calculated using the the viewport’s smaller dimension in both portrait and landscape modes.

Source 24ways.org

Question 2

How can you give a minimum size to a fluid font?

Answer 2

We can use the CSS calc() function to calculate a font size simultaneously based on both rems and viewport units. For example:

h2 {
  font-size: calc(0.5rem + 2.5vmin);
}

For a 320 px wide screen, the font size will be 16 px, calculated as follows:

(0.5 × 16) + (320 × 0.025) = 8 + 8 = 16px

For a 768 px wide screen, the font size will be 27 px:

(0.5 × 16) + (768 × 0.025) = 8 + 19 = 27px

Source 24ways.org

Question 3

How can you give a maximun size to a fluid font?

Answer 3

With a media query:

@media screen and (min-width: 80rem) {
  :root {
    font-size: 1.375rem;
  }
}

Fonts won’g grow above 1.375rem even if the with of the screen is above 80rem

Sources madebymike.com.au

Question 4

Define a fluid font with a minum/maximum size?
Note: print font should be fixed to 0.875rem

Answer 4

\:root {
  font-size: 0.875rem;
}

@media screen and (min-width: 20rem) {
  :root {
    font-size: calc(0.875rem + 0.5 * ((100vw - 20rem) / 60));
  }
}

@media screen and (min-width: 80rem) {
  :root {
    font-size: 1.375rem;
  }
}

The only catch is that all unit types must be the same for the calc() equation to work.

Source madebymike.com.au

Question 4

How can you create a perfect smooth scaling between any 2 font sizes over any viewport range?

The font needs to start start scaling and stop scaling exactly where you want.

Answer 4

\:root {
--min-offset: 0.875rem;
--max-offset: 1.375rem;
--min-width: 20rem;
--max-width: 80rem;
--growth-factor: 0.5;  /* var(--max-offset) - var(--min-offset); with units stripped */
--growth-units: 60;	/* var(--max-width) - var(--min-width) with units stripped */

font-size: calc(var(--min-offset) + 
	(var(--growth-factor)  * ( (100vw - var(--min-width)) / var(--growth-units))));
}

1.- The first code block defines a set of custom properties:

• --min-offset: the minimum font-size offset (0.875rem).
• --max-offset: the maximum font-size offset (1.375rem), but it’s not used in this snippet.
• --min-width: the minimum viewport width (20rem) taken into account for font-size scaling.
• --max-width: the maximum viewport width (80rem) taken into account for font-size scaling, but it’s not used in this snippet.
• --growth-factor: the growth factor (0.5) which determines how fast the font-size scales with the viewport width. The comment suggests that it should be calculated as var(--max-offset) - var(--min-offset).
• --growth-units: the range of viewport width in which the font size should scale (60rem), as mentioned in the comment it is intended to be var(--max-width) - var(--min-width).

2.- The font-size property is set using the calc() function which performs a calculation to be used as the property value:

• var(--min-offset) is the base font-size (0.875rem).
• (var(--growth-factor) * ( (100vw - var(--min-width)) / var(--growth-units))) is the scaling factor based on the viewport width.
• 100vw represents the full width of the viewport in viewport units.
• (100vw - var(--min-width)) calculates how much the viewport width is above the minimum width.
• Dividing by var(--growth-units) normalizes this value.
• Multiplying by var(--growth-factor) scales the font size.

Or the equivalent without css variables:

\:root {
    font-size: calc(0.875rem + 0.5 * ((100vw - 20rem) / 60));
  }

Source madebymike.com.au