Шрифты и веб-дизайн

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

Классификация шрифтов

1. Антиква:

  • гуманистическая;
  • старого стиля;
  • переходная;
  • нового стиля;
  • брусковая.

2. Гротеск:

  • старый;
  • новый;
  • геометрический;
  • гуманистический.

3. Антиква-гротеск;

4. Рукописный шрифт:

  • формальный;
  • неформальный;
  • каллиграфический.

5. Декоративный;

6. Готический:

  • текстура;
  • бастарда;
  • фрактура;
  • ротунда.

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

Разберем базовые шрифты, которые должен знать каждый новичок.

  1. Гуманистическая Антиква.
Шрифты и веб-дизайн

Ключевая гарнитура: Jenson, 1471.

Характеристики:

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

Применение: Ограничено (только в заголовках, не подходит для основного текста). Требует узкого интерлиньяжа.

2. Антиква Старого Стиля

Шрифты и веб-дизайн

Ключевая гарнитура: Garamond, 1530.

Характеристики:

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

Применение: ограничено (плохая читаемость в маленьком кегле — только для заголовков). Минимальный интерлиньяж.

3. Переходная Антиква.

Шрифты и веб-дизайн

Ключевая гарнитура: Baskerville, 1757.

Характеристики:

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

Применение: большой объем текста книжного кегля; для заголовков.

4. Антиква Нового Стиля

Шрифты и веб-дизайн

Ключевая гарнитура: Bodoni, 1798.

Характеристики:

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

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

5. Брусковая Антиква

Шрифты и веб-дизайн

Ключевая гарнитура: Clarendon, 1845.

Характеристики:

  • штрих — незначительный контраст;
  • форма букв — короткие выносные элементы и короткие засечки;
  • ось — вертикальная.

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

6. Гротеск старый

Шрифты и веб-дизайн

Ключевая гарнитура: Franklin Gothic, 1903.

Характеристики:

  • штрих — умеренный контраст;
  • форма букв — стремление к квадрату;
  • ось — вертикальная.

Применение: для вывесок, баннеров; средовая графика.

7. Новые гротески

Шрифты и веб-дизайн

Ключевая гарнитура: Helvetica, 1956.

Характеристики:

  • штрих — одной толщины или минимальный контраст;
  • форма букв — крупное очко, открытая петля g;
  • ось — вертикальная.

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

8. Геометрические гротески

Шрифты и веб-дизайн

Ключевая гарнитура: Futura, 1927.

Характеристики:

  • штрих — без контраста одной толщины;
  • форма букв — геометрическая;
  • ось — вертикальная.

Применение: только для заголовков (плохо читаем при большом объемном тексте!)

9. Гуманистические гротески

Шрифты и веб-дизайн

Ключевая гарнитура: Gill Sans, 1927.

Характеристики:

  • штрих — контраст уже заметен;
  • форма букв — влияние каллиграфии;
  • ось — вертикальная.

Применение: для больших объемных текстов, хорошо сочетается с антиквой.

10. Антиква- гротеск

Шрифты и веб-дизайн

Ключевая гарнитура: Albertus, 1940.

Характеристики:

  • штрих — минимальный контраст;
  • форма букв — точеный силуэт. заостренные треугольные засечки;
  • ось — вертикальная.

Применение: для заголовков, акциденций, небольших объемов мелкого текста (с осторожностью!).

Примеры Акцидентных шрифтов:

Шрифты и веб-дизайн
Шрифты и веб-дизайн
Шрифты и веб-дизайн
Шрифты и веб-дизайн

Спасибо, что читаете меня! Надеюсь, статья была для вас полезной*

Буду рада новым подписчикам в моем Телеграм-канале

11
Начать дискуссию