Расположение текста: Как выровнять текст по центру в html

Авторские права © Apple Inc., 2003, 2014. Все права защищены. Условия использования | Политика конфиденциальности | Обновлено: 2014-02-11

Искусство слова: как отличная компоновка текста может изменить ваш дизайн

Логотипы, веб-сайты и многое другое…

Логотипы, веб-сайты, обложки книг и многое другое…

Получить дизайн

Отличный UX-дизайн — это нечто большее, чем выбор красивых картинок. Пришло время перестать пренебрегать макетом текста. Искусство слова заключается в том, как слова выглядят на странице или на экране.

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

Приступим!

Почему расположение текста имеет значение

Слова — это работа копирайтера, верно?

Больше нет.

Графические дизайнеры должны быть более гибкими, чем когда-либо, нося несколько шляп для каждого конкретного проекта. Не волнуйтесь, копирайтинг и дизайн идут рука об руку, и мы начинаем видеть рост числа гибридных должностей, таких как «UX-писатель». несколько причин, чтобы мотивировать вас.

1. Ваши читатели заботятся… много

Было доказано, что неуклюжие макеты и огромные блоки текста приводят к более высокому показателю отказов (люди отказываются от вашего сайта). Люди обычно бегло просматривают веб-страницы в поисках информации, поэтому плохая типографика, неправильный размер шрифта и неправильный интервал могут сильно утомить чтение. Это плохой второй раз: вы потеряли пользователя, а ваш читатель пропустил ваш потрясающий контент.

В мире GIF-файлов, 7-секундных видео и мемов вы конкурируете с большим количеством медиа, и если ваша копия не увлечет пользователя, вы его потеряете. Читатель всегда прав. Предоставьте пользователям макет текста, который они хотят.

2. Ваша копия — лодка, а ваш дизайн — океан

Они созданы друг для друга, но должны работать вместе.

Отличный дизайн может сделать веб-сайт привлекательным, но если пользователи не читают ваш контент, возможно, вы обречены на провал в маркетинге. То же самое и с вашим письменным контентом. Без визуальных эффектов и хорошего дизайна ваша копия останется незавершенной.

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

Все дело в том, чтобы найти золотую середину. Держите его в чистоте, держите его в чистоте, держите его читабельным .

3. Легко сделать. Большие результаты.

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

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

Как освоить макет текста

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

1. Выбирайте подходящие цвета

Используйте разные цвета, чтобы текст выделялся, но убедитесь, что вы все сделали правильно. Текст, который невозможно прочитать, противоречит цели того, что мы делаем. Используйте такие инструменты, как Adobe Color, чтобы установить цветовую палитру для своего проекта с цветами, которые дополняют друг друга.

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

2. Соедините шрифты

Единственное, что может быть хуже несовпадения цветов, — это несовпадение шрифтов.

В редких случаях для обеспечения резкого контраста между заголовком/заголовком и основным текстом могут использоваться совершенно разные шрифты. Но часто это просто выглядит некрасиво.

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

Хорошей новостью является то, что вам не нужно быть мастером типографики, чтобы понять это. С помощью бесплатных инструментов, таких как Typewolf, вы можете автоматически находить потрясающие примеры подходящей типографики, чтобы вы могли найти идеальные стили шрифтов, которые хорошо сочетаются друг с другом и подходят вашему бренду.

3. Правильно используйте заголовки

Теги заголовков являются общей функцией большинства письменных платформ. Они используются для того, чтобы ваш пост выглядел хорошо, позволяя пользователям быстро сканировать ваш контент. Они также важны для поисковой оптимизации (SEO) и обеспечения того, чтобы ваш контент появлялся в Google.

Когда Google просматривает ваш сайт, их система ищет теги заголовков, которые обычно указывают на то, что контент хорошо организован. Боты Google предполагают, что этот тип контента более удобочитаем, и поднимают его в результатах поиска.

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

Для цифрового контента теги заголовков обычно идут от самого большого (h2) к самому маленькому (иногда вы увидите до H6). Стремитесь к обратной пирамиде, основанной на важности и структуре абзаца. Используйте h2 для основных заголовков, h3 для тем, h4 для подтем и h5 для мелких деталей.

Вот пример:

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

Шаги, которые необходимо предпринять (h3)

Это тема, открывающая новый угол для обсуждения и исследования.

Используйте модель обратной пирамиды (h4)

Это подтема, потому что я исследую вопрос в этой теме.

Тайные заговоры в копирайтинге (h5)

Это касательная к подтеме. Идеально, если вы хотите завести читателя дальше в кроличью нору.

4. Каратэ рубит ваши абзацы

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

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

Более короткие предложения и абзацы удерживают внимание читателя и делают ваш контент более удобным для сканирования. Не каждый может поднять ноги и потратить 10 минут на чтение статьи. Большинство из нас приходят на страницу, чтобы найти какую-то информацию, а затем уходят оттуда.

5. Используйте маркеры и цифры

Это так просто. И вот почему:

1. Маркеры разбивают макет текста.
2. Они обеспечивают короткие пакеты информации.
3. Списки идеально подходят для фактов или деталей.

Кроме того, старайтесь, чтобы ваши маркеры выглядели хорошо.

• Общее эмпирическое правило заключается в том, что если маркер длиннее одной строки, он слишком длинный для маркера. (Упс!)

6. Смешайте контент

Есть причина, по которой такие сайты, как Medium, Buzzfeed и Upworthy, становятся все более популярными: они снова сделали письменный контент привлекательным.

В общем, вы должны стараться давать читателям возможность отдохнуть от блоков текста через каждые 250 слов. Конечно, вы можете сделать больше, но постарайтесь найти баланс. Все GIF-файлы и отсутствие копии делают Джека неосведомленным читателем.

Цитаты

Я большой поклонник блочных цитат! Они действительно помогают разбить блоки текста, дать глазам читателей отдохнуть и выделить важные предложения. Кроме того, они просто отлично выглядят.

Визуальные материалы

Будь то ответ Quora, публикация на Medium или веб-страница, визуальный контент значительно увеличивает силу вашего контента.

Фотографии, графика, GIF-файлы, инфографика и все остальное — отличные инструменты для поддержания интереса читателя. Рост Buzzfeed говорит сам за себя.

Жирный шрифт отлично подходит для того, чтобы выделить определенное слово или фразу у читателя. Используйте его, чтобы ваш читатель перестал пролистывать.

Курсив можно использовать, чтобы подчеркнуть мысль, намекнуть на тон или даже передать диалог.

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

Подчеркивания сложны для цифрового контента. Их можно спутать со ссылками, но вы все равно можете использовать их для выделения или заголовков.

Это мощное оружие от до развертывание в искусство слова но злоупотребление им может привести к содержание внешний вид непрофессиональный и загроможденный .

Если все выделяется, то, в конечном счете, ничего не выделяется, поэтому зарезервируйте их для вещей, к которым вы действительно хотите привлечь внимание читателя.

Начните создавать красивый письменный контент

Все больше и больше платформ измеряют успех контента по количеству прочтений, а не просто количеству людей, просмотревших статью.