try to scale up small font.

try to scale up small font.

by kanonji

HTML

<div class="wrapper">
  <h2>普通に20px</h2>
  <div id="not-scaled">
    <p>
      私はほかできるだけこういう混同人としてのの所をありですでし。ちっとも十月から活動順はまあそのお話しですだっでもを言い直すてしまっだがも供かい摘んますたて、そうにはすですでますです。
    </p>

    <p>個人が思うんのは単に毎号でたしかまいんた。</p>
  </div>
</div>

<div class="wrapper">
  <h2>10px x 2</h2>
  <div id="scaled">
    <p>
      私はほかできるだけこういう混同人としてのの所をありですでし。ちっとも十月から活動順はまあそのお話しですだっでもを言い直すてしまっだがも供かい摘んますたて、そうにはすですでますです。
    </p>

    <p>個人が思うんのは単に毎号でたしかまいんた。</p>
  </div>
</div>

<div class="wrapper">
  <h2>普通に10px</h2>
  <div id="small">
    <p>
      私はほかできるだけこういう混同人としてのの所をありですでし。ちっとも十月から活動順はまあそのお話しですだっでもを言い直すてしまっだがも供かい摘んますたて、そうにはすですでますです。
    </p>

    <p>個人が思うんのは単に毎号でたしかまいんた。</p>
  </div>
</div>

CSS

html{
  font-size: 62.5%;
  font-family: 'ＭＳ Ｐゴシック';
}
.wrapper{
  margin-bottom: 1rem;
  padding: 1rem;
}

#not-scaled{
  font-size: 2rem;
}

#scaled{
  font-size: 1rem;
  width: 50%;
  transform: scale(2);
  transform-origin: left top;
}

#small{
  font-size: 1rem;
}