[ad_1]
Создание хорошего впечатления от чтения в Интернете — это не просто поиск правильного веб-шрифта (хотя, конечно, это важно). Есть много других факторов, которые следует учитывать, от того, как текст отображается на разных устройствах, до того, где он находится на странице. Следуйте этому пошаговому руководству, чтобы убедиться, что вы все сделали правильно.
Если вам нужно что-то более подробное, взгляните на наше руководство по правилам адаптивной веб-типографики. А для инструмента, который поможет всему вашему сайту, выберите отличный конструктор сайтов.
01. Прочитайте содержание
Значимая типографика начинается с одного: контента. Настоящие типографы знают это; они всегда будут читать книгу до того, как начнут ее печатать. К сожалению, похоже, что многие веб-дизайнеры недооценивают важность контента в процессе веб-дизайна.
Они часто находят отговорки тем, что веб-сайта еще нет, поэтому не с чем работать. В этом случае используйте похожий контент. Например, если вы разрабатываете веб-сайт о финансах и экономике, найдите статью об этом и прочитайте ее. Если у вас есть контент веб-сайта, сделайте его резервную копию в облачном хранилище.
02. Выбирайте шрифт в зависимости от содержания
Теперь, когда вы ознакомились с содержанием, вы готовы выбрать свой основной шрифт. Если веб-сайт посвящен технологиям, но ожидается, что он будет содержать статьи среднего или большого размера, используйте шрифт, который выглядит немного современно, но легко читается. Если это портфолио художественной галереи, вам может сойти с рук что-то острое.
Не используйте Lorem Ipsum в качестве заполнителя — это странная форма латинского языка, которая не имеет ничего общего с вашим сайтом. Используйте контент из шага 01 на том языке, который будет использоваться, а затем разработайте его.
03. Начните с мобильных устройств
Важным шагом является разработка наилучшего опыта чтения для экрана, для которого сложнее всего разработать дизайн: мобильный. Mobile-first — это принципиально иной подход к веб-дизайну, в котором постепенное улучшение предпочтительнее постепенного ухудшения. (Наличие идеального веб-хостинга поможет вам обеспечить идеальную работу мобильного сайта.)
Не разрабатывайте лучший опыт чтения для экранов настольных компьютеров, а затем адаптируйте его для мобильных устройств или, что еще хуже, вообще забудьте о мобильных устройствах. Выберите комбинацию размера шрифта и высоты строки, которая лучше всего подходит для небольших экранов. Отправной точкой должно быть согласованное по умолчанию для браузера значение 16 пикселей.
04. Адаптация для больших экранов
Не позволяйте мобильным прежде всего превратиться в мобильные. Инструменты для формирования наилучшего опыта чтения для разных экранов уже есть, и их следует использовать. Большие экраны обычно находятся дальше от глаз читателей, поэтому размер основного шрифта должен быть больше. 18 пикселей считается хорошей отправной точкой.
Не забудьте ограничить ширину абзацев — для удобства чтения рекомендуется 60 символов в строке. Необходимо еще раз обратить внимание на высоту строки — обычно лучше всего в 1,4 или 1,5 раза больше размера шрифта.
05. Используйте масштаб
Пришло время определить диапазон повторно используемых размеров шрифта на основе масштаба. Наиболее распространенный способ сделать это — использовать модульную шкалу. Перейдите к Modular Scale, введите базовый размер шрифта и выберите масштаб. Это даст вам выбор размера шрифта. Определение масштаба и попытка придерживаться его придает смысл выбору размера шрифта и предотвращает хаос, который часто возникает из-за их случайного назначения.
06. Установите базовую сетку
Следующий шаг — начать думать о других текстовых элементах вокруг основного текста, которые вы уже должны были разработать (заголовки, списки, подписи, боковые комментарии и т. д.). Чтобы придать смысл размещению этих элементов на вашем веб-сайте, лучше всего использовать базовую сетку (если вы не понимаете теорию сеток, сейчас самое время изучить и ее).
Эта сетка исходит из высоты строки основного текста. Если ваша высота строки составляет 22 пикселя, вам нужна вертикальная сетка, основанная на этом. Когда это будет сделано, вы будете готовы установить размеры и поля других текстовых элементов, чтобы они помещались внутри этой сетки.
Эта статья была первоначально опубликована в творческом журнале веб-дизайна Web Designer. Купить выпуск 271 или подписываться.
Подробнее:
- Как сделать так, чтобы текст отображался идеально
- Тест по типографике выявляет пробелы в знании букв
- 3D-шрифты: 9 лучших советов по шрифтам
[ad_2]
