6 способов улучшить типографику на сайте


Содержание материала:

Типографика для сайта — как подготовить

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

UI-kit

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

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

Вскоре мы перестали этим заниматься, и в итоге UI-kit стал появляться не до этапа оформления прототипов, а во время. На этом этапе — этапе отрисовки, хочешь не хочешь, а появляются общие элементы. Из них и получается стойкий UI-kit, так как эти элементы интерфейса уже проверены и прекрасно вписываются в общий вид сайта.

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

Типографика

Одной из основных целей большинства сайтов является донесение информации до конечного пользователя. Доносят, конечно же, текстом. Вид заголовков, шрифт, кегль, межстрочное расстояние, отступы между абзацами — эти параметры влияют на лёгкость восприятия информации. Если сайт с большим количеством текста, то кегль в нем стоит использовать побольше. Если это не простой сайт, а сложная CRM система с большим количеством графиков, то можно кегль поменьше, но сразу нужно уделять больше внимания межбуквенному расстоянию, так как при использовании некоторых шрифтов и небольшого кегля буквы сливаются друг с другом, что приводит к сложностям чтения.

Компания Apple разработала прекрасный шрифт SanFrancisco: при использовании этого шрифта при небольшом кегле межстрочное расстояние увеличивается автоматически.

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

Так для смартфона используем 320px по ширине (хотя последняя статистика говорит, что пора переходить к 360px). Для планшета используем ширину в 768px, а для обычного дисплея — 1366px.

Эти три файла содержат как минимум следующие элементы:

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

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

    , так как это основная часть типографики сайта. Затем — заголовки от меньшего к большему. А далее — остальное.

    В итоге получается стройная типографика для сайта, представленная в трёх файлах: paragraph-desktop, paragraph-tablet и paragraph-phone.

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

    Бонус для тех, кто дочитал до конца

    Рендер шрифтов в операционных системах отличается. Так один и тот же шрифт выглядит по разному в Windows и OS X. Ещё больше он отличается в Photoshop.

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

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

    YourStep

    Блог студентов Компьютерной Академии «Шаг»

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

    28 Вторник Дек 2010

    Метки

    Множество людей, включая дизайнеров, думают, что типографика – это только выбор гарнитуры, размера шрифта и того, должен ли он быть нормальным или полужирным. Для большинства людей на этом все и заканчивается. Но для получения хорошей типографики нужно гораздо больше и как правило это детали, которые дизайнеры часто игнорируют.
    Эти детали дают дизайнеру полный контроль, позволяет ему создавать прекрасные и последовательные с точки зрения типографики решения в дизайне. Хотя все это применимо для различных типов носителей, в этой статье мы сосредоточимся на том, как их применить к веб-дизайну с использованием CSS. Вот 8 простых путей с помощью CSS улучшить типографику и, следовательно, общее удобство дизайна.

    1. Размеры

    Размер наборной строки. Для глаза читателя, длинные или короткие строки утомительны. Длинные – разрушают ритм, так как читателю трудно найти следующую строку текста. Единственная ситуация, в которой приемлемы короткие строки – малое количество текста. Для наилучшей читабельности длина строки должна быть между 40 и 80 символами, включая пробелы. Для дизайна с одной колонки текста 65 символов – идеальны.

    Простой способ вычислить длину строки – использовать метод Роберта Брингхарста (Robert Bringhurst’s), который умножает размер шрифта на 30. То есть, если размер шрифта 10px, умножая его на 30 получим 300px или, приблизительно, 65 символов в строке. Код будет выглядеть приблизительно как:
    p <
    font-size: 10px;
    max-width: 300px;
    >
    Я использую px так как это значительно упрощает расчеты, но можно использовать и em.

    2. Интерлиньяж

    Интерлиньяж это пространство между строками текста в теле заметки и оно играет большую роль для читабельности. Правильное разделение строк, позволяет читателю проще следить за строкой и улучшает внешний вид текста. Интерлиньяж так же изменяет типографический цвет текста, который является плотностью или же тоном композиции.
    На интерлиньяж влияет множество факторов: гарнитура, размер шрифта, его полнота, обстоятельства(?), длина строки, расстояние между словами и т.д. Чем длиннее строка, тем больше интерлиньяж. Чем больше размер шрифта, тем меньше интерлиньяж. Хорошее правило – устанавливать интерлиньяж на 2-5pt больше, чем размер шрифта, в зависимости от гарнитуры. Так что если шрифт 12pt, то для веб интерлиньяж должен быть в 15pt или 16pt.

    Определение верного интерлиньяжа требует определенной ловкости, но ниже приведен пример того, на что должен быть похож ваш код:
    body <
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    >

    3. Обработка кавычек

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

    Это легко достигается с помощью CSS, используя элемент blockquote:
    blockquote <
    text-indent: -0.8em;
    font-size: 12px;
    >

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

    4. Вертикальный ритм

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

    Для того что бы поддерживать вертикальный ритм с помощью CSS, нужно, что бы расстояние между элементами и межстрочное расстояние (интерлиньяж) был равен размеру сетки базовых линий. Допустим, вы используете 15px сетку базовых линий, подразумевая, что между каждой линией сетки 15px. Интерлиньяж будет 15px и расстояние между параграфами тоже будет 15px. Вот пример:
    body <
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    line-height: 15px;
    >

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

    5. Верхние и нижние висячие строки

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

    К несчастью, нет простого способа предотвратить висячие строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t, плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.

    6. Выделение

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

    Вот несколько способов выделения с помощью CSS:
    span <
    font-style: italic;
    >

    h2 <
    text-transform: uppercase;
    >

    b <
    font-variant: small-caps;
    >
    Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.

    7. Масштаб

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

    Пример типографического масштаба определенного в CSS:
    h1 <
    font-size: 48px;
    >

    8. Подчищаем рваные края

    Когда создается блок текста с выравниванием по левому или правому краю, не забудьте подчистить рваные края (неровные строки) и сбалансировать текст без всяких неожиданных «дыр» или неуклюжих форм текстовых блоков. Рваные края могут отвлекать читателя. Хороший край «мягкий», равномерный, без слишком длинных, или слишком коротких строк. Нельзя контролировать это с помощью CSS, так что для получения хороших краев надо вносить в текст ручные правки.

    Можно улучшить края с помощью переносов, но к сожалению CSS тут бессилен. Возможно, в «ближайшем» будущем CSS3 обеспечит некоторый контроль… Но несмотря на это – не все потеряно. Есть ряд решений на стороне сервера и на стороне клиента, которые осуществляют автоматическую расстановку переносов. Например phpHyphenator, Hyphenator или online генераторы.

    Hyphenator.js это Javascript-библиотека которая осуществляет автоматическую расстановку переносов на стороне клиента.

    Ресурсы для дальнейшего изучения

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

    6 способов улучшить типографику на сайте

    Верстка — работа с текстовым материалом. Прежде всего, это мастерство дизайнера или верстальщика распределить и оформить текст в макете.

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

    Работа над ней — очень важный процесс, он требует внимания и умения «копаться в деталях», это особый труд и довольно кропотливый. Любой продукт с недоработанным текстом будет выглядеть плохо, какие бы интересные и качественные не были бы в нем картинки.

    Как начинающему дизайнеру определить качество типографики? Главное свойство хорошо cверстанного текста — незаметность, лаконичность. При чтении вам ничто не должно мешать воспринимать информацию.

    Существует понятие – « Серебро набора» . Это свойство хорошо сверстанного текста, который смотрится в проекте ровным и цельным серым блоком. Эта самая равномерность и называется «Серебром набора». Для текста, особенно рассчитанного на линейное чтение, это незаменимое качество.

    7 доказанных способов улучшения удобочитаемости веб-сайта и повышения конверсий

    Вот что: никто не читает тексты.

    Учитывая, что человеческий охват внимания становится меньше, чем у золотой рыбки (восемь секунд против девяти), писать привлекательные тексты — сложная задача. Согласно прошлым исследованиям, опубликованным Nielsen Norman Group, 79% пользователей просто просматривают любую новую страницу, и только 16% читают слово за словом. Пользователи находят время читать только 28% текста.

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

    Итак, вот проблема и решение, в двух частях:

    1) Как мы можем заставить наших пользователей читать текст на веб-сайте?

    Обеспечивая хорошую читабельность.

    2) Как мы можем гарантировать, что текст на сайте хорошо читается?

    Это именно то, о чем пойдет речь в этой статье.

    Но сначала давайте поймем, о чем мы говорим.

    Что такое читабельность?

    Согласно Nielsen Norman Group, тремя ключевыми качествами эффективного текста являются:

    Разборчивость: ясность визуального дизайна и типографики.

    Считываемость: сложность слов и структура предложения.

    Понимание: простота понимания текста и правильные выводы.

    Так что, строго говоря, читаемость касается только «сложности слов и структуры предложения». Это немного отличается от понимания читаемости большинством пользователей. Например, вот отрывок из Википедии о читаемости.

    Читаемость — это легкость, с которой читатель может понять письменный текст. Читаемость конкретного текста зависит от контента (например, сложности его синтаксиса) и типографии (например, размер шрифта, высота строки и длина строки).

    Фактически, в Википедии конкретно говорится: «Разборчивость — это компонент удобочитаемости».

    Можно с уверенностью сказать, что читаемость — это разборчивость и понятность. Чтобы избежать двусмысленности, мы будем использовать термин «удобочитаемость сайта», когда мы говорим об этом всеобъемлющем значении, и просто «удобочитаемости», когда мы ссылаемся на «сложность слов и структуру предложения» в тексте.

    # 1 Быстро определите ключевые точки

    Когда пользователи начинают читать ваш текст, они делают быстрый анализ затрат и выгод в своих головах:

    Стоимость: Сколько времени и усилий я потрачу, пока буду читать эту веб-страницу?

    Преимущества: Какую полезную информацию / решение я извлеку из этой веб-страницы?

    Если воспринимаемая выгода перевешивает воспринимаемую стоимость, они читают. Как сделать так, чтобы преимуществ было больше?

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

    Метод APP — согласие, проблема, предварительный просмотр

    Для бизнес-блогов и других тяжелых страниц проверенный метод копирайтинга — использовать метод APP. Начало публикации построено так, чтобы пользователи «соглашались» на общее мировоззрение. Как мы начали этот пост, говоря «никто не читает тексты». Как только читатель согласен с этим, продолжайте формулировать проблему и пообещайте ее решить. Здесь пользователь уверен в ценности поста. После того, как вы увлекли пользователя, представьте предварительный вариант решения, и покажите, как он изменит ситуацию к лучшему.

    # 2 Оценка читаемости

    Посмотрим правде в глаза, непросто объективно судить о том, насколько «читаемый» текст. Но есть стандартизированные инструменты, которые помогут вам объективно сравнить версии тестов на удобочитаемость. Они вычисляют сложность слов и структуру предложения. Большинство тестов предоставляют вам либо численный балл, либо уровень оценки, который определяет, насколько легко / сложно читать ваш текст.

    Примечание. Попробуйте выполнить несколько тестов для оценки вашего текста для получения более точной степени удобочитаемости.

    Вот несколько инструментов для измерения читаемости:

    Также вы можете использовать Главред. Он определяет, насколько текст соответствует инфостилю, но также поможет сделать предложения проще и понятнее. Ориентируйтесь на оценку в 7 и выше баллов.

    # 3 Используйте слова, которые понимают ваши пользователи

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

    Топ-пост этого месяца:  SyntaxHighlighter подсветка синтаксиса кода на сайте

    Но чтобы использовать слова, с которыми знаком ваш пользователь, сначала вы должны быть знакомы с вашим читателем. Поэтому тщательно изучите свою целевую аудиторию.

    «Всеобъемлющие изменения образа жизни могут привести к регрессии даже тяжелого атеросклероза коронарных артерий через год, без применения препаратов, снижающих уровень липидов».

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

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

    # 4 Измерение понимания пользователями

    Рассмотрим следующие предложения:

    Он махнул руками

    Он отказался от своих прав

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

    Вот почему важно не просто убедиться, что ваш текст читабельный. Он еще и должен быть понятным.

    # 5 Обратите внимание на типографику

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

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

    Smashing Magazine рекомендует использовать 16 пикселей или более для чтения пользователями с удобного расстояния в 28 дюймов от экрана.

    Выбор правильного шрифта важен. Шрифты Sans Serif в этом отношении лучше, чем шрифты с засечками. Основная цель — разборчивость. Если вы используете шрифты Serif, не берите их просто для эстетики; используйте те, которые не портят читабельность веб-сайта.

    Давайте посмотрим на образец сканирования текста читателями:

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

    Оптимальный диапазон для длины строки составляет от 45 до 75 символов. Если линия слишком широкая, пользователь может не сфокусироваться от начала до конца. Если строка слишком короткая, пользователь может дважды прочитать одни и те же слова (удвоение).

    Сканирование текста становится легким с оптимальной длиной и высотой линии. Чтение становится менее напряженным для человеческого глаза.

    # 6 Сделайте текст удерживающим

    Если ваш пользователь может понять ваш текст, следующий шаг — сделать неизгладимое впечатление.

    Шесть принципов успеха:

    • Простота: Как обсуждалось ранее, избегайте сложностей в языке и структуре.
    • Неожиданность: Сделайте свою копию интересной. Сюрпризы могут быть интересной информацией или удивительными данными, интересными фактами.
    • Конкретность: будьте конкретны, используйте статистику и цифры. Не используйте неопределенные прилагательные и длинные абзацы.
    • Достоверность: давайте ссылки на первоисточники.
    • Эмоция: использование эмоций в вашем тексте сделает его ближе к читателю.
    • Рассказ: Ты помнишь, что случилось с Питером Пэном? Дюймовочкой? Потому что это рассказы. Но рассказывать можно не только сказки.
    # 7 Используйте изображения для привлечения внимания

    Знаете ли вы, что изображения можно эффективно использовать, чтобы обратить внимание пользователя на текст на веб-страницах? Вот пример, который все видели:

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

    Не только изображения, но подписи к изображениям тоже сканируют. Они читаются на 50% больше, чем остальная часть текста. Сделайте подписи, чтобы захватить внимание читателя.

    Даже с небольшим охватом внимания пользователи все еще читают контент. Но для этого текст должен быть удобочитаемым.

    Используйте эти советы, чтобы ваши тексты читали от начала и до конца.

    6 способов улучшить типографику на сайте

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

    1. Шрифт
    Выбор шрифта — один из самых важных моментов в типографике. Шрифт должен соответствовать содержанию текста и быть уместным. Также лучше всего выбирать хорошо читаемый и четкий шрифт. Для заголовков можно использовать и декоративные шрифты, но для основного текста лучше всего остановится на Helvetica, Arial или Times Roman.

    2. Размер
    Следующий пункт, на который стоит обратить внимание — это размер шрифта. Как правило, размер шрифта варьируется между 12 и 16 пикселями для основного текста. Также следует учесть, что пользователи могут смотреть сайт и с мобильных устройств, а значит текст должен быть разборчивым и в зависимости от разрешения экрана.

    3. Иерархия
    В зависимости от размера шрифта для основного текста на сайте, можно установить иерархию размеров для различных частей текста и соблюдать эту иерархию на всех страницах сайта. Например, основной размер текста 14 пискселей, а следующие размеры будут 16, 18, 21, 24, 36, 48, 60, 72 для других блоков с текстом и крупных заголовков.

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

    5. Длина строки
    Если длина строки будет слишком короткой — текст становится беcсвязным, а если слишком длинным — то трудно читаемым. Обычно длина строки варьируется между 40 и 80 символами. Оптимально это где-то около 65 символов.

    6. Межстрочное расстояние
    Этот параметр является важным компонентов, влияющим на читаемость текста и общую эстетику сайта. Выбор размера межстрочного расстояния зависит от используемого шрифта, его размера и стиля, длины строки. Обычно размер межстрочного расстояния на 2-5 пунктов больше, чем размер шрифта.

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

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

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


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

    Как улучшить типографику блога на WordPress – действенные советы

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

    Типографика – это визуальное искусство создания письменных слов. Если мы говорим о блоге WordPress, это определение может вводить в заблуждение, поскольку определение в основном сосредоточено на художественной типографике. Если вы посмотрите на самые популярные блоги, то заметите, что в письменных словах нет ничего художественного.

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

    Почему так важна типографика WordPress

    Вернемся к определению типографики: создание письменных слов является самой значительной его частью.

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

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

    В 2012 году Smashing Magazine опубликовал статью о том, как типографика может манипулировать смыслом поста в графическом дизайне. Авторы проиллюстрировали этот факт на простом примере: слово hello представлено в двух разных вариантах:

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

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

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

    Проблема со случайным выбором типографики WordPress

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

    Самая большая проблема заключается в том, что неправильная типографика повлияет на читаемость вашего поста.

    Иисследование Nielsen Norman Group показало, что люди не будут читать онлайн-контент, если текст не понятен, стиль сложный и информацию трудно понять. Все блогеры знают это! Вот почему они используют более короткие абзацы, и выражаются как можно яснее.

    Тем не менее, многие блогеры не понимают, что шрифт, его размер и контраст между текстом и фоном играют огромную роль в удобочитаемости. Как указано в исследовании Nielsen Norman, разборчивость – это «первостепенный уровень удобства использования контента». Это первое, что люди замечают на вашем сайте. Если типографика не будет хорошо сделана, польлзователи не будут читать ваш контент, а уйдут на более комфортные сайты.

    Советы: как улучшить типографику вашего блога

    1. Держитесь подальше от нечитаемых шрифтов

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

    • Pacifico. Он кажется художественным, и это может выглядеть великолепно для графического дизайна. Но это выглядит неуместно в качестве доминирующего шрифта на сайте блога WordPress.
    • Impact. Нормально для заголовков, и мы часто видим его в этом качестве, но он слишком узкий для текста на вашем сайте.
    • Comic Sans MS. Вы пишешь комиксы? Тогда вам разрешено использовать этот шрифт в дизайне. Но лучше не рассматривать его для поста в блоге.
    • Lobster. Представьте себе, что вы читаете длинный бланк в блоге, написанный чьим-то прекрасным, но нечитаемым почерком. В точку!
    • Franklin Gothic. Возможно, этот чистый шрифт хорош для газеты. Но он выглядит немного устаревшим для использования в блоге. Хотя он не так плох, как предыдущие шрифты в этом списке, но все же лучше избегать этого.

    Вот как они выглядят визуально:

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

    2. Используйте комбинации шрифтов

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

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

    Итак, какие комбинации работают? Это сложный вопрос. Все зависит от общего дизайна вашего сайта. Поэкспериментируйте с различными комбинациями, и вы прийдете к победной версии, которая даст узнаваемое ощущение вашему сайту.

    FontPair – отличный инструмент для использования, когда вы хотите увидеть, как разные шрифты работают вместе. Это позволяет сэкономить много времени на эксперименты, так как не придется менять шрифты на вашем сайте снова и снова.

    3. Подберите размер

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

    Слишком большой шрифт также является проблемой. Это делает ваш сайт неловким. Может показаться, что вы кричите.

    Какой размер должен быть у шрифтов

    Определить это можно, осознав, как вы читаете электронные книги на планшете. Горизонтальный вид более сложный для глаз. Дело не в том, что вы привыкли к стандартным книжным форматам. Это потому, что в горизонтальном представлении слишком много символов в одной строке, поэтому ваш глаз теряет фокус.

    По мнению большинства исследователей, которые изучали проблему, 50-60 символов на линию являются идеальным соотношением, и до 75 символов считается приемлемым. Эти символы включают пробелы и интерполяцию. Очень заинтересованный читатель прочитал бы ваш текст, даже если бы ему было предоставлено более 150 символов в одной строке. Однако, если вы установите шрифт до 60 символов в строке, этот же пост будет гораздо более приятным для чтения.

    Калькулятор Golden Ratio Typography является хорошим инструментом для подбора оптимального размера шрифта. Вы можете ввести ширину содержимого (в пикселях) и нужные символы в строке, и получите предложения по размеру шрифта.

    Как правильно оформлять темы в разделе Уроки WordPress.

    4. Используйте для изменения шрифта плагины

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

    Если такой возможности нет, используйте плагин! Вот несколько предложений для плагинов, которые помогут разобраться с типографикой вашего блога:

    • Styleguide — Пользовательские шрифты и цвета

    С помощью этого плагина можно быстро редактировать шрифты и цвета в своей теме в WordPress Customizer. Вы получите предварительный просмотр в реальном времени, прежде чем принимать окончательное решение. Styleguide позволяет в любой теме выбирать среди набора шрифтов Google. Этого более чем достаточно для вас, поскольку Google Fonts – одна из самых многочисленных и удобных библиотек шрифтов. Бесплатно, так что это огромный бонус.

    • Initial Letter

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

    • Font Squirrel

    Если вас по какой-то причине не устраивают шрифты Google, вам может понравиться Font Squirrel. Этот плагин дает множество выбранных вручную шрифтов, которые бесплатны для коммерческого использования.

    • Zeno Font Resizer

    Очевидно, что типографика – это не только стиль шрифта. Это также и размер. Итак, скажем, вы выбираете размер, и думаете, что это идеально. Что делать, если это не работает для одного или нескольких ваших читателей? Zeno Font Resizer позволит своим посетителям изменять размер шрифта для комфортного прочтения постов блога.

    5. Согласуйте фон и цвет шрифтов

    Идеальная типографика потеряет свою уникальность, если вы будете выводить ее на неподходящий фон. Важно иметь высокий контраст между фоном и текстом. Обычный белый фон и темный шрифт – самый безопасный вариант, и в тоже время самый эффективный. Вы видите много белого пространства и читаемого текста в самых успешных блогах WordPress. Для этого есть причина.

    Возьмем блог TED в качестве примера. Черный текст на белом фоне. Ничего революционного в этом дизайне. Но вам не нужно быть революционным, когда дело доходит до типографики WordPress. Вам нужно предложить читателю то, что работает.

    Топ-пост этого месяца:  Средняя зарплата в отечественном IT за год увеличилась на 10%

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

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

    Насколько полезным был этот пост?

    Нажмите на звезду, чтобы оценить этот пост!

    Средний рейтинг: / 5. Количество голосов:

    Пока нет голосов! Будьте первым, кто оценит этот пост.

    14 способов улучшить сниппет в Яндекс и Google и увеличить CTR

    Одним из поведенческих факторов ранжирования (косвенный) в современном SEO является CTR документа в поисковой выдаче (SERP). CTR (от англ. click-through rate) – показатель кликабельности ссылки в результатах поиска, равный отношению числа кликов к количеству показов ссылки на документ. Чем выше CTR документа в выдаче, тем выше шансы у сайта занять в выдаче топовые позиции.

    Как же можно повлиять на CTR? Что пользователя заставит кликнуть по вашему сайту из выдачи? Ответ очевиден: привлекательный сниппет! Сниппет – это информация (маленькая аннотация) о документе, который был найден по запросу. В выдаче он выглядит таким образом:

    Основная задача сниппета – дать примерное представление пользователю о содержании найденного документа, на основании которого принимается решение о переходе по ссылке. Из этого можно сделать вывод, что чем интереснее, содержательнее и привлекательнее сниппет, тем выше вероятность клика по нему => выше CTR и посещаемость.

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

    Способ №1. Title

    Первый и самый явный способ влияния на сниппет — манипулирование мета-данными документа: Title. Для формирования привлекательного заголовка сниппета документа необходимо соблюдать несколько правил:

    • Составлять Title страницы, используя важные ключевые слова в начале заголовка.
    • Не использовать стоп-слова (вводные слова, междометия и т.д.).
    • Длина Заголовка не должна превышать 70-80 символов.
    • Title должен быть максимально информативным и отражать суть контента страницы.
    • Тег Title должен быть уникальным для каждой страницы.

    Физически заголовок страницы указывается между html-тегами <ВАШ ЗАГОЛОВОК>, размещенными в секции .

    Способ №2. Description

    Краткое описание страницы в сниппете может формироваться на основе мета-тега description. Тег не влияет на внешний вид страницы. Несколько простых правил по заполнению мета-тега description:

    • В Description необходимо писать цепляющий пользователя текст (описывать преимущества товара или услуги), с использованием ключевых запросов в начале описания.
    • Длина мета-тега должна быть не более 240 символов – для Яндекса, а для Google 150-160 символов.
    • Description должен быть уникальным для каждой страницы.
    • Title и Description должны отличаться друг от друга.
    • В теге должно содержаться описание конкретной страницы, в тексте не рекомендуется использовать общие фразы.

    Мета-тег description располагается в блоке коде страницы:

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

    Способ №3. Favicon

    Favicon (от английского favorite icon — избранный значок) – небольшое изображение, которое отображается рядом с заголовком сниппета вашего сайта в выдаче Яндекса. Фавикон напрямую влияет на формирование и восприятие вашего бренда – он должен отражать суть ресурса, быть уникальным и запоминающимся.

    Визуальное восприятие играет важную роль для пользователя, и он скорее кликнет на документ со значком, чем на конкурента, если у того нет Favicon.

    Favicon представляет собой изображение 16 на 16 пикселей в формате .ico. Для того, чтобы настроить корректное отображение фавиконки, необходимо в шаблоне сайта между тегами указать ссылку на Favicon следующим образом:

    В последнее время Яндекс использует фавиконку, которая находится в корне сайта (хотя в атрибуте href можно указать иконку во внутренней папке), поэтому она должна быть доступна по ссылке site.ru/favicon.ico, чтобы избежать некорректного отображения в поисковой выдаче.

    После установки фавиконки в поиске она появится в сниппете в течение двух недель.

    Советы по созданию Favicon:

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

    Перед созданием favicon своего сайта изучите конкурентов – и постарайтесь сделать фавиконку выделяющейся из общей массы иконок сайтов в ТОП10 в поисковой выдаче.

    Способ №4. Оптимизация фрагмента текста на страницы

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

    Способ №5. Яндекс.Каталог

    Если ваш сайт описан в Яндекс.Каталоге, то сниппет главной страницы может формироваться на основе информации, представленной в каталоге.

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

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

    Способ №6. Модуль Яндекса Товары и цены

    Следующим способом влияния на сниппет в выдаче Яндекса является подключение модуля «Товары и Цены». Как говорит сам Яндекс, данный инструмент был разработан специально для улучшения сниппетов: для страниц сайтов-участников программы в поиске используются специальные структурированные описания, которые содержат полезную информацию о самом магазине и о товаре, который ищет пользователь.

    Пользователь, который ищет виброплиту определенной модели, видит исчерпывающий ответ на свой запрос: цену, информацию о доставке и краткое описание товара.

    Модуль «Яндекс.Товары и цены» можно подключить не только для интернет-магазинов, но и для сайтов, предоставляющих различные услуги:

    Для того, чтобы сделать такой сниппет, необходимо выполнить несколько несложных шагов:

    • Заполнить данные о компании в Вебмастер.Яндекс
    • При необходимости разместить данные о компании на сайте (ОГРН, юридический адрес и другое)
    • Подготовить yml-файл, в котором будет представлена вся информация о товарах Вашего интернет-магазина.
    • Отправить файл на проверку.
    • Дождаться модерации данных Яндексом.
    • Вы подключили модуль Товары и цены. По сообщению Яндекса, изменения в выдаче должны будут произойти в течение 30 дней. По факту результат можно увидеть уже через пару недель.

    Yml стандарт, разработанный Яндексом, основан на стандарте xml. Некоторые особенности YML-файла для модуля «Товары и цены»:

    • Файл должен быть доступен на сайте. Запрос к данному файлу роботом Яндекса происходит 1 раз в день.
    • Он должен быть актуальным, т.е. обновляться в соответствии с вашим каталогом.
    • Передавать цену товара можно только одну.
    • Структура yml-файла должна соответствовать спецификациями Яндекса (проверяется валидатором).

    Способ №7. Яндекс.Справочник

    Действенный способ повлиять на сниппет в выдаче Яндекса — добавить компанию в Яндекс.Справочник. Справочник содержит в себе данные обо всех организациях, которые когда-либо были добавлены. Вся информация, добавленная в справочник, используется в Яндекс.Картах.

    В Яндекс.Сравочнике можно отредактировать такую информацию о компании как: телефон, адрес компании, почта, режим работы и др.

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

    Как можно заметить, на картинке представлены только главные страницы сайтов. Но! Есть небольшой лайфхак:

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

    Способ №8. Микроразметка хлебных крошек

    Хлебные крошки – компонент навигации на сайте, помогающий пользователям ориентироваться, понимать структуру сайта ПС и ускорять процесс индексации.

    Микроразметка крошек дает возможность отобразить навигационную цепочку страницы в выдаче. Плюсы микроразметки хлебных крошек:

    • Красивый и привлекательный сниппет
    • Легкость в ориентировании пользователя на сайте
    • Быстрая оценка объема информации на сайте
    • Переход в необходимый раздел сайта за 1 клик

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

    Существует несколько стандартов для разметки хлебных крошек, которые поддерживаются Яндексом и Гуглом:

    • Микроданные, schema.org
    • Микроформаты
    • RDFa

    Ниже приведен пример микроразметки Schema.org для хлебных крошек:

    После разметки хлебных крошек сниппет в поисковой выдаче выглядит так:

    Для того чтобы проверить корректность размещенной микроразметки, следует воспользоваться сервисами:

    Способ №9. Микроразметка для карточек товаров

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

    Микроразметка помогает понять роботам поисковых систем, где описание товара, цена, а где его название и модель. На данный момент поддерживаются следующие форматы: OpenGraf, SchemaOrg, LD-json.

    На примере http://schema.org/Product микроразметка товара задается следующим образом:

    Для того чтобы проверить корректность размещенной микроразметки, следует воспользоваться сервисами:

    Способ №10. Микроразметка листинга товаров

    С помощью микроданных LD-json можно передать в Google данные о представленных товарах на разводящей странице. В таком случае сниппет будет выглядеть подобным образом:

    Для того чтобы сделать такой сниппет, необходимо настроить вывод данных с помощью скрипта на основе микроразметки Schema.org/Product, со свойствами lowPrice и haghPrice:

    В Яндекс нет возможности получить такой сниппет, и вот его ответ по поводу микроданных JSON-LD:

    Для проверки валидности микроразметки используйте инструмент проверки микроразметки от Google: https://search.google.com/structured-data/testing-tool#/

    Способ №11. Микроразметка отзывов

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

    В сниппете также можно увидеть количество людей, по оценкам которых и был составлен рейтинг. Сниппет с рейтингом товара привлекает внимание и помогает увеличить CTR.

    Для добавления рейтинга к описанию товара в сниппете необходимо при настройке микроразметки по схеме Schema.org/Product заполнить свойство AggregateRating:

    Для того чтобы проверить корректность размещенной микроразметки, следует воспользоваться сервисами:

    Способ №12. Страница Контакты – микроразметка

    Разметка контактных данных вашей компании помогает Яндексу и Google правильно отображать информацию о Вашей организации в выдаче. Типы организаций, которые предлагает микроразметка Schema.org:

    • Организация
    • Местная фирма
    • Авиалиния
    • Корпорация
    • Спорт-организация
    • Правительственное учреждение
    • Исполнительная группа
    • Не правительственная организация

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

    Ниже приведена общая схема разметки страницы контактов с помощью http://schema.org/Organization:

    Для проверки валидности размещенной микроразметки можно воспользоваться сервисами:

    Способ №13. Редактирование быстрых ссылок

    Иногда сниппет документа формируется с дополнительными быстрыми ссылками на основные разделы сайта. Полезность таких ссылок для пользователей обусловлена возможностью быстрого перехода в нужный раздел сайта, для компаний – возможность выделить свой документ среди конкурентов. Быстрые ссылки при формировании сниппета использует и Гугл, и Яндекс.


    Яндекс формирует два вида ссылок:

      Быстрые ссылки под основным описанием в сниппете

    Быстрые ссылки с расширенным форматом (такой формат доступен для витальных ответов)

    Самим задавать быстрые ссылки в Яндексе нельзя. Такие сниппеты показываются только в том случае, если алгоритмами ПС определены такие ссылки (например, берутся те страницы сайта, у которых наиболее высокий вес), а сайт по запросу находится в пределах 2 страниц выдачи. Но, Яндекс дает возможность отредактировать быстрые ссылки в Вебмастере Яндекса: скрыть или изменить название.

    Google показывает быстрые ссылки тоже в двух форматах: расширенные и в сниппете:

    Аналогично Яндексу, Google формирует список быстрых ссылок в соответствии со своими алгоритмами с учетом структуры сайта. Инструмент редактирования быстрых ссылок не предусмотрен. Скорректировать ссылки можно только с помощью качественной переработки структуры сайта и снижения вес страниц, попадание которых в список быстрые ссылки не желательно.

    Способ №14. Расширенные сниппеты для Яндекса и Google для информационных сайтов

    Поисковые системы Яндекс и Google дают возможность формировать определенный расширенный сниппет с учетом тематики ресурса. Расширенный сниппет в обеих поисковых системах создается на основе микроразметки Schema.org. Что можно выделить на страницах:

    • Отзывы об автомобилях
    • Рецепты различных блюд
    • Данные о рефератах
    • Детали программ, устанавливаемых на компьютер
    • Информацию о фильмах
    • Даты публикации новостей
    • Видео
    • Вопросы и ответы

    Вот некоторые результаты при работе со сниппетами информационных ресурсов:

    Выводы

    Регулярный мониторинг и корректировка сниппетов с целью увеличения CTR позволяет добиться повышения документа в поисковой выдаче. Рассмотрим такой случай: первое место в результатах поиска занимает сайт http://siteA.com/, а второе – сайт http://siteB.com/. Если пользователи чаще кликают на сайт http://siteB.com/, то велика вероятность (при всех прочих равных факторах), что в выдаче в ближайшем времени с пересчетом поведенческих факторов документ с сайта B обойдет документ с сайта A.

    Не работать над сниппетами сейчас невозможно, так как без некоторой информации в сниппете на первую страницу поисковой выдачи можно вообще не попасть. Например, без выведенных контактов: все первые позиции в Яндексе сейчас занимают сайты с контактной информацией.

    При проведении работ со сниппетами можно достичь следующих результатов:

    • Увеличение количества кликов по документу из поиска
    • Оказание косвенного влияния на позицию страницы в выдаче
    • Лучшее понимание структуры Вашего сайта поисковиками

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

    10 правил улучшения типографики в дизайне

    Одна из самых часто встречающихся бед дизайна — это проблема с типографикой.

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

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

    Правило 1. Чем меньше шрифтов, тем лучше

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

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

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

    Правило 2. Следите за разрядкой

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

    Правило 3. Правильное выравнивание

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

    Правило 4. Поменьше декоративных шрифтов

    У вас есть красивые декоративные шрифты? Замечательно! Но это совсем не означает, что необходимо использовать их для текста абзацев. За декоративными шрифтами, чаще всего стоит, история или они применяются в конкретном случае, например, для заголовка или названия. Часто, чем проще, тем лучше, поэтому такие шрифты как Helvetica так популярны.

    Правило 5. Размер имеет значение

    Это о размере букв текста ;). Заголовки хороши, когда набраны жирным и большим шрифтом, но если вы будете использовать и в основном тексте слишком большие буквы, это удешевит его. Подумай об этом. Вы идете в хороший ресторан и часто бывает, что меню написано мелким шрифтом, это выглядит классно. (Только убедитесь, что шрифт не так мал, чтобы было трудно прочитать). Не бойтесь делать заголовки гораздо больше, чем основной текст.

    Правило 6. Следите за читабельностью

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

    Правило 7. Правильно подбирайте цвета

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

    Правило 8. Подходящая группировка

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

    Топ-пост этого месяца:  Регулярные выражения в PHP. Применение регулярных выражений

    Правило 9. Достаточный интерлиньяж

    Это расстояние между строками текста. Очень важно правильно подобрать этот интервал. Гораздо более приятно читать, когда есть место для отдыха глаз между строками. Как правило, стараются использовать интерлиньяж, по крайней мере, на 2 пункта больше, чем размер шрифта. Например: для максимального удобства чтения при 10pt для шрифта должны задать хотя бы 12pt.

    Правило 10. Следите за кернингом

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

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

    Типографика в веб-дизайне

    Друзья, привет-привет! С вами Максим Солдаткин.

    Давайте сегодня разберем ТОП 5 правил типографики в вебе. Это 5 тем, которые основаны на том, что я вижу, когда вы мне присылаете ваши домашние задания, и просто работаю на рецензию.

    Типографика в веб-дизайне: основные правила

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

    Первая тема – это выравнивание (рис.1).

    Рис.1 Выравнивание: плохо

    Есть текстовые блоки, которые очень часто выравниваются неправильно. Плохие примеры – это выравнивание по ширине, выравнивание посередине и выравнивание по правому краю.

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

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

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

    Хороший пример – это выравнивать по левому краю (рис.2). Мы получаем довольно комфортную левую строку и в 99% случаев из 100 такое выравнивание в вашем макете, скорее всего, даст хороший результат и, скорее всего, оно уместно.

    Рис. 2 Выравнивание: хорошо

    Основы стиля в типографике: дефис или тире?

    Очень важно рассказать про черточки, дефисы, тире и минус (рис.3).

    Во-первых, есть дефис. Это самая короткая черточка – это часть слова, она стоит внутри слова и разделяет часть слова либо два слова, как в примере кто-то (частица) и красно-белый – соединяет два слова.

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

    В чем разница между ними? Во-первых, разница в длине. Дефис у нас самый короткий. Короткое тире – оно так называемое N-dash – размером с букву N. Есть длинное тире M-dash (размером с букву M).

    Какое из них использовать, на самом деле, не принципиально. Главное – использовать тире, а не дефис. И минус – длина минуса сопоставима со значком «плюс».

    Также они по-разному выглядят в строке. Если мы говорим про дефисы и тире – они на одном уровне располагаются, минус – он располагается на уровне горизонтального штриха с плюсом.

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

    Правила типографики: какие кавычки выбрать?

    Дальше – кавычки (рис.4). В русском языке у нас есть два типа кавычек – это «елочки» и «лапки».

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

    В общем, запомните, что основные кавычки у нас вот такие – «елочки».

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

    Все эти символы можно запросто найти на типографской клавиатуре Ильи Бирмана. Это раскладка клавиатуры есть и для MAC-а, как у меня здесь на скриншоте (рис.5), так и для Windows. Она скачивается, ставится в настройках системы. И довольно просто найти здесь и минус, и короткое тире, и плюсы и еще ряд на самом деле других, довольно удобных знаков. Кавычки, лапки, стрелочки, очень удобные значки копирайта и так далее.

    Рис.5 Типографская клавиатура http://ilyabirman.ru/projects/typography-layout

    В общем, очень удобная штука. Ссылка есть. Я думаю, что добавлю в описание. Идем дальше.

    Типографика и верстка текста

    Блок текста. Тоже довольно часто встречающаяся ошибка – это неправильная работа с блоками текста. (рис.6).

    Рис.6 Блок текста: плохо

    Во-первых, это слишком длинный размер этого самого блока. В чем проблема? В том, что человеку неудобно читать. Когда мы читаем, читаем, читаем, читаем по длине, когда мы закончили чтение – нам нужно слишком далеко переносить свой взгляд обратно. Мы снова читаем – длинная строка, снова обратно.

    Гораздо удобнее, когда дизайнер по типографике этот блок делает компактнее (рис.7). 50-80 символов плюс-минус довольно комфортный для человека размер текстового блока.

    Рис.7 Блок текста: лучше

    Дальше в чем проблемы еще здесь? В том, что у нас есть вот такие вот союзы, местоимения, предлоги и так далее. В принципе, все то, что длиннее трех символов… Вот это вот тоже, в принципе, потому что для этого – тут три символа и пять символов. В общем, все короткие слова, которые 3 плюс-минус один символ нужно переносить на следующую строку.

    Что я и сделал. Видим, как гораздо аккуратнее стал правый край (рис.8). Если в этом случае оно неравномерно выглядит, то в этом случае стал довольно аккуратным.

    Рис.8 Блок текста: хорошо

    Шрифт и дизайн заголовков в современной типографике

    И, разумеется, о заголовке. Часто в блоках мы забываем ставить заголовок. Еще заголовок должен быть довольно большим и контрастным.

    Следующая штука – швейцарская красная строка (рис.9). Для разделения слов на абзацы лучше использовать швейцарскую красную строку – это просто отступ, просто пробел, размером примерно полторы строки – полтора размера. Можно просто оставлять целую строку – этого будет достаточно.

    Рис.9 Блок текста: идеально. Швейцарская красная строка.

    Не стоит делать какие-то отступы здесь (как красная строка классическая школьная) – лучше использовать швейцарскую красную строку – это такой стандарт в вебе, который к нам из Швейцарии пришел.

    Веб типографика: как выбрать шрифт?

    Дальше. Есть параметры шрифта (рис.10), которые тоже знать удобно, необходимо и даже обязательно.

    Рис. 10 Шрифт и гарнитура

    Во-первых, набор шрифтов Sans, Serif и Mono – это все шрифты. Отдельно шрифт PT Sans, отдельно шрифт PT Serif, отдельно шрифт PT Mono.

    Но все вместе (PT Sans + PT Serif + PT Mono) – это называется гарнитура. То есть, гарнитура – это набор шрифтов одной природы, одной категории, одного настроения что ли.

    Например, есть еще гарнитура Artemius (рис.11).

    Это тоже набор шрифтов. Тут есть и шрифты с засечками, есть шрифты без засечек, есть довольно жирное начертание шрифта и даже не латиница и так далее. Все это вместе, весь этот набор шрифтов составляет одну гарнитуру. Так же и PT Sans, Serif и Mono.

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

    Правила типографики в веб дизайне: кернинг и трекинг

    Дальше. Есть кернинг, есть трекинг (рис.12).

    Рис.12 Трекинг и кернинг

    Кернинг – это расстояние между буквами. Между каждой конкретной буквенной парой. Есть трекинг в типографике– это какой-то коэффициент, который мы говорим, что все расстояния между буквами мы умножим на какой-то вот этот коэффициент.

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

    У меня специально умышленно кернинг стоит такой нарушенный – просто чтоб вы увидели разницу, что между «К» и «е» расстояние такое, между «р» и «н» оно слиплось. Между «н» и «и» оно тоже чуть больше, чем нужно. Да, вот это расстояние нужно было бы по идее подвинуть.

    Трекинг обычно используется для… Увеличенный трекинг для заглавных букв. Вот как у меня здесь написано (буквы заглавные) – довольно часто для этого стоит использовать так называемую разрядку – увеличено у нас расстояние между этими буквами.

    В Фотошопе кернинг находится вот здесь, трекинг находится вот здесь (рис.13).

    Рис.13 Кернинг и трекинг

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

    Рис.14 Запрещенные приемы

    Плющить – это масштабировать их по вертикали (в плюс или минус) и сжимать – это как-то масштабировать буквы по горизонтали (плюс или минус).

    Технические начертания тоже нельзя использовать. Что это такое? Есть начертания, которые в шрифте проработаны автором. То есть, у нас есть Regular, есть Bold, есть Italic. Мы видим, что… На самом деле на Italic-е больше всего заметно, что у нас начертание изменилось. На самом деле буква «е» совершенно по-другому. Буква «а» — гораздо заметней буква «а» — видим, что она совершенно разная. Буква «т» — тоже, она здесь такая – здесь такая.

    Если мы используем техническое начертание – это просто Фотошоп искусственно наклоняет буквы. Да, мы видим, что разницы такой принципиальной – ее нет. «Т» та же самая осталась, «а» и «е». Видим, что здесь разница гораздо больше в «т» и в «е».

    В общем, в Фотошопе технические начертания находятся – вот это «т» и «т-курсивно» — их использовать не стоит. Используйте начертания, которые у нас есть вот здесь, которые заданы автором шрифта (рис.15).

    Типографика на сайте: акциденция

    И стоит сказать про акциденцию (рис.16).

    Возвращаясь к предыдущему нашему блоку, я уже говорил про заголовок, что он должен быть достаточно крупным. Какие у нас способы есть для акциденции? У нас есть для акциденции способ – самое базовое, на самом деле – жирное начертание, есть курсивное начертание и есть подчеркивание.

    Стоит сказать про жирное. Мы видим, что, если мы какие-то слова делаем, акцентируем жирным, то они сразу сильно вылезают на первый план. Часто это нужно, часто это не нужно.

    Когда нам нужно что-то акцентировать (внимание), но сделать это аккуратно – мы используем Italic. Заметьте, вот в этом блоке мы сразу не видим, на чем у нас есть акциденция в типографике. Но, когда мы начинаем читать предложение, мы невольно глазом находим вот это «надо ловить ветер», видим, что оно немножко другим начертанием и наше внимание на нем (на этом слове) все-таки становится повышенным.

    В этом примере, в этом блоке мы сразу видим огромную яркую жирную акциденцию. Иногда уместно так, иногда уместно так.

    Что стоит сказать про подчеркивание? Не стоит использовать подчеркивание как знак акциденции в типографике.. Подчеркивание – это всегда ссылка. Оформление ссылок (рис.17).

    Рис.17 Оформление ссылок

    Текст без черточки – на ссылку не похоже. Текст с черточкой, с подчеркиванием у нас автоматически воспринимается как ссылка. Да, если мы его еще усиливаем синим цветом, то это еще проще воспринимать.

    Сейчас эта черточка выглядит довольно слишком на самом деле активной. Можно делать ее с какой-то степенью прозрачности (30-40-50%). Чтоб она была заметна, но чтоб она не так сильно бросалась в глаза.

    И тогда, на самом деле, это выглядит довольно аккуратно. Это и подчеркивание, что человеку на самом деле понятнее становится, что это ссылка. Он не пытается как-то нас угадать, не угадать, что мы имели в виду. В то же время, оно убирает акценты такие сильные с подчеркивания. Также это можно сделать и черным цветом. В общем, я вот за такой способ подчеркивания ссылок.

    И, прежде всего, стоит помнить, что хорошая типографика – это качество, которое не замечаешь. Которое человек, заходя на ваш сайт, не замечает, но чувствует.

    Типографика для веб дизайнеров – это как правило хорошего тона. Когда мы общаемся с человеком, и он вежлив, то в этом нет ничего сверхъестественного – мы вроде как за норму принимаем, что человек вежливый. Но в то же время нам комфортно с ним общаться. И вас никто никогда условно не похвалит за суперкрутую типографику, как нас никто не похвалит за обычную вежливость.

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

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

    На этом про типографику все. Вам было интересно? Возможно, стоит получить профессию веб дизайнера. Посмотрите бесплатный мастер-класс!

    Как улучшить типографику сайта 31.05.2020

    Одним из самых важных для передачи информации на страницах сайта является использование топографической иерархии. Это система организации данных, которая устанавливает и сортирует информацию по важности, поэтому пользователю проще ее найти. Создание четкой иерархии – это путь к успешному продвижению и увеличению посещаемости.

    Сделать типографику сайта привлекательной и эффективной помогут:

    • Расстояние между строками;
    • Свободное пространство;
    • Цвет и контраст;
    • Выравнивание;
    • Длина строки;
    • Пробелы;
    • Иерархия;
    • Акцент;
    • Размер;
    • Шрифт.

    При разработке веб-дизайнеры должен учитывать эти моменты, потому что они существенно влияют на работу и посещаемость ресурса. Ведь именно так можно создать инновационный интернет-проект.

    Видео по теме:

    Прокомментировать эту статью:

    Пожалуйста, зарегистрируйтесь для комментирования.

    Топ-10 самых читаемых публикаций:

    Новые статьи:

    • Правильная разработка дизайна сайта 06.11.2020
    • Блюда тайской кухни — вкусно и полезно 03.11.2020
    • Быть программистом не только прибыльно, но и престижно 02.11.2020
    • Как правильно писать seo-тексты 01.11.2020
    • Комфорт и удобство современного жилья 01.11.2020
    • Виды визитных карточек и их предназначение 30.10.2020
    • Профессиональные тренажеры с гарантией качества 29.10.2020
    • Робот пылесос — незаменимый помощник в доме 27.10.2020
    • Как правильно выбрать боксерскую грушу 26.10.2020
    • Эффективное продвижение сайта вечными ссылками 25.10.2020
    • ТОП-5 ключевых направлений в развитии интернет-маркетинга 23.10.2020
    • Как правильно выбрать эхолот для зимней рыбалки 18.10.2020
    • Видеонаблюдение — надежный способ охраны собственности 16.10.2020
    • Преимущество виниловых обоев для отделки стен 16.10.2020
    • SEO продвижение сайта, раскрутка в фирме Seo-Design 16.10.2020
    • Особенности создания корпоративного сайта на платформе 1С-Битрикс 11.10.2020
    • Как стать владельцем качественного сайта? 11.10.2020
    • Рейтинг хостингов виртуальных серверов VPS/VDS 10.10.2020
    • Основные преимущества VPS сервера на Windows 09.10.2020
    • Преимущества системы «Умный дом» 09.10.2020
    • Трессы – современная мода или необходимый аксессуар? 04.10.2020
    • Искусственные елки оптом 03.10.2020

    Публикации по темам:

    • Бизнес в интернете (444)
    • Новости (36)
    • Обзоры интересных сайтов (30)
    • Оборудование и технологии (549)
    • Отдых и развлечения (80)
    • Продвижение сайтов (480)
    • Размышления (475)
    • Разработка сайтов (490)
    • Уроки и советы (403)
    • Хостинг (126)

    Популярные статьи:

    Читайте также:

    © 2005-2020 Веб-студия inVision. Все права защищены.

    При копировании публикаций, пожалуйста, не забывайте ставить гиперссылку на наш блог. Спасибо.

    Добавить комментарий