Testing widths of popular Google UI fonts

Compared against the current system stack.

by jorgeluis

HTML

<h2>
This is the headline (system)
</h2>
<p>
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
</p>
<p>
  Queen Elizabeth’s proxy waved off Mick Jagger.<br>
  <b>Queen Elizabeth’s proxy waved off Mick Jagger.</b>
</p>

<div class="lato">
  <h2>
    This is the headline (lato)
  </h2>
  <p>
    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
  </p>
  <p>
    Queen Elizabeth’s proxy waved off Mick Jagger.<br>
    <b>Queen Elizabeth’s proxy waved off Mick Jagger.</b>
  </p>
</div>

<div class="nunito">
  <h2>
    This is the headline (nunito)
  </h2>
  <p>
    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
  </p>
  <p>
    Queen Elizabeth’s proxy waved off Mick Jagger.<br>
    <b>Queen Elizabeth’s proxy waved off Mick Jagger.</b>
  </p>
</div>

<div class="opensans">
  <h2>
    This is the headline (opensans)
  </h2>
  <p>
    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
  </p>
  <p>
    Queen Elizabeth’s proxy waved off Mick Jagger.<br>
    <b>Queen Elizabeth’s proxy waved off Mick Jagger.</b>
  </p>
</div>

<div class="ptsans">
  <h2>
    This is the headline (ptsans)
  </h2>
  <p>
    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
  </p>
  <p>
    Queen Elizabeth’s proxy waved off Mick Jagger.<br>
    <b>Queen Elizabeth’s proxy waved off Mick Jagger.</b>
  </p>
</div>

<div class="roboto">
  <h2>
  This is the headline (roboto)
  </h2>
  <p>
  ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
  </p>
  <p>
    Queen Elizabeth’s proxy waved off Mick Jagger.<br>
    <b>Queen Elizabeth’s proxy waved off Mick Jagger.</b>
  </p>
</div>

CSS

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

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.lato {
  font-family: 'Lato', sans-serif;
}
.nunito {
  font-family: 'Nunito', sans-serif;
}
.opensans {
  font-family: 'Open Sans', sans-serif;
}
.ptsans {
  font-family: 'PT Sans', sans-serif;
}
.roboto {
  font-family: 'Roboto', sans-serif;
}

div {
  margin-top: 50px;
}