10 советов по вёрстке типографии сайта

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

Расстояние между строками

На многих сайта, не правильно подобрано расстояние между строками. От этого усложняется усвоение информации и в некоторых случаях просто тяжело читать текст. Строчную высоту надо всегда подводить под размер шрифта. Если вы, например, используете размер шрифта 14px, то к межстрочному интервалу, я советую добавлять ещё 7-8 пикселей, в таком случае, текст будет смотреться на и более гармонично.

body{
    font-size:14px;
    line-height:21px; /* 14px + 7px */
}

Название заголовков

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

Не используйте много разных шрифтов

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

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

Используйте monospace шрифты для отображения кода

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

Самые популярные monospace шрифты:

Следите за контрастом

Даже если у вас простой сайт и он не обладает хорошей типографией, то всё равно надо следить за контрастностью фона и текста. Если у вас, например серый фон (#999999), то не следует использовать цвет шрифта в любом из оттенков серого (#333333), потому что читаемость будет минимальной.

Я могу вам посоветовать сервис colorscheme.ru, он поможет вам правильно подбирать цвета, чтобы они были в контрасте.

Ссылки должны быть подчёркнуты

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

Создайте библиотеку стилей

То есть правильно оформляйте ваши стили, чтобы не путаться в будущем. Например, для оформления изображений image.css для типографии typography.css и так далее.

Соблюдайте иерархию текста

Для улучшения читаемости надо соблюдать иерархию текста – сначала заголовок в <h1>, потом идут подзаголовки в <h2> между ними по необходимости подзаголовки в <h3> и <h4>.

Не бойтесь белого пространства

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

Используете правильные символы

Это качается многого, но самое распространённое, это конечно же использование символов цитаты вместо кавычек, дефис вместо тире и так далее.

Коды символов вы можете посмотреть тут

На этом всё, спасибо за внимание и надеюсь данная статья стала для вас полезной.