7 быстрых советов по CSS для повышения удобочитаемости веб-сайта
Опубликовано: 2020-08-24Каждому веб-сайту требуется текстовый контент, который посетитель может прочитать и проанализировать. Этот контент может быть в форме блога, статьи или понятного контента веб-сайта, объясняющего различные области веб-сайта. Посетитель сайта читает определенные вещи на сайте в соответствии со своими требованиями. Но он или она может прочитать содержимое только тогда, когда текст на веб-сайте разборчив и легко читается. Без удобочитаемости сайт представляет собой просто набор изображений, ссылок и других веб-элементов. Следовательно, независимо от того, насколько длинная или короткая форма, содержание веб-сайта должно быть достаточно разборчивым. Как веб-разработчик, вы должны знать, какие шрифты вам нужны или какое выравнивание пробелов требуется. Эти параметры играют важную роль, определяя, как текстовое содержимое отображается и разбивается на веб-странице.
В наши дни веб-разработчики используют CSS для проектирования всего на веб-сайте, начиная от его внешнего вида, шрифтов и их начертаний. Здесь этот блог посвящен конкретным советам и приемам CSS, которым вы можете следовать, чтобы поддерживать и улучшать удобочитаемость веб-сайта при использовании CSS.
1. Единицы:
Доступны различные единицы, которые помогут вам управлять размером шрифта в фрагменте текста. Вам нужно понять, какая единица полезна в соответствии с разделом текста на вашем сайте или веб-страницах. Эти единицы можно определить после того, как вы поймете, как вы хотите определить структуру веб-страницы и выравнивание текста на ней. Также необходимо учитывать такие факторы, как размеры устройства просмотра и предпочтения читателя. Следовательно, когда вы думаете о единицах измерения шрифта, em и rem — идеальный выбор, на который вы можете положиться. Вы можете использовать ems для определения параметров вертикального поля внутри абзаца, когда размер текста имеет тенденцию меняться. Но если шрифт с засечками заменить шрифтом без засечек в выбранном разделе, это может стать узким местом. Более того, шрифты одного размера могут выглядеть по-разному при изменении их семейств. Как правило, размер строчной буквы «x» относится к размеру других символов.
Когда мы используем CSS для обработки внешнего вида нашего веб-сайта, мы можем принять во внимание свойство «font-size-adjust» и отображать шрифты одного размера. Благодаря этому высота символов может совпадать с высотой строчных букв. Вы можете использовать этот фрагмент кода, чтобы удостовериться в факторах, упомянутых выше:
@supports (регулировка размера шрифта: 1;)
{
Статья{
Настройка размера шрифта: 0,5;
{
}
2. Высота строки:
Белая область между черным текстом определяет типографику, и это применимо, когда мы собираемся разработать веб-сайт или веб-приложение. Мы должны уделять большое внимание высоте строки, полям и разрывам строк. Вы можете определить размер шрифта для оптимизации высоты строки, завися от значения x-height. По умолчанию браузеры предоставляют высоту строки как 1,2, что является значением без конкретной единицы. Это значение является правильным значением для шрифтов Times New Roman, но не применяется аналогичным образом к другим начертаниям шрифтов. Междустрочный интервал не зависит линейно от размера шрифта и зависит от таких параметров, как тип текста. Для длинных форм были протестированы определенные шрифты с размерами от 8 до 14. И это показало нам, что отношение x-высоты к межстрочному интервалу составляет 37,6. Эти тесты проводились для длинного контента, напечатанного на листе бумаги.
Когда мы рассматриваем мобильные устройства или экраны других устройств, мы заметили, что контент на устройстве требует правильного расстояния между строками текста. Следовательно, для цифрового контента поддерживается соотношение 32. С помощью CSS вы можете определить это значение в виде фрагмента кода следующим образом:
П{
Высота строки: расчет (1ex/0,32);
}
Этот код позволяет получить оптимальное значение независимо от того, принадлежит ли начертание шрифта семейству шрифтов без засечек или с засечками. Это же значение актуально, когда недоступны инструменты, связанные с типографикой.
3. Определение шкалы:
В предыдущих субтитрах мы настроили размер шрифта и использовали значения для определения высоты строки. Идя дальше, нам нужно определить типографский масштаб, чтобы установить правильное количество интервалов между абзацами при рассмотрении длинного контента. Как мы уже установили, межстрочный интервал не увеличивается линейно, а изменяется в зависимости от структуры текста. При рассмотрении заголовков с огромным размером шрифта нам нужно иметь большее соотношение высоты строки. Мы можем определить это, используя следующий код CSS:
статья h1
{
размер шрифта: 2.5em;
высота строки: расчет (1ex / 0,42);
поле: вычисл(1ex/0,42) 0;
}
статья h2
{
размер шрифта: 2em;
высота строки: расчет (1ex / 0,42);
поле: вычисл(1ex/0,42) 0;
}
статья h3
{
размер шрифта: 1,75 em;
высота строки: расчет (1ex / 0,38);
поле: вычисл(1ex/0,38) 0;
}
статья h4
{
размер шрифта: 1.5em;
высота строки: расчет (1ex / 0,37);
поле: вычислить(1ex/0,37) 0;
}
статья р
{
размер шрифта: 1em;
высота строки: расчет (1ex / 0,32);
поле: вычисл(1ex/0,32) 0;
}
Приведенный выше код помогает вам установить высоту строки в соответствии с размером шрифта для заголовков. Кроме того, этот фрагмент кода может принести пользу и длинному контенту.
4. Интервал с буквами и словами:
Работая с проблемами разборчивости, мы не должны забывать о людях с дислексией и другими нарушениями обучаемости и проблемами. Исследования дислексии развития все еще находятся в стадии изучения, что серьезно влияет на способность к чтению. При принятии решения по вышеуказанным факторам вы всегда должны учитывать эти научные исследования. Ваша типографика может определять эффекты и последствия того, как читатели читают ваш контент.
Было четкое доказательство того, что формы глифов с высоким уровнем разборчивости шрифтов не помогают при чтении, но расстояние между символами помогает. Следовательно, мы должны предоставить веб-страницам инструменты, которые позволяют увеличивать или уменьшать расстояние между символами и изменять размер шрифта для повышения читабельности. Обратите внимание, что эти элементы управления должны увеличивать размер между символами по мере увеличения размера шрифта. Аналогично происходит с уменьшением размера шрифта. Вы можете сосредоточиться на межбуквенном и межсловном интервалах, используя «буквенный интервал» и «словный интервал» во фрагментах кода CSS.
Но когда вы используете «буквенный интервал», он не принимает во внимание условия и имеет тенденцию нарушать кернинг шрифтов. Это приводит к отображению неоптимального интервала на веб-странице. Чтобы справиться с этим недостатком, мы можем использовать переменные шрифты, чтобы управлять тем, как шрифты отображаются на веб-странице. Разработчики шрифтов должны параметризовать интервал в переменной. Это помогает определить толщину шрифта и форму глифа, которые могут масштабироваться в соответствии с меняющимися привычками читателя.
5. Ширина и выравнивание:
В цифровом текстовом формате ширина абзаца определяется как количество символов и интервалов в строке. Человеческий глаз привык читать от семи до восьми букв, когда начинает читать фрагмент текста. Более того, человеческий глаз может прочитать только несколько последовательных повторений. Следовательно, разрывы строк в любой части письма необходимы. Вы должны учитывать, как перемещается фокус читателя при чтении фрагмента текста. Он проходит от конца строки до начала следующей строки текста. Следовательно, важно поддерживать определенное количество символов в зависимости от типа текста. Как правило, абзац содержит строки, содержащие от 60 до 70 символов в одной строке. Единица «ch» используется для установки этого значения, когда вы назначаете ширину абзаца с помощью CSS. Следующий код в CSS определяет значение «ch»:
п
{
Ширина: 60ч;
Максимальная ширина: 100%;
}
Выравнивание текста также имеет решающее значение, когда мы имеем дело с абзацами. Помощь в расстановке переносов не является оптимальной при смене браузеров. Следовательно, его следует проверить заранее. Если помощь при расстановке переносов недоступна, вам следует избегать выравнивания текста по ширине, так как горизонтальное пространство будет препятствием при чтении. Мы предоставляем вам код CSS, когда поддержка переносов доступна и недоступна:
/* в случае наличия переноса:*/
р[язык="ru"]
{
выравнивание текста: по ширине;
дефисы: авто;
}
/*CSS-код, если у вас нет поддержки переносов*/
р[ланг="это"]
{
выравнивание текста: по левому краю;
дефисы: нет;
}
Языки, которые не имеют встроенной поддержки, могут иметь ручную расстановку переносов. Вы можете использовать различные серверные и клиентские стороны для вставки ‐ фактор. Это указывает, где он может позволить сломать токен. Этот символ становится невидимым, если только он не помещен в конец строки, где он отображается в виде дефиса. Чтобы использовать это, нам нужно установить параметры «дефисы: ручной CSS».
6. Контраст переднего плана:
Самый фундаментальный фактор, который следует учитывать, когда дело доходит до удобочитаемости, — это цветовой контраст между фоном и выбранным цветом шрифта. WCAG, также известная как Руководство по доступности веб-контента, имеет определенный список предопределенных рекомендаций для различных стандартов. Он определяет необходимый цветовой контраст между фоном и текстом в веб-приложении или на веб-сайте. Вы можете рассчитать контраст с помощью различных инструментов, доступных как для проектирования, так и для разработки. На рынке доступны автоматические валидаторы, но они не работают так точно, как настоящий тест.
Когда мы используем CSS для определения цветового контраста, мы можем использовать оператор «calc» для динамического расчета цвета шрифта, чтобы обеспечить наилучший цветовой контраст. Это рассчитывается с учетом цвета темы и фона. Код CSS, использующий фактор «Calc», выглядит следующим образом:
статья
{
– красный: 230;
– зеленый: 230;
–синий: 230;
--aa-яркость: (
(вар(–красный) * 299) +
(вар(–зеленый) * 587) +
(вар(–синий) * 114)
) / 1000;
–aa-color: calc((var(–aa-brightness) – 128) * -1000);
фон: rgb(var(–красный), var(–зеленый), var(–синий));
цвет: rgb(var(–aa-цвет), var(–aa-цвет), var(–aa-цвет));
}
В соответствии с параметрами медиа-запроса вы также можете позволить пользователю переключаться между темной и светлой темами в соответствии с предпочтениями пользователя. Вы можете использовать «prefer-color-scheme» в CSS, чтобы включить переключение между светлой и темной темами следующим образом:
@media (предпочитает цветовую схему: темный)
{
статья
{
– красный: 30;
– зеленый: 30;
–синий: 30;
}
}
7. Добавление тени к шрифтам:
Несмотря на то, что у нас есть значительный выбор между веб-шрифтами, легко отказаться от выбора традиционных шрифтов, которые определяют стандартный подход и согласованность. Но есть определенные недостатки, связанные с выбором пользовательских веб-шрифтов. Например, все устройства отображают шрифты по-разному. Известно, что компьютеры Apple создают шрифты с точностью до пикселя, используя методы сглаживания. Но в Windows они предпочитают подход, при котором удобочитаемость имеет большее значение. Следовательно, если вы посмотрите на один и тот же текст на устройствах Apple и Windows, шрифты могут выглядеть в определенной степени по-разному.
Чтобы решить эту проблему, на помощь приходят веб-шрифты. Веб-шрифты хорошо отображаются в Интернете такими, какими они изначально выглядят. Но для недавно запущенных пользовательских веб-шрифтов шрифты не отображаются в соответствии с нашими ожиданиями. Следовательно, они выглядят по-разному на разных устройствах. Иногда шрифты также выглядят немного по-разному при смене браузера. В таких случаях вы должны применить тень к шрифтам. С помощью следующего кода CSS вы можете реализовать тени для шрифтов:
h1 { /* Ваш селектор */
семейство шрифтов: «Некоторый пользовательский шрифт», с засечками;
text-shadow:0 0 1px прозрачный;
/* Или, если вам нужно применить жесткую тень 0px,
* вы можете использовать несколько текстовых теней */
text-shadow:0 0 0 #f00, 0 0 1px прозрачный;
}
Вывод:
Чтение — занятие, полное сложностей, и оно становится еще более сложным, когда читатель не умеет читать. Когда вы нацелены на разработку веб-сайта, вы должны позаботиться о постоянных читателях, в том числе о читателях с ограниченными возможностями. Следовательно, в этом блоге обсуждаются основные проблемы, которые необходимо решить с помощью CSS, принимая во внимание удобочитаемость веб-сайта.