난독증 친화 타이포그래피

<div class="stage">
  <div class="pane">
    <div class="tag">justify · 촘촘</div>
    <p class="txt tight">Reading a line of text should feel effortless not like decoding a puzzle every single time your eyes move across the page and back again.</p>
  </div>
  <div class="pane">
    <div class="tag">left · 여유</div>
    <p class="txt roomy">Reading a line of text should feel effortless, not like decoding a puzzle every time your eyes move.</p>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:20% 7% 8%;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.txt{margin:0;color:var(--fg);font-size:clamp(9px,2.6vmin,12px)}
.tight{text-align:justify;line-height:1.15;letter-spacing:-.01em}
.roomy{text-align:left;line-height:1.75;letter-spacing:.03em;word-spacing:.06em;max-width:32ch}