Scaling grid tiles containing text

Suppose we have a design with a component that contains an image and text, with responsive dimensions and a fixed height to width ratio. The font size scales too, so the text wraps the same for each width.

This is what the HTML structure of the component might look like:

<article class="tile">
    <figure>
        <img src="" alt="" />
    </figure>
    <h2></h2>
    <p></p>
</article>

The height of the tile and the font size are proportional to the tile width. How can we calculate them?

What is the width of the tile?

Suppose the tiles are arranged in three columns in a grid that takes up 80% of the viewport width, leaving a 10% margin on each side.

Desktop layout. Three columns take up 80% of the viewport width.

Then the width of a tile can be expressed in viewport width and gutter width:

$grid-gutter-width: 30px;
$tile-width: calc(80vw / 3 - #{$grid-gutter-width});

We could use $tile-width to express the height and position of the tile and its parts, like this:

.tile {
	height: calc(1.25 * #{$tile-width});
	padding-top: calc(0.8 * #{$tile-width});

	figure {
        max-height: calc(.75 * #{$tile-width});
	}
}

But $tile-width will likely vary for different layouts/media queries. You can’t use Sass variables outside of the media query that it is defined in. So you would have to set the height, padding-top and max-height properties for every media query.

I would like to use the CSS property font-size to carry the result of our calculations and then set the sizes in em units. So let’s first calculate the font size.

Determine font size

The font size is proportional to the tile width, or in other words font-size equals $tile-width multiplied with a constant, $font-size-factor. If we decide that for e.g. a viewport width of 1500px we want a font size of 18px , using the above expression for $tile-width we find 370px * $font-size-factor = 18px, from which $font-size-factor can be calculated.

$font-size-factor: 18px / (400px - $grid-gutter-width);

That gives us font-size too:

font-size: calc(#{$tile-width} * #{$font-size-factor});

Express tile width relative to font size

Unlike $tile-width we can use the CSS property font-size outside of the media query that defines it. Or at least we can refer to its value: 1em. Since font-size = $tile-width * $font-size-factor we can express the tile width in ems too, as:

$width-in-ems: 1em / #{$font-size-factor};

That is weird. We calculated font-size based on tile width, and then calculate tile width based on font-size. But in the process we changed from pixel units to ems, and we use 1em as a variable, independent of which media query applies. We now have a constant expression for tile width.

Now we can set the heights of the tile and its parts as follows:

.tile {
	height: calc(1.5  * #{$width-in-ems});
	padding-top: calc(0.8 * #{$width-in-ems});

	figure {
        max-height: calc(0.75  * #{$width-in-ems});
	}
}

Other layouts

If the viewport is too small, the tiles will stack.

Tablet layout. Two columns take up 80% of the viewport width.

Mobile layout. Two columns take up all viewport width minus fixed margin.

The calculation of font-size for the various layouts is as follows:

   // 1 column
$tile-width: calc(100vw - #{$grid-gutter-width} - 2 * #{$m});
font-size: calc(#{$tile-width} * #{$font-size-factor});

@include media(mobile) {
    // 2 columns
    $tile-width: calc((50vw - #{$grid-gutter-width}) - #{$m});
    font-size: calc(#{$tile-width} * #{$font-size-factor});
}

@include media(tablet) {
    // 2 columns, more margin
    $tile-width: calc((80vw - 2 * #{$grid-gutter-width}) / 2);
    font-size: calc(#{$tile-width} * #{$font-size-factor});
}

@include media(desktop) {
    // 3 columns
    $tile-width: calc(80vw / 3 - #{$grid-gutter-width});
    font-size: calc(#{$tile-width} * #{$font-size-factor});
}

@include media(wide) {
    // 3 columns, but the width of the container is limited
    font-size: 1em;
}