Повернутый 90° текст на сайте. Мнение.

ZIPL Studio
Дизайн-кабак
3 min readJun 24, 2018

Всем привет! Это первый пост от ZIPL 🎉

Хочу с вами поделиться этой наболевшей темой!

Что сподвигло меня написать эту короткую заметку?

Создавая современный дизайн сайтов, иногда хочется использовать элементы текста, которые повернуты на 90 градусов. Это разбавляет линейность визуального восприятия, когда все в строчку. В общем-то это не плохо, но все чаще сталкиваюсь со спорами про то, как же все-таки правильно разворачивать текст. Как ни крути, но это важный момент (я так считаю), чтобы не терялось удобство считывания коротких надписей.

Как правильно?

Начнем с простого рассуждения «Что такое дизайн сайта?». Дизайн сайта — это по своей сути чертеж, где нанесены отступы, размеры линий, блоков, шрифтов, изображений и т.д. Очевидно, что сетки берут свое очень далекое начало именно из черчения. Исходя из моего рассуждения, я решил найти некоторые ответы и подтверждение моего мнения именно из ГОСТов чертежа.

Чертежи. http://gk-drawing.ru

Как мы видим на примере чертежей (изобр. сверху) из статьи о ГОСТах — все перевернутые подписи наклонены на 90˚ против часовой стрелки. Это является стандартом и является правильным. Я считаю, что в данном случае ГОСТ не дань бюрократии, а стандартизация, которая имеет смысл в визуальном восприятии чертежей, который намного сложнее, чем сайт или приложение.

Важно отметить, что тут не работает логика, что текст должен быть повернут в противоположные стороны относительно центральной оси. Текст должен быть повернут только на 90˚ против часовой независимо ни от чего, если вы хотите достичь комфортного восприятия.

Наглядные примеры

Рассмотрим наглядно как человек считывает информацию, когда надпись повернута по и против часовой стрелки.

Неправильный:

Пример неправильного считывания информации юзером

На gif сверху видно, что чтение получается нелогичным. Сначала мы читаем надпись секции опуская взгляд вниз страницы, затем перескакиваем одну строку, чтобы найти начало следующей надписи. Снова читаем сверху вниз. В итоге возвращаемся через одну строку к привычной Z образной схеме считывания. Это безусловно вызывает раздражение и дискомфорт. Попробуйте сами. Считывание информации получится не цельным.

Правильный:

Пример правильного считывания информации юзером

Тут порядок считывания становится сразу логичным и привычным. Верх букв смотрит в начало страницы (для читающих слева-направо), а низ устремлен в конец страницы справа. Взгляд перескакивает по строкам также привычно, заканчивая прочтение слова “Studio” мы оказываемся вначале контента, к которому относилась эта надпись.

Вывод

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

Текст может быть повернут только на 90° против часовой стрелки

Комментируйте, делитесь своим опытом и мнением 😎

--

--