4

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

enter image description here

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 (?)

enter image description here

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 (?)

enter image description here

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!

10

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.

structure

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, suppressing the container frame helps a lot to the visual quality:

container


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.

horizontal container

Suppress "Cartesianity"

An extreme way to eliminate any structural axis

enter image description here

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 left alignment line of the text.

dynamism

| improve this answer | |
  • 2
    Wow, just learned some handy quick fixes for the future, thanks. – Big_Chair Nov 25 '19 at 11:48
  • 1
    Great response @Danielillo, I came up with horizontal container for media and dynamic solution but more by heart and wasn't sure if that's the right way to go. Thanks a lot, truly exceptional reply. – Wordpressor Nov 25 '19 at 11:52
0

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.