8 (8332) 62-34-10

Разный размер шрифтов под разный размер экрана

Интернет становится всё более мобильным и разработка сайта только под ваш размер экрана становится нонсенсом.

Дизайнерам и разработчикам нужно более придирчиво смотреть на свои творения, будут ли тексты читаемыми при разных разрешениях и размерах экрана.
При вёрстке сайта изначально нужно выяснить, насколько «тянущимся» будет дизайн – занимающим всю ширину экрана (100%) или адаптированным под разные размеры устройств. В любом из случаев ваш текст не должен искажаться и быть читаемым.

Способ достичь этого – установить некие прерывания, которые контролируют размер шрифта в зависимости от размера экрана, чтобы сделать чтение комфортабельным. К примеру, если вы сделали заголовок размером H1, на мониторе он будет выглядеть прекрасно, но просто не войдёт на экран мобильного устройства.
Вот простой пример, как избавиться от этого:

h1 {
@media only screen and (max-device- width: 960px) {
h1 {
font-size: 36px
}
}
@media only screen and (max-device- width: 480px) {
h1 {
font-size: 24px;
}
}

Как вы видите, когда экран уменьшится до минимальной ширины в 480 пикселей, шрифт заголовка тоже станет меньше, на 1.5 – с 36px до 24px. Заголовок останется заголовком, но станет более удобен для прочтения на мобильном устройстве. Это очень простой пример, а размеров экрана довольно много и для каждого нужно предусмотреть свой размер шрифта.

Шрифтовые эффекты

CSS3 обеспечило дизайнеров целым набором инструментов, чтобы те не ограничивали свою креативность в оформлении веб-странички различными шрифтами.
На шрифты стало возможно накладывать маски, делать тени, шум, короче, почти всё, что раньше делалось картинками, теперь возможно с помощью шрифтов.
Пройдите сюда и выберите желаемый эффект: https://developers.google.com/fonts/docs/getting_started#Effects
Учтите, что в некоторых браузерах эти эффекты пока не работают.

Генерируйте новые лиды и увеличивайте продажи!

Отправить заявку