7 веб-типографики правила


Хотите безупречный интернет-сайт? Начните с веб-типографики, секрет Killer сайт.

Вы когда-нибудь чувствовать себя разбитым мысль о создании сайта?

С 100 000 различных шрифтов и 16,8 миллионов цветов в интернете, возможности практически безграничны.

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

Если мысль о разработке веб-сайта является подавляющим для вас, вы не одиноки.

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

Давайте начнем.

1. Выберите шрифт

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

Изображения из https://designcode.io/sketch

Какие ваши любимые веб-шрифты?

2. Изменить размер шрифта

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

Так как вы определяете размер шрифта?

Начнем с текста, изменения размера шрифта с 15–25 пикселей.

Вот пример открытия глава Гарри Поттер и Философский камень. Шрифт устанавливается Проксима Нова.

Слева, размер шрифта по умолчанию установлено 12px. Такой маленький размер шрифта будет напрягать глаза. После увеличения размера шрифта 15px, книги о Гарри Поттере намного лучше.

Не размер шрифта 15px чувствую себя намного лучше на глаза?

3. Масштаб ваших рубриках

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

Изменение основного заголовка до 180-200% текста. Если у вас есть дополнительный заголовок, изменить его до 130-150% от текста.

4. Установите межстрочное расстояние

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

Чтобы сделать блок текста легче читать, изменять межстрочный интервал в 120-145% от размера.

В эскизе, налево пойдешь-панели: интервал > линия

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

Отслеживание влияет на пространство между персонажами в группе текст. Что нужно использовать? В эскизе, я просмотрела его с помощью этих двух правил:

  • Используйте меньше интервал на больших размерах шрифта
  • Использовать больший интервал для заголовков

В фотошопе, Скотт Butterick клянется “метрики” вариант.

Кернинг — это расстояние между двумя персонажами.

В течение эскиз, вы можете использовать символ “” поле ввода. Вот такой быстрый гиф, как изменить трекинг и Кернинг:

6. Добавить пробелы между заголовками и текстом

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

Когда вы установите заголовки и основной текст, должен быть пробел 15px, в 20px или 30 пикселей.

7. Использовать линии длиной 45-90 символов

Также рекомендуется ограничить ширину текстового блока.

Оптимальная длина строки для одного столбца страницы 45-90 символов. Идеальная ширина текстового блока составляет 66 символов.

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

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

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

Заключение

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

С этими 7 советами, вы находитесь на вашем пути к красивой веб-типографики!


7 правил веб-типографики была впервые опубликована в коллективной УБ на средних, где люди продолжают разговор, выделение и реагирование на эту историю.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.