Images look bad with perfect paragraph width

Question

I'm working on a WordPress template and trying to maintain perfect line width of ~70 characters. My blog has a lot of posts and most of the post contain at least one image per paragraph, usually more. So the site is quite media-heavy.

1. BAD

Screenshot above shows post content view with wrapper set to be 1140px wide, it's extremely hard to read as there are up to 150 characters per line. Maybe at first everything looks a-okay but in reality it's extremely tiring to read only after a few lines.

2. GOOD (?)

And here paragraphs are squashed to 700px what gives quite pleasant 50-80 characters per line.

In my opinion it looks quite alright but I'm not sure if it's okay if the images are so much wider than text (they're still at 1140px)? It looks fine at first but when I'm scrolling through 10 images per post my eyes are jumping from the middle of the page (text) to the left (images) and that's becomes irritating quickly. Or maybe I'm overreacting and everything is in order?

3. MIXED (?)

Justifying the text might help here a little but nobody wants to read justified text. Also I feel like the images are way too small a 700px width, everything looks really compressed. I think it might be even worse than point 1, but I'm not sure.

My question is - how to tackle this issue? Is number 2 okay in your opinion? Maybe I should change something? Typography is really hard and any hints would be highly appreciated!

Answer 1

It's not easy to propose an answer without seeing all the visual page content. These are some general concepts.

The design problem is not the text, in fact the statement of the question says that it already has a solution: a maximum of 50-80 characters per line. The problem is the container frame and the structural lines created by the images.

There's a container frame defined by the side shadows and a central three columns partition given by the image frames. This establishes a strong structure conditioning the whole design, which causes the text column to float by not respecting any of these lines.

In this design as it is now proposed, the text is subordinate to the images and there should be a balance between both. This balance is achieved by breaking the hegemony of these strong structural lines. In fact, removing the container frame helps a lot to the visual quality:

---

The following examples are exaggerated proposals to break these vertical structural lines.

Reduce the strength of vertical structural axes

A strong horizontal container frame eliminates any emerging axis of its content.

Suppress "Cartesianity"

An extreme way to eliminate any structural axis

Add dynamism

Breaking the repetition pattern created by the three equal images benefits the design. In this example, not only suppresses the emerging structural lines but also helps defining the text frame:

• The left image central axis matches the text left alignment margin

• The second image left edge matches the text left alignment

• The third image central axis matches the right alignment line of the text.

Answer 2

There is nothing wrong with breaking the images outside the paragraph width, in fact, in many ways, it enhances aesthetic appeal. I guess on mobile it would all be the same width. But this technique of breaking things out of the paragraph width- I've seen many well known news platforms do this.