10 советов по вёрстке типографии сайта
23 июля 2012 года, Размещено в категории: HTML / CSS
Под типографией подразумевается все данные, которые размещаются в текстовой части сайта. Это не только текст, могут быть и таблицы, изображения и.т.п. Я постарался собрать 10 полезных советов и трюков, которые помогу вашему контенту, выглядеть лучше.
Расстояние между строками
На многих сайта, не правильно подобрано расстояние между строками. От этого усложняется усвоение информации и в некоторых случаях просто тяжело читать текст. Строчную высоту надо всегда подводить под размер шрифта. Если вы, например, используете размер шрифта 14px, то к межстрочному интервалу, я советую добавлять ещё 7-8 пикселей, в таком случае, текст будет смотреться на и более гармонично.
body{ font-size:14px; line-height:21px; /* 14px + 7px */ } |
Название заголовков
Очень часто, заголовки используют как просто разделение текста – это не совсем правильно. Он должен коротко характеризовать следующий параграф текста, чтобы читатель понимал, что будет дальше.
Не используйте много разных шрифтов
Так же большая проблема, которая встречается у многих верстальщиков. Иногда заходишь на какой-нибудь сайт и видишь там просто огромное разнообразие шрифтов, которые пестрят на фоне друг, друга – это только отвлекает и раздражает.
Многие специалисты по юзабилити, советуют руководствоваться правилом «трёх» - это использовать не более 3 разных шрифтов на сайте, так же это и отсносится к цветовой гамме, но это уже другая тема.
Используйте monospace шрифты для отображения кода
Это все шрифты, которые имеют фиксированную ширину у всех символов. В таком виде очень легко читается код и каждый символ хорошо видно.
Самые популярные monospace шрифты:

Следите за контрастом
Даже если у вас простой сайт и он не обладает хорошей типографией, то всё равно надо следить за контрастностью фона и текста. Если у вас, например серый фон (#999999
), то не следует использовать цвет шрифта в любом из оттенков серого (#333333
), потому что читаемость будет минимальной.
Я могу вам посоветовать сервис
Ссылки должны быть подчёркнуты
Это не какая-то прихоть или обязательная вещь, ссылки можно оформлять как угодно. Но всё таки представьте – на протяжении 20 лет, на всех сайтах ссылки были синего цвета с подчёркиванием и человек такое существо, что доверяет тому, что знакомо. И дань традициям в данном случае надо отдать.
Создайте библиотеку стилей
То есть правильно оформляйте ваши стили, чтобы не путаться в будущем. Например, для оформления изображений image.css
для типографии typography.css
и так далее.
Соблюдайте иерархию текста
Для улучшения читаемости надо соблюдать иерархию текста – сначала заголовок в <h1>, потом идут подзаголовки в <h2> между ними по необходимости подзаголовки в <h3> и <h4>.
Не бойтесь белого пространства
Мне как-то дали очень хороший совет – «Не бойся белого пространства». Пустое место в тексте, не всегда пустое, потому что оно добавляет разнообразие и даёт глазам отдохнуть от контента. Могу вам лишь посоветовать посмотреть официальный сайт фирмы Apple и вы поймёте как пустое пространство можно красиво и профессионально вписать на сайт.
Используете правильные символы
Это качается многого, но самое распространённое, это конечно же использование символов цитаты вместо кавычек, дефис вместо тире и так далее.
Коды символов вы можете посмотреть
На этом всё, спасибо за внимание и надеюсь данная статья стала для вас полезной.
Виктор Барчин
10 лет назад
Нет лучшего способа оскорбить посетителя своего сайта, как неправильно подобрать расстояние между строками в тексте! Спасибо за полезные советы 🙂
Yope
10 лет назад
Мысли в слух конечно, но почитать интерестно!