На дворе 2014 год, нас окружает огромное количество источников информации: блоги, сводки новостей, научные и развлекательные статьи, познавательная литература.

Мозг сегодняшнего пользователя приспособлен обрабатывать большие объемы информации за короткое время. Потому, что мы все очень заняты, все время куда-то спешим и просто не можем себе позволить тратить время на изучение больших скучных энциклопедических статей.

Поэтому, при публикации материалов в Интернете, старайтесь соблюдать общие рекомендации:

  • максимально выжимать всю "воду" из текста;
  • со всех сторон задайте просторные поля;
  • верстайте тексты блоками (текст, растянутый по всей ширине экрана труден для восприятия);
  • нежелательно делать ширину блока (колонки) более 25 см;
  • не стоит выравнивать текст по ширине;
  • фотографию или картинку лучше разместить в самом верху страницы;
  • если нужны подписи - располагайте их под рисунком;
  • активно используйте буллиты (форматированные списки);
  • схематичные рисунки (пиктограммы);
  • разбавляйте текст графикой;
  • инфографика.

Все эти приемы значительно повышают шансы того, что ваш текст будет прочитан и осознан пользователем.

Но что делать, если вы всё-таки вынуждены расположить довольно большой объем текста?

Наш мозг устроен так, что ему проще воспринимать тексты, когда они форматированы в виде колонок. Сам по себе большой объем информации изначально отпугивает человека, однако, разбивая его на колонки и логические разделы, мы делаем текст гораздо привлекательнее.

Указанный ниже способ скорее актуален для печатных изданий, где остро стоит вопрос максимально эффективно расположить информацию: газеты, буклеты, рекламные листовки, и т.д.

Однако, в некоторых случаях, данное решение окажется востребованным и в Интернете.

Итак, приступим. С использованием CSS3 верстка колонками стала легко реализуема: прописываем стиль div-у, который необходимо разбить на колонки:

CSS: 
<style> 
.columns {
	text-align: justify;
	font-size: 16 pt;
	-moz-column-count: 4;
	-moz-column-gap: 1 em;
	-moz-column-rule: 1px solid black;
	-webkit-column-count:4;
	-webkit-column-gap: 1 em;
	-webkit-column-rule: 1 px solid black;
	column-count:4;
	column-gap:1em;
	column-rule: 1px solid black;
}
</style>

HTML: 
<div class="columns">Здесь ваш текст с разбиением на колонки.</div>

Указанный способ универсален и работает на всех современных браузерах.

text-align задает выравнивание текста, в данном случае - по ширине.
column-count - число колонок
column-gap - интервал между колонками
column-rule - стиль разделителя колонок

Префиксы moz и webkit необходимы для корректного отображения в браузерах Mozilla (Firefox) и Webkit (Safari, iOS, Google Chrome, Android).