My Website's Readability is Lacking? Solved with Pretendard Font and Code Line Wrapping (2026)

The website's font felt a bit dull, and I was bothered by text getting cut off in code blocks. This post is a record of how I tackled those two issues back in July 2026.

Attempts and Pitfalls

At first, I thought I could just swap out the font. I started the process of changing from the old, classic Myeongjo typeface to the more modern Pretendard font.

/* Original font settings (example) */
body {
  font-family: 'Nanum Myeongjo', serif;
}

/* Attempting to apply Pretendard font */
body {
  font-family: 'Pretendard', sans-serif;
}

The font itself was fine, but the problem was with the code blocks in my blog posts. Long lines of code were extending beyond the screen and getting cut off.

<pre><code>
// A very long line of code goes here. If this line exceeds the screen width, it will be cut off.
// This problem persisted even after changing to the Pretendard font.
</code></pre>

That's when I started struggling for over three hours. I tried changing the CSS white-space property to pre-wrap, and I fiddled with overflow-wrap, but nothing worked as expected. I initially thought the font change and the code block text clipping were separate issues, but they were intertwined.

The Cause

Ultimately, the problem was a combination of the CSS white-space property setting and the word-break property. white-space: pre-wrap; is supposed to maintain whitespace and line breaks while automatically wrapping long words, but it seemed to conflict with word-break: break-all;, leading to unexpected behavior or situations where neither was properly applied. The Pretendard font itself, with its subtle differences in character spacing and width compared to the previous font, also played a role in affecting the layout.

The Solution

The cleanest solution I found was to set white-space to pre-wrap and adjust word-break to break-word.

/* Blog code block styles */
pre {
  white-space: pre-wrap; /* Preserve whitespace and line breaks, wrap long words automatically */
  word-break: break-word; /* Wrap long words */
  overflow-wrap: break-word; /* Wrap long words (similar to word-break) */
}

/* Overall body font settings */
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

I loaded the Pretendard font itself via CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orval/stickers/dist/fonts/pretendard/pretendard.css">

With this setup, even long code lines wrapped naturally, significantly improving readability. I also went through multiple pages to fix minor layout shifts caused by the font change.

Results

• Readability across the website improved noticeably.
• The site looked much more modern and clean thanks to the Pretendard font.
• Text clipping in blog code blocks was almost entirely eliminated.

Takeaways — Don't Fall Into the Same Trap

• [ ] When changing fonts, don't just see it as a design element; consider its impact on overall readability and layout.
• [ ] The text wrapping issue in code blocks is likely solvable with a combination of white-space: pre-wrap; and word-break: break-word;.
• [ ] After changing fonts, always check multiple pages to identify any broken layouts or awkward sections.
• [ ] When loading fonts via CDN, make sure to verify the font file path accurately.

---

💬 This is part of *Riel** — a full AI product I'm building solo, in public (failures and all). Read more build logs → · See the product →*

Comments

[Xvibelabs]

Great write-up! Readability and clean font setups are so crucial for modern blogs, yet so many sites get this wrong. Getting code block line wrapping right in CSS (with clean overflow handling and line-height spacing) can be a real headache. We actually struggled with text wrapping and code block readability details on our projects, which led us to compile a set of clean, responsive layout templates. It's awesome to see how Pretendard solved this for you!

[박준희]

Thanks for the kind words! I couldn't agree more—getting the CSS right for code blocks is always a headache. It's really interesting to hear that you've compiled your own templates to solve these layout issues. I'd love to check them out if you have a link or a repo to share! Thanks for stopping by.