What do you consider "good practice" when it comes to paragraphs?

I am actually very curious about this.
When it comes to paragraphs I feel like the bigger the screen width is, the harder it is to make a paragraph section look nice.
In mobile or tablet view I always use the same rules of not exceeding 15px on the left and right margins and keeping a good line-height that makes it easier on the eyes, while not making too much space.

But when it comes to desktop view, I am never satisfied with what I see. I feel like I either have this wide wall of text that looks like a chore to go through, or I have an “island” of text with a lot of empty space on each side.
I tried adding text boxes side by side, but then I feel like it completely goes against the flow of the page I am making. I have this modenr looking page with fancy headers, sliders etc. and then suddenly I have something that looks like it was taken from a novel.

Of course, having less text to work with would solve my issues completely, but a lot of my customers are either consultants or work in the service industry, so long descriptions of who they are and what they do are things they want included.

What do you guys consider to be a good why of handling text?
Do you have any good examples?

Hi marcliljeqvist,

The web is full of examples, just try them with a press on the F11 key.

You’ll see that the common solution to handle lage text blocks is to set a max-width on the container.

For the page in whole it depends on the content what works in a wide viewport, mostly just keep it fluid and let the user decide what width fit.

2 Likes

I usually try the guideline of no more than 800 to 900 pixels wide as most people don’t like to travel (with their eyes) much further reading a line of text. I’m old school when it comes to content as while I want my website to look great and have all the bells & whistles, but the main thing is the content. It is the reason the user has come to the website in the first place and if they can’t read the content then they will find it elsewhere. I have seen some pretty lousy looking websites, but they have a lot of traffic day in and day out. Their secret to success is CONTENT and I can just imagine the increase in traffic they would get if their website looked really nice. If you think about it Facebook, Twitter and other social media sites really don’t look all that great, but what they all have in common is they let their uses post and read content (text, images and videos) that is easy to read and look at. I am not saying a website should look obnoxious as that will drive away users just a unreadable content.

4 Likes

When responsive design was all the rage I adopted a CSS TLA (Three Letter Acronym) style that covers all platforms. The following works on DIVs, paragraphs, etc

.w88 {width: 88%; max-width: 888px;}
.mga {margin: 0 auto;}

I have since changed from px to em because px is too rigid.

AS Erik said there are a few articles around that can help with this.


You need to think in terms of character width and not page width and keep your line length for your main body text to 55 - 75 characters as a rough guide. This keeps text easy to read and scan and is optimal for usability.

It’s then down to the designer to make a design that works within these constraints and still look good; not always an easy task and requires some skill. Too many developers draw something on paper and then create the site to match a drawing or PSD instead of first defining the content and then designing the site around the content.

Don’t let text get too small on small screen as small text is harder to read on a small device and indeed you may want to increase the body text size on mobile just to make it easier for users.

3 Likes

I bookmarked this page because it has great tips for web typography.

it’s also a good idea to keep in mind the direction of scrolling.

I have seen some “avant guarde” sites in which the content is displayed horizontally , at least on large screens. This sort of allows for columnal reading patterns to develop. ironically, CSS has a proper for that as well ( column-count: )

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.