Сайт невозможен без текста, а значит — без типографики. Также немаловажное значение имеет вид страниц и их корректное отображение при различном разрешении в разных браузерах, за что отвечает верстка. В статье мы рассмотрим правила оформления текста, а также важные принципы верстки. Типографика Типографика рассказывает об использовании шрифтов в различных случаях. Особенно важно использование разного начертания текста в сайтах. Пользователи редко читают все статьи от начала и до конца. А это значит, что нужно сделать текст простым для чтения пользователей. Текст должен быть удобным для чтения Исключение: названия бренда, компании — начертание логотипа. Удобнее читать шрифты с высокой различимостью букв Т.е. одна буква должна хорошо отличаться от другой. Для чтения не подходят декоративные шрифты. Выделяйте жирным особенно важные слова или часть текста Не перестарайтесь. Текст, выделенный жирным шрифтом, читать сложнее, но для небольшого куска текста такой способ можно применять. Не используйте более двух типов жирности текста: в IE разница между жирностью может быть не видна. Ширина колонки должна быть удобной длины Например, 7-8 слов. Если ваш текст будет растянут по ширине экрана 1680, такой текст будет очень плохо читаться. Расстояние между строками Немаловажный параметр. В меру увеличенное расстояние повышает удобочитаемость, особенно при длинной строке. Кегль Кегль — это высота шрифта. Шрифт на сайте должен быть умеренным. Для основного текста считается оптимальным шрифт размером 12-16 пикселей. В частности при выборе кегля стоит учитывать, для кого предназначается текст. Например, пожилым людям текст лучше увеличить. Также существуют возможности подстраивания размера шрифта под пользователя. Шрифт с засечками и без Шрифты без засечек проще для восприятия в интернете. В печати используются шрифты с засечками. Цвет шрифта Цвет шрифта должен быть контрастным с фоном. Например, черный шрифт на белом фоне читается легче, чем красный. Соблюдайте иерархию заголовков Самый важный заголовок (например, заголовок страницы, должен быть самым большим, подпункты — поменьше, а текст — стандартного размера (12-16). Не сочетайте слишком много шрифтов на одной странице Максимум 2 шрифтовых решения. Не больше. Верстка Код страницы, который облегчает индексацию сайта поисковыми системами и одинаково отображается различными браузерами. Верстка включает разбиение дизайна на отдельные элементы, а также формирование страницы с помощью html и css. Верстка бывает резиновой, адаптивной и нерезиновой. Нерезиновая верстка Макет имеет заданную ширину и при изменении ширины экрана не меняет свой размер. Резиновая верстка Макет полностью изменяется пропорционально размеру окон. Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина. Адаптивная верстка Макет изменяется пропорционально размеру окна браузера, но некоторые блоки фиксированы, т.е. сохраняют заданный размер.
Интерес-МСК
:Илья Аверин
Верстка и типографика
Сайт невозможен без текста, а значит — без типографики. Также немаловажное значение имеет вид страниц и их корректное отображение при различном разрешении в разных браузерах, за что отвечает верстка. В статье мы рассмотрим правила оформления текста, а также важные принципы верстки.
Типографика
Типографика рассказывает об использовании шрифтов в различных случаях. Особенно важно использование разного начертания текста в сайтах. Пользователи редко читают все статьи от начала и до конца. А это значит, что нужно сделать текст простым для чтения пользователей.
Текст должен быть удобным для чтения
Исключение: названия бренда, компании — начертание логотипа.
Удобнее читать шрифты с высокой различимостью букв
Т.е. одна буква должна хорошо отличаться от другой. Для чтения не подходят декоративные шрифты.
Выделяйте жирным особенно важные слова или часть текста
Не перестарайтесь. Текст, выделенный жирным шрифтом, читать сложнее, но для небольшого куска текста такой способ можно применять. Не используйте более двух типов жирности текста: в IE разница между жирностью может быть не видна.
Ширина колонки должна быть удобной длины
Например, 7-8 слов. Если ваш текст будет растянут по ширине экрана 1680, такой текст будет очень плохо читаться.
Расстояние между строками
Немаловажный параметр. В меру увеличенное расстояние повышает удобочитаемость, особенно при длинной строке.
Кегль
Кегль — это высота шрифта. Шрифт на сайте должен быть умеренным. Для основного текста считается оптимальным шрифт размером 12-16 пикселей. В частности при выборе кегля стоит учитывать, для кого предназначается текст. Например, пожилым людям текст лучше увеличить. Также существуют возможности подстраивания размера шрифта под пользователя.
Шрифт с засечками и без
Шрифты без засечек проще для восприятия в интернете. В печати используются шрифты с засечками.
Цвет шрифта
Цвет шрифта должен быть контрастным с фоном. Например, черный шрифт на белом фоне читается легче, чем красный.
Соблюдайте иерархию заголовков
Самый важный заголовок (например, заголовок страницы, должен быть самым большим, подпункты — поменьше, а текст — стандартного размера (12-16).
Не сочетайте слишком много шрифтов на одной странице
Максимум 2 шрифтовых решения. Не больше.
Верстка
Код страницы, который облегчает индексацию сайта поисковыми системами и одинаково отображается различными браузерами. Верстка включает разбиение дизайна на отдельные элементы, а также формирование страницы с помощью html и css. Верстка бывает резиновой, адаптивной и нерезиновой.
Нерезиновая верстка
Макет имеет заданную ширину и при изменении ширины экрана не меняет свой размер.
Резиновая верстка
Макет полностью изменяется пропорционально размеру окон. Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.
Адаптивная верстка
Макет изменяется пропорционально размеру окна браузера, но некоторые блоки фиксированы, т.е. сохраняют заданный размер.