Text in columns

by | May 30, 2019 | tutorials

Text in columns

by | May 30, 2019 | tutorials

It’s all about UX

As web designers, one of our core objectives is to create a pleasant user experience for those who view our websites.  There are certain best practices that we follow in order to make sure that text is readable, information is easy to find and digest, pages load quickly, etc.  One thing that you may not have taken into account is the number of characters in a line of text.

I am sure you have had a moment, most likely in the mid afternoon, where you saw an email, or a document with a solid block of text, and were discouraged from actually reading it because it seemed that you would need to have a cup of coffee in your hand in order to wade in.  in the same way that having long paragraphs makes text unpleasant to read, having long lines also needdlessly fatigues our users.

I have heard it said that the optimal line length for text is 60-70 characters.  The idea is that if the lines are too short, the eyes get fatigued from going back and forth, and if too long, we have to shift our focust too much for comfort, and it can be difficult to land on the next line when your eyes have so far to travel.  I don’t know that we need to keep to 60-70 characters, but we can try and keep those numbers a little lower than they might be otherwise.

 

Using Divi as an example

I use the Divi WordPress theme for all my websites.  If I were to keep the standard layout options of a 14px text size, and 1080px content width, a single line of text spanning the full width could have upwards of 300 Characters.  That is unpleasant to read.  I am going to take a block of Lorem Ipsum text and demonstrate.  If you’re on mobile, this will loose it’s effect.

/*2 and 3 Column text layout*/
@media only screen and (min-width: 1280px){
.mbc-2-col{
column-count: 2;
column-gap: 60px;
column-rule: 2px solid #ccc;
}
.mbc-3-col{
column-count: 3;
column-gap: 60px;
column-rule: 2px solid #ccc;
}}

Lorem ipsum dolor sit amet, ad velit temporibus mel, ex sit labore accusamus, doming appetere his ad. Voluptua periculis intellegat eos no, nostro consulatu ne eam. Wisi officiis similique sit ei. At quo mentitum moderatius, quem vivendo ocurreret sit ea, sed apeirian referrentur cu. An mel choro similique, mel facilisis periculis posidonium te. Et duo euismod aliquid phaedrum, dicta decore et vix. Dicam bonorum quo in, sed te nostro oporteat reprimique.

Has mundi iudico tacimates an, et eum voluptua singulis ocurreret. Vis eu oporteat adversarium, falli expetendis incorrupte eum cu. Te liber dicit iuvaret mel, vis ne elitr putent mentitum. Te libris mentitum mei. Pri possit reprimique id, vim cu menandri tincidunt consetetur. Ea usu porro nostro nostrud, ex cum viris prodesset sententiae. Nam ut iisque facilis assueverit, ei posse corpora per, has omnis aperiri adolescens ad.

Sed vide omnes abhorreant et. Bonorum suscipit perfecto has te, stet zril est in. Ut inani feugait assentior has, quaeque qualisque nec et, eam illum zril intellegam ad. Aeque aperiri vis ea. Mel epicuri dignissim te, an mei tation volumus omnesque, in eum vidit dicunt expetenda.

Has cu etiam animal. His ei partiendo urbanitas, ex cum graeci vocibus theophrastus, eu mei dicta malorum invenire. Nam labores accumsan explicari at, graece persequeris eu mel, purto velit temporibus ad pro. Ea tantas essent ocurreret vel, eu rebum urbanitas pri. Nec lorem iudico ad.

Te simul invidunt pro. Solum nominati referrentur ei pri, alienum officiis te quo. Quo nonumy aperiam ut, an oblique omnesque erroribus his. Eos at vide liber. Quot probatus sea ut. Cu amet tibique conceptam quo. Atqui veniam sed ex, bonorum volutpat definitiones ius cu.

Vix suas animal pertinacia te, nam veri nulla persequeris eu, nulla sapientem periculis eum at. Eos vide noster commodo eu, essent persius id pro. Has an quidam disputando.

2 column Layout

Rather than try to figure out where the half-way point of the text is, and split it, we can use the CSS in the code block above.  we just need to add the CSS class of mbc-2-col or mbc-3-col to the the text module in order to get it to split.  The code is also placed within a media query so that the text will transition to a single column on mobile where the line length would become problematically short.

See the two and three column text blocks below.

Give the text the CSS class of mbc-2-col

Lorem ipsum dolor sit amet, ad velit temporibus mel, ex sit labore accusamus, doming appetere his ad. Voluptua periculis intellegat eos no, nostro consulatu ne eam. Wisi officiis similique sit ei. At quo mentitum moderatius, quem vivendo ocurreret sit ea, sed apeirian referrentur cu. An mel choro similique, mel facilisis periculis posidonium te. Et duo euismod aliquid phaedrum, dicta decore et vix. Dicam bonorum quo in, sed te nostro oporteat reprimique.

Has mundi iudico tacimates an, et eum voluptua singulis ocurreret. Vis eu oporteat adversarium, falli expetendis incorrupte eum cu. Te liber dicit iuvaret mel, vis ne elitr putent mentitum. Te libris mentitum mei. Pri possit reprimique id, vim cu menandri tincidunt consetetur. Ea usu porro nostro nostrud, ex cum viris prodesset sententiae. Nam ut iisque facilis assueverit, ei posse corpora per, has omnis aperiri adolescens ad.

Sed vide omnes abhorreant et. Bonorum suscipit perfecto has te, stet zril est in. Ut inani feugait assentior has, quaeque qualisque nec et, eam illum zril intellegam ad. Aeque aperiri vis ea. Mel epicuri dignissim te, an mei tation volumus omnesque, in eum vidit dicunt expetenda.

Has cu etiam animal. His ei partiendo urbanitas, ex cum graeci vocibus theophrastus, eu mei dicta malorum invenire. Nam labores accumsan explicari at, graece persequeris eu mel, purto velit temporibus ad pro. Ea tantas essent ocurreret vel, eu rebum urbanitas pri. Nec lorem iudico ad.

Te simul invidunt pro. Solum nominati referrentur ei pri, alienum officiis te quo. Quo nonumy aperiam ut, an oblique omnesque erroribus his. Eos at vide liber. Quot probatus sea ut. Cu amet tibique conceptam quo. Atqui veniam sed ex, bonorum volutpat definitiones ius cu.

Vix suas animal pertinacia te, nam veri nulla persequeris eu, nulla sapientem periculis eum at. Eos vide noster commodo eu, essent persius id pro. Has an quidam disputando.

Give the text the CSS class of mbc-3-col

Lorem ipsum dolor sit amet, ad velit temporibus mel, ex sit labore accusamus, doming appetere his ad. Voluptua periculis intellegat eos no, nostro consulatu ne eam. Wisi officiis similique sit ei. At quo mentitum moderatius, quem vivendo ocurreret sit ea, sed apeirian referrentur cu. An mel choro similique, mel facilisis periculis posidonium te. Et duo euismod aliquid phaedrum, dicta decore et vix. Dicam bonorum quo in, sed te nostro oporteat reprimique.

Has mundi iudico tacimates an, et eum voluptua singulis ocurreret. Vis eu oporteat adversarium, falli expetendis incorrupte eum cu. Te liber dicit iuvaret mel, vis ne elitr putent mentitum. Te libris mentitum mei. Pri possit reprimique id, vim cu menandri tincidunt consetetur. Ea usu porro nostro nostrud, ex cum viris prodesset sententiae. Nam ut iisque facilis assueverit, ei posse corpora per, has omnis aperiri adolescens ad.

Sed vide omnes abhorreant et. Bonorum suscipit perfecto has te, stet zril est in. Ut inani feugait assentior has, quaeque qualisque nec et, eam illum zril intellegam ad. Aeque aperiri vis ea. Mel epicuri dignissim te, an mei tation volumus omnesque, in eum vidit dicunt expetenda.

Has cu etiam animal. His ei partiendo urbanitas, ex cum graeci vocibus theophrastus, eu mei dicta malorum invenire. Nam labores accumsan explicari at, graece persequeris eu mel, purto velit temporibus ad pro. Ea tantas essent ocurreret vel, eu rebum urbanitas pri. Nec lorem iudico ad.

Te simul invidunt pro. Solum nominati referrentur ei pri, alienum officiis te quo. Quo nonumy aperiam ut, an oblique omnesque erroribus his. Eos at vide liber. Quot probatus sea ut. Cu amet tibique conceptam quo. Atqui veniam sed ex, bonorum volutpat definitiones ius cu.

Vix suas animal pertinacia te, nam veri nulla persequeris eu, nulla sapientem periculis eum at. Eos vide noster commodo eu, essent persius id pro. Has an quidam disputando.

This layout may not work for really long pieces of text, espeically with a lot of headings in them, but there is a reason why newspapers and magazines have long been laid out in columns; it just makes the content easier to read.

Perhaps next time you’re doing a web design with a large block of text, you might consider using this trick to make it easier to read and even give some visual interest.  

By Steve Law
Steve founded Mission Bell Communications in 2015. Before that Steve worked in the technology industry and also worked for a nonprofit organization in Mexico. Steve has always loved technology, and all things creative.