Мы проектируем и работаем со шрифтами каждый день. Но мы никогда не обращали серьезного внимания на их существование. Мы не использовали их должным образом и даже не злоупотребляли ими. Все это потому, что мы их не понимаем. Шрифт — один из важных элементов типографики; это также один из самых глубоких предметов дизайна. В этой статье давайте обсудим с вами эти глубокие знания.
Виды шрифтов
Английские шрифты (Typeface) делятся на несколько основных категорий. Это основные знания, которые необходимо знать при использовании английских шрифтов:
1. Засечки.
Засечки — это декоративная часть края штриха. Область, отмеченная красным на рисунке ниже, является засечкой.
Первоначальная цель дизайна с засечками — более четко обозначить концы штрихов, улучшить скорость распознавания и увеличить скорость чтения. Кроме того, использование шрифтов с засечками заставит людей чувствовать себя более ортодоксальными. Поэтому во многих наших обычных английских книгах, особенно в эссе и романах, для завершения текста используются шрифты с засечками.
Обычно используемые в веб-дизайне засечки включают Times New Roman и Georgia. Левая часть изображения ниже — шрифт Times New Roman размером 12 пикселей, а правая — шрифт Georgia размером 12 пикселей.
В китайском языке мы используем шрифт Song, соответствующий шрифту с засечками.
2. Без засечек.
Если шрифт не имеет засечек, его называют без засечек или без засечек. На картинке ниже — без засечек.
В веб-дизайне обычно используется относительно много шрифтов без засечек. Есть Arial, Verdana, Tahoma, Helivetica, Calibri и др. На рисунке ниже показаны Ариал, Вердана и Тахома слева направо:
Стоит отметить, что хотя шрифты с засечками широко используются в книгах, в Интернете шрифты с засечками используются редко. Поскольку разрешение экрана компьютера не сравнимо с книжным, шрифты с засечками размером от 10 до 12 пикселей в основном тексте плохо читаются на экране компьютера. На рисунке ниже показано сравнение шрифтов Verdana размером 10 пикселей и Times New Roman размером 10 пикселей без Cleartype. Как видите, Вердану слева легко узнать. Times New Roman справа довольно трудно читается.
3. Моноширинные шрифты
Моноширинные шрифты на самом деле предназначены только для западных шрифтов. Потому что английские буквы различаются по ширине. Например, i намного уже, чем m. Отображение кода при программировании. Если буквы не одинаковой ширины, макет будет некрасивым. В командной строке DOS мы видим, что используется шрифт фиксированной ширины.
К шрифтам постоянной ширины, необходимым для программирования, предъявляются следующие требования:
1. Все символы должны быть одинаковой ширины.
2. Простые, четкие и стандартизированные формы символов.
3. Поддержка расширенных наборов символов с кодами ASCII выше 128.
4. Пустые символы; (ASCII: 0×20) Такая же ширина, как и у других символов.
5. Три символа, такие как «1», «l» и «i», легко различить.
6. Три символа, такие как «0», «o» и «». О" легко различить;
7. Переднюю и заднюю части двойных и одинарных кавычек легко различить, и лучше всего, чтобы они были зеркально симметричными;
8. Четкие знаки препинания, особенно фигурные, круглые и квадратные скобки.
К распространенным моноширинным шрифтам относятся Courier и Courier New.
4. Каллиграфия.
Как следует из названия, каллиграфия — это шрифт в стиле рукописного ввода. Иногда мы также называем его каллиграфическим шрифтом. Большинство китайских каллиграфических шрифтов жесткие. Лично я рекомендую использовать шрифты японской каллиграфии. Японские каллиграфические шрифты мягче и человечнее. Однако недостатком использования японских каллиграфических шрифтов является то, что большинство из них являются традиционными китайскими, и многие китайские иероглифы отсутствуют.
5. Символ
Самый известный символ в Windows — это Webdings (помнится, я очень часто им пользовался, когда еще работал в Windows 95...). Вот несколько шрифтов Webdings:
Стили шрифтов.
Распространенные стили шрифтов: обычный, полужирный и курсив.
Проще говоря, жирный шрифт означает, что шрифт будет темнее и «толстее». Курсив означает небольшой наклон оси текста. Они используются для выделения определенного абзаца текста внутри пространства.
Говоря о жирном шрифте, мы легко можем вспомнить свойство font-weight в CSS. Мы знаем, что в дополнение к обычным и жирным шрифтам, которые мы обычно используем, значение атрибута font-weight также имеет такие атрибуты, как жирнее, светлее, 100 ~ 900 и т. д. Так какова ценность чисел от 100 до 900? На самом деле, число от 100 до 900 не имеет единицы измерения. Хороший шрифт обеспечит разные дизайны для разного веса. Если в шрифте есть предустановленные конструкции для разных уровней толщины, то эти значения будут соответствовать каждому уровню соответственно. Например, шрифт Zurich включает шесть шрифтов: Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black и Zurich UltraBlack. Таким образом, Zurich Light соответствует трем значениям 100, 200 и 300, Zurich Regular соответствует 400, что является «нормальным», Zurich Medium соответствует 500, а Zurich Bold, который является «жирным», соответствует 600, 700, Zurich Black соответствует 800 и, наконец, Zurich UltraBlack соответствует 900.
Китайский курсив обычно не используется в Интернете. Поскольку в китайском языке очень много штрихов, использование курсива затруднит чтение.
Единицы измерения
В нашем веб-дизайне мы будем использовать некоторые единицы измерения:
1. Пункт (pt, point)
72 пункта = 1 дюйм, 1 дюйм — это 72 пункта. Кроме того, 1 пика = 12 точек.
2. Пиксель (пиксель, пикселей)
Пиксель — это наименьшая единица изображения на экране компьютера. С точки зрения непрофессионала, это наименьшая точка на экране.
3. DPI, PPI
Полное название DPI — Dots Per Inch, точек на дюйм, а полное название PPI — Pixel Per Inch. Это единицы разрешения. Другими словами, сколько точек (пикселей) можно разместить на длине 1 дюйма. Например, обычно наш монитор имеет разрешение около 72 пикселей на дюйм, что означает, что на длине 1 дюйма содержится 72 точки (пикселя). Чем выше dpi/ppi, тем выше разрешение, то есть чем мельче частицы, тем нежнее изображение. Вообще говоря, разрешение фотографий составляет от 240 до 300 точек на дюйм, поэтому фотографии выглядят гораздо более детализированными, чем на экране. Журналы печатаются с разрешением 133 или 150 точек на дюйм, а высококачественные книги — с разрешением 350–400 точек на дюйм, поскольку самые красиво напечатанные книги печатаются с разрешением от 175 до 200 точек на дюйм. Вот почему текст одного и того же физического размера гораздо четче при просмотре в книге, чем на экране. Именно поэтому мы уже упоминали ранее, что шрифты без засечек можно смело использовать в английской книгопечатании.
По сути, нет никакой разницы между dpi и ppi. Если вы действительно хотите найти разницу, то единственная разница может заключаться в том, что dpi часто используется для описания сканеров и принтеров, а ppi часто используется для описания разрешения экрана.
4. ex и x-height
часто используются в CSS. 1ex = высота строчной буквы x.
5. em
часто используется в CSS. Конечно, em не представляет высоту строчной буквы m (на самом деле высота строчной буквы m обычно равна высоте строчной буквы x). 1em = 100% размера шрифта. представляет собой множественную единицу.
Интервал
1. Межстрочный интервал (высота строки, интерлиньяж)
Когда дело доходит до межстрочного интервала (высота строки, интерлиньяж), мы должны сначала выучить термин, называемый базовой линией. Помните книжку с сеткой, которую мы использовали для написания букв, когда впервые изучали английский язык. Самая толстая горизонтальная линия — это то, что мы называем базовой линией. Базовая линия — это линия над нижним элементом шрифта, где «сидит» большинство букв. В большинстве шрифтов прописные буквы всегда располагаются близко к базовой линии и над ней. Китайские шрифты аналогичны английским заглавным буквам. Красная линия на рисунке ниже — это базовая линия.
Затем межстрочный интервал относится к расстоянию между базовыми линиями между двумя соседними строками. Единицей межстрочного интервала часто является em, который определяется в зависимости от размера шрифта. В браузерах нет рекомендаций по использованию межстрочного интервала по умолчанию. Согласно рекомендациям W3C, межстрочный интервал по умолчанию должен составлять от 1,0em до 1,2em. На самом деле при настройке межстрочного интервала существует принцип верстки, согласно которому разрыв между строками должен быть больше, чем разрыв между словами, иначе читатели будут легко «сериализоваться» при чтении, вызывая трудности при чтении. Достаточный межстрочный интервал позволяет отделить каждую строку текста, облегчая глазу различение предыдущей или следующей строки. В последние годы большинство людей предпочитают межстрочный интервал 1,5 эма для размещения текста в Интернете, особенно на китайских веб-сайтах. То есть, если используется размер шрифта 12 пикселей, дизайнеры часто предпочитают межстрочный интервал 18 пикселей. 1,5em действительно хорошая ценность опыта. Фактически, стандартом для китайских газет является использование межстрочного интервала 1,5 эм.
2. Межбуквенный интервал (межбуквенный интервал, отслеживание)
Межбуквенный интервал относится к расстоянию между группой букв. Расстояние между словами влияет на плотность текста в строке или абзаце.
3. Кернинг
Кернинг — это технический процесс, выполняемый для визуальных нужд. Проще говоря, когда два конкретных символа выровнены, вы можете индивидуально указать для них уникальный межсловный интервал. Например, когда за прописной буквой A следует строчная буква v, между двумя символами будет визуально больший интервал (на самом деле интервал между словами один и тот же), который невозможно решить с помощью обычного интервала между символами. Если вы уменьшите расстояние между ними, остальные буквы сольются вместе. В настоящее время для решения этой проблемы необходима настройка кернинга. На рисунке ниже показан пример применения кернинга:
Абзац
1. Длина строки (Мера)
Длина строки относится к ширине абзаца текста. Как показано ниже:
С длиной строки связаны две проблемы с разборчивостью:
чем длиннее строка, тем больший межстрочный интервал требуется. Если межстрочный интервал слишком мал, читатели легко сломаются при чтении. Если межстрочный интервал слишком велик, читатели почувствуют, что текст при чтении строк прерывистый.
В основном тексте уместно от 40 до 70 букв в строке.
2. Выравнивание
Существует четыре типа выравнивания абзаца: по левому краю, по правому краю, по центру и по ширине.
Выравнивание по левому краю — это метод выравнивания, который устанавливает текстовое содержимое, регулирует горизонтальный интервал текста и выравнивает текст в абзаце или статье по левому краю в горизонтальном направлении. Выравнивание по левому краю придает тексту в левой части статьи аккуратный край. При этом правая часть текста будет неровной. Поэтому выравнивание по левому краю в английском языке еще называют ragged right, что означает, что правая сторона имеет неровный вид. То же самое касается правильного выравнивания.
Выравнивание по центру — это метод выравнивания, который устанавливает текстовое содержимое и регулирует горизонтальный интервал текста так, чтобы текст в абзаце или статье был выровнен горизонтально по направлению к середине. Выравнивание по центру делает текст с обеих сторон статьи аккуратно сосредоточенным посередине, так что весь абзац или статья получается аккуратным.
Выравнивание означает настройку обоих концов текстового содержимого и настройку горизонтального интервала текста/слов так, чтобы они были
ровными.равномерно распределены по левому и правому краям страницы между расстояниями. Функция Justify придает тексту аккуратные края с обеих сторон.
После использования выравнивания по обоим концам линии выравнивания с обеих сторон станут очень четкими, а ощущение «быстрости» текстового блока также станет очевидным. Однако при наборе текста на английском языке, когда длина строки очень коротка, использование выравнивания может привести к тому, что интервал между некоторыми строками будет слишком длинным, а расстояние между некоторыми строками — слишком коротким. Неравномерный интервал между словами будет выглядеть очень неряшливо. с заплатками везде.
3. Разборчивость.
Разборчивость характеризует легкость и удобство чтения печатного текста. Фактически, это самая фундаментальная цель обычного дизайна. В дополнение к принципам, описанным выше, я также собрал несколько небольших принципов удобочитаемости, которыми хочу поделиться с вами:
Используйте в дизайне не более трех размеров шрифта.
Используйте до трех шрифтов в одном дизайне.
Необходимо обеспечить определенный контраст, но не чрезмерный контраст. Сценарий Ян (черные символы на белом фоне) легче читать, чем сценарий Инь (белые символы на черном фоне). На фоне #fff текст с #333 выглядит более комфортно, чем текст #000.
Обратите внимание на фон текста. Фон должен быть простым. Избегайте фонового шума.
«Меньше значит больше» Используйте наименьшее количество элементов, чтобы передать больше информации.
Сделайте ссылку похожей на ссылку.
Используйте свое пространство с пользой.