У html розмір шрифту

13

Від автора: вітаємо вас, читачі цього блогу. Розмір шрифту в html поряд з його кольором є основними характеристиками тексту, які дуже сильно впливають на сприйняття інформації, і як наслідок на зручність сайту для користувачів. Це стаття про те, як задати розмір шрифту в html.

Як правильно міняти розмір тексту

Справа в тому, що html є дуже обмежені можливості в плані управління розміром шрифту. Наприклад, в ньому є теги small і big. Вони дозволяють вивести текст трохи більшого або меншого розміру, по відношенню до звичайного тексту на сторінці. Але таких можливостей мало, так як вміст змінюється лише трохи, та й взагалі використання таких тегів засуджується.

Так як збільшити розмір шрифту в html правильно? Звичайно, з допомогою css. І не тільки збільшити, але і зменшити, оскільки це теж буває необхідно.

Наприклад, гарні слова на сторінці, начебто дати публікації сторінки або іншої службової інформації, зазвичай намагаються зробити як можна менше. Такого тексту можна визначити шрифту менший, чим в основного тексту.

Заголовки ж, навпаки, повинні бути як мінімум в 2-3 рази більше основного вмісту. Також потрібно подбати про правильному відображенні підзаголовків. Тут правило таке: ні в якому разі розмір h3 не повинен бути більше, ніж у h2.

У самому ж контенті, як правило, не варто використовувати збільшення літер для залучення уваги. Краще виділити їх якимось фоном, дати їм або жирне курсивне накреслення, таке виділення набагато краще підійде основного тексту і поліпшить його сприйняття. Ну да ладно, це було трохи теорії, а тепер переходимо до суті.

У html розмір шрифту

Використовуємо CSS

Нам необхідно властивість font-size. Воно дозволяє задати розмір букв в різних одиницях виміру. В сайтобудуванні найчастіше прописують пікселі і відносні одиниці em, але давайте докладніше розглянемо всі варіанти.

Ключові слова. В css значення цієї властивості можна прописувати ключові слова smaller і larger, які зменшують і збільшують шрифт по відношенню до батьківського елементу. Можна сказати, що ефект буде аналогічним використання тегів small і big.

Абсолютний розмір за допомогою ключових слів. Інша група ключів для цієї властивості – xx-small, x-small, small, medium, large, x-large і xx-large дозволяють визначити абсолютне значення. Хоча насправді точно обчислити в пікселях його не вийде, тому що багато чого буде залежати від настройок браузерів. Можна з упевненістю сказати, що використання таких значень точно не зробить сайт кроссбраузерным.

Абсолютний розмір за допомогою одиниць вимірювань. Найбільш часто шрифт задають в пікселях (px). В цілому, це хороше рішення, але швидше за все вам доведеться трохи змінювати величину букв на різних дозволах. Наприклад, на широких екранах збільшувати шрифт. Це можна зробити за допомогою медіа-запитів, з допомогою яких реалізовують адаптивний дизайн.

Відносний розмір. По-хорошому, відносний варіант вважається найкращим способом вказати розмір шрифту в html, тому що він дозволяє досягти ідеальної читаності і гарного відображення тексту на будь-яких пристроях.

Відносну величину зазвичай задають з допомогою em і відсотків. Em являє собою висоту шрифту батьківського елемента. Так можна задати, наприклад:

body{
font-size: 12px;
}
а{
font-size: 1.2 em;
}
h1{
font-size: 2.8 em;
}
table td{
font-size: 0.9 em;
}

Таким чином, задавши всього одне абсолютне значення, все решта можна прописати відносно. Так, заголовки першого рівня стануть в 2,8 разів вище звичайного тексту на сторінці, посилання будуть зовсім трохи крупніше, а в комірках таблиці текст навпаки буде менше.

Які плюси це дасть? Якщо раптом у браузері змінитися шрифт, то у всіх елементів він змінитися пропорційно і не буде ризику, що щось у вашому верстці зламається. Також відносний розмір можна писати у відсотках. Тут все теж просто – 100% це розмір шрифту батьківського елемента. Відповідно, якщо в абзацу варто розмір 120%, а у цитат в абзаці – 150%.

Інші фактори, що впливають на текстове вміст

В основному, звичайно, з допомогою font-size можна чітко задати розміри шрифтів, але є ще кілька властивостей, які так чи інакше впливають на його обсяг. Коротко про них:

Font-variant: small-caps – це властивість з таким значенням виводить всі букви великими, але трохи меншими порівняно із звичайними. Ось таке ось нестандартну поведінку.

Text-transform: uppercase – весь текст з такою властивістю буде виводитися заголовними літерами, що відповідним чином позначиться на їх величині.

Text-transform: lowercase – протилежна ситуація, в такому тексті взагалі не буде заголовних букв.

Font-weight: bold – тут, я думаю, вам зрозуміло. Це властивість робить текст жирним, а в такому зображенні він стає трохи крупніше.

Letter-spacing: значення в пікселях – цей параметр дозволяє визначити відстань між символами. На сам розмір символів ніяк не впливає, але змінює саме ширину тексту. Можна прописувати позитивні і негативні значення.

У html розмір шрифту

Підсумок

Щоб визначити величину символів у тексті, використовуйте властивість font-size, якому можна задавати як абсолютні, так і відносні розміри. Також на це можуть опосередковано впливати інші властивості, які так чи інакше перетворюють текст. На цьому я з вами прощаюся, а ви не забувайте заглядати на наш блог в пошуках нової інформації по сайтостроению.