Improving Readability with MatchHeight.js

MatchHeight.js is a neat jQuery plugin that can be used to fix the height of elements on a page.

In this tutorial I will use the plugin to ensure all of titles on the page maintain an equal height, providing consistent spacing and improving readability.

So, what’s the problem?

Let’s say we have a list of movie titles, descriptions and dates shown in a row of columns on a page. Typically, stacking each of these elements would result in the content appearing directly underneath each other.

The Problem

However, that can cause usability issues for the reader.

Sure, reading vertically through each title, description and date is not an issue, but, the reality is that most users will not read the content throughly, they in fact first read horizontally - scanning quickly from left to right, looking for sub headings and critical information following an F-Shaped Pattern, only after finding something of interest do they read vertically.

Improving readability

By simply equalling the height of the titles, and the descriptions we are able to align each of the elements onto a horizontal grid - this additional whitespace improves consistency and now our users can easily scan through the content.

The Proposed Solution

Building the solution with MatchHeight.js

Download MatchHeight.js.

jQuery is required so make sure that is included first.

<script src="jquery.matchHeight.js" type="text/javascript"></script>

Build your page layout, in our case we will use three columns in a row. Each column contains a .title, .description and .label element. We will use flexbox and calc to create the column layout and make it responsive.

HTML

<div class="row">
  <div class="column">
    <h2 class="title match" data-mh="title">Citizen Kane</h2>
    <p class="description" data-mh="desc">The fresh, sophisticated, and classic masterpiece, Citizen Kane, is probably the world's most famous and highly-rated film.</p>
    <div class="label">1941</div>
  </div>
  <!-- Repeat column three times --> 
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

html,
body {
  background: #39b54a;
  color: white;
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}
.row {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 1rem;
}
.column {
  width: calc(100% - 2rem);
  margin: 1rem;
  
  @media only screen and (min-width: 500px) {
    width: calc(50% - 2rem);
  }
  @media only screen and (min-width: 680px) {
    width: calc(33.333334% - 2rem);
  }
}

Now add some element styling:

.title {
  font-size: 2.1rem;
  margin-bottom: 1rem;
}
.description {
  margin-top: 0;
  margin-bottom: 1rem;
}
.label {
  display: inline-block;
  padding: .15rem .6rem;
  border: 2px solid white;
  font-size: .875rem;
}

Trigger the MatchHeight.js plugin with a script that runs on page load:

//Match title height
function MatchHeight() {
  $('.match')
  .matchHeight({})
  ;
}

//Functions that run when all HTML is loaded
$(document).ready(function() {
  MatchHeight(); 
});

This script will look for the all elements with the .match class, find the tallest and resize all others to equal it. You will see that we added this to class to our .title element.

Now that the MatchHeight plugin has been triggered on the page we can make it also resize our .description elements - we do this using the data-mh="group-name" attribute. This attribute will group all elements with the same ‘group-name’, check for the tallest and resize the rest to match.

Note that there is no need to apply the .match class on any other elements - just use the data attribute like this example:

...
<h2 class="title match" data-mh="title">Citizen Kane</h2>
<p class="description" data-mh="desc">The fresh, sophisticated, and cl...</p>
...
<h2 class="title match" data-mh="title">The Bridge on the River Kwai</h2>
<p class="description" data-mh="desc">The memorable, epic World War II...</p>
...
<h2 class="title match" data-mh="title">Star Wars, Episode IV: A New Hope</h2>
<p class="description" data-mh="desc">One of the most popular, profita...</p>

Now we have a page with 3 columns with 3 equal height titles and 3 equal height description.

Check out the pen below for the full code.

Full Code

See the Pen Equal Height Titles - MatchHeight.js by Matthew Elsom (@matthewelsom) on CodePen.

Why not just use CSS?

Building a robust and responsive framework that equally sets the height for arbitrary content in pure CSS is difficult, it can partly be done using flexbox. MatchHeight.js is a fast and browser compatible way to do it without hacks or trickery.

Of course you will still need to ensure your layout is usable if JavaScript is disabled in the browser.