Part 5—Typography

29 Adaptive copywriting for different screens

Here is an example showing how we can create the same effect of adaptive copywritings.

We need the following HTML which defines explicitly what content to display for specific screen size.

<div class='leading-sentence'>
  <p class='large-only'>You’re reading a sample site, written by Makzan since 2014. Enjoy!</p>
  <p class='medium-only'>A sample site, written by Makzan since 2014.</p>
  <p class='small-only'>A sample site by Makzan.</p>
</div>

Then, all we need to do is to control the visibility of the class large-only, medium-only and small-only, via the following CSS.

$break-point-medium: 400px;
$break-point-large: 600px;

.leading-sentence {
  text-align: center;
}

@media screen {
  .small-only {
    display: block;
  }
  .medium-only,
  .large-only {
    display: none;
  }
}

@media screen and (min-width:$break-point-medium) {
  .medium-only {
    display: block;
  }
  .small-only,
  .large-only {
    display: none;
  }
}

@media screen and (min-width:$break-point-large) {
  .large-only {
    display: block;
  }
  .small-only,
  .medium-only {
    display: none;
  }
}

License

Adaptive copywriting for different screens Copyright © by makzan. All Rights Reserved.

Share This Book

Notice: 2nd edition update is work-in-progress. See update logs for details.