Типографика от А до Я – шрифты, шрифты и правила их использования в Интернете

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

 

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

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

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

 

С другой стороны, шрифт – это цифровая форма письма, в которой каждый отдельный символ выполнен в виде векторов или  растровых изображений . Поскольку в цифровой среде шрифтов мы не создаем и не отпечатываем, а только разрабатываем шрифты в специальных программах (таких как FontLab), вы часто можете слышать голоса о том, что термины «шрифт» и «шрифт» не должны использоваться взаимозаменяемо. С другой стороны, тщетно искать термин «шрифт» в большинстве польских словарей. Не менее важным является тот факт, что подавляющее большинство пользователей Интернета ищут шрифты именно по фразе «шрифт».
Шрифт

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

Гарнитуры можно классифицировать по-разному. Самое популярное и основное различие – между шрифтами с засечками и без засечек.

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

Есть несколько основных типов засечек:

    • клин с засечками в виде треугольников (например, Миньон),
    • балка в виде однородных прямоугольников (например, Museo Slab),
    • линии в виде тонких линий, контрастирующих с основной линией знака (например, Theano Didot),
    • скрытые, т.е. небольшие расширения на концах символов (например, Fontin),
    • некоторые гарнитуры также имеют засечки в средней строке символа.

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

Глоссарий терминов, относящихся к типографике

Минускул – строчная буква алфавита, противоположная заглавной букве, т.е. заглавная буква (пример).

Заглавные буквы – заглавные буквы, составляющие целое слово или предложение (ПРИМЕР).

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

Лигатуры – одиночный символ, содержащий две или более букв, определяющих их постоянное пространственное соотношение (например, fi ).

Оценка почерка – один из трех основных параметров каждого шрифта и шрифта. Это вертикальный размер поля знака, то есть высота между нижней строкой шрифта и линией прописного акцента (между нижней строкой букв, таких как: g, q, p, и верхней строкой заглавных букв с ударением:, Ń, Ś). Выражается в типографских точках. В компьютерной типографике градус определяется как расстояние между соседними базовыми линиями одного и того же шрифта (с межстрочным интервалом, равным степени написания).

Firet – относительная единица измерения, равная степени письма (квадратная область со стороной, равной степени письма).

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

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

Кернинг – регулировка расстояния между определенными парами символов. Таким образом определяются не только пробелы между буквами, но и другие символы (например, буква-цифра, цифра-цифра, цифра-пунктуация).

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

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

  1. Размер шрифта

В печати наиболее удобный диапазон для текста – 10–12 пунктов. В Интернете предпочтительный диапазон размеров составляет 15-25 пикселей. Шрифты, несмотря на один и тот же класс, часто кажутся меньше или больше, поэтому будьте готовы скорректировать их по мере необходимости.

  1. Расстояние между строками (высота строки)

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

По умолчанию расстояние между линиями должно составлять примерно 120–145% шрифта. В текстовых редакторах при настройке интерлиньяжа используйте параметр «Точно», чтобы изменить настройки.

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

  1. Длина стиха.

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

  1. Длина абзаца

Поскольку большинство пользователей Интернета не читают всю информацию на веб-сайтах, а только просматривают абзацы, их необходимо тщательно продумать, чтобы помочь пользователю ознакомиться с тем, что мы должны передать. Длинные блоки текста без пробелов очень утомляют читателя, поэтому используйте короткие абзацы в Интернете. Это поможет получателю проанализировать текст и запомнить его. Как правило, каждый абзац не должен быть длиннее 6-8 строк.

  1. Выравнивание текста

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

  1. Количество шрифтов

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

При поиске интересных комбинаций шрифтов для своего сайта или блога стоит взглянуть на Canva (рисунок выше) и Font Pair .

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

  1. Выбор шрифта– попробуйте бесплатные шрифты.

Наконец, выбор шрифта. Самое быстрое, простое и заметное улучшение, которое вы можете сделать, – это игнорировать большинство системных шрифтов и использовать шрифт p rofesjonalnego.

Мы можем выбрать шрифт из множества наборов шрифтов. Ниже приводится список примеров источников:

Google Fonts – Все шрифты (бесплатно)

 

Typekit Adobe (оплачивается)

DaFont ( бесплатно для некоммерческого использования )

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

  1. Как избежать типичных ошибок

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

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

При установке шрифта в Windows, скачав его на жесткий диск компьютера и распаковав из архива (если он был запакован), скопируйте его в папку «Шрифты » в папке «Windows » . Распространенные расширения файлов шрифтов: OTF, TTF, реже TTC,  PFM . Более простой способ установки: после загрузки файла щелкните его правой кнопкой мыши и выберите «Установить». Шрифт будет автоматически помещен в папку «Font s». После установки шрифтов мы можем использовать их в текстовых редакторах и графических программах, установленных на компьютере. Управление большим количеством шрифтов на диске облегчается с помощью таких программ, как бесплатный NexusFont.

Интерфейс программы NexusFont

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

Add a Comment

Your email address will not be published. Required fields are marked*