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

23 июля 2012 года, Размещено в категории: HTML / CSS

Под типографией подразумевается все данные, которые размещаются в текстовой части сайта. Это не только текст, могут быть и таблицы, изображения и.т.п. Я постарался собрать 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 и вы поймёте как пустое пространство можно красиво и профессионально вписать на сайт.

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

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

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

 

Кроме этого, многим очень интересно будет узнать про восстановление данных после переустановки windows. Почитайте, там все подробно написано. Эта информация пригодится не только новичку.

 

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






2 комментария

  • 5 лет назад Ответить

    Нет лучшего способа оскорбить посетителя своего сайта, как неправильно подобрать расстояние между строками в тексте! Спасибо за полезные советы 🙂

  • 5 лет назад Ответить

    Мысли в слух конечно, но почитать интерестно!

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

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

Перед отправкой формы: