Остаточний посібник з типографіки: розмір точки, верхній чи нижній регістр, тире Em та En та багато іншого

Типографіка - це область, яка стосується написаного слова та способу подання букв та символів.

Одні і ті ж літери можна по-різному стилізувати для передачі різних емоцій. І є всілякі компроміси навколо стилю проти читабельності.

У цій статті ми розглянемо деякі менші - але все ще важливі - деталі, пов’язані з типографікою, такі як розмір крапок, великі та малі літери, em проти en тире, кернінг тощо.

Розмір точки

Розмір окулярів - це спосіб ввести стандартизацію в типографіку. Розмір точки - це найменша одиниця виміру.

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

html{ font-size:16px; } body{ font-size:1em; // 1em is equal to 16px }

Розмір точки також використовується для вимірювання початкової (висота рядка), довжини рядка та інших елементів, крім розміру шрифту.

У цифрових шрифтах одна точка дорівнює 1/72 дюйма . Дванадцять очок - це одна піка. Шість піка складають один дюйм. Поширений спосіб подання пікасів та балів такий:

  • 1 піка = 1п
  • 1 бал = 1 бал або p1
  • 6 піка і 3 бали = 6p3
  • 7-бальний Open Sans з 9 очками провідних = 7/9 Open Sans

Оптимальний розмір точки для друку зазвичай становить 10-12 пунктів, тоді як для веб-сторінок оптимальний розмір точки становить 15-25 пунктів.

У CSS слід встановити розмір шрифту в ems або rems ніж пікселі, оскільки перші мають масштабований характер. Останнім часом багато говорять про рідинну типографіку з використанням нещодавно введених агрегатів vw та vh.

Дізнайтеся більше про це тут: Рідка типографіка

Пам’ятайте, різні шрифти, встановлені з однаковим розміром точки, не будуть мати однаковий розмір через свої індивідуальні характеристики, а саме - висоту x, модуляцію обведення або контрастність та ширину символів.

Верхній і нижній регістр символів

Велику літеру (UC) по-іншому називають капіталізацією. Це гарнітура більших символів. Малі регістри (LC) - це шрифт із малих символів. Поки клавіша Shift не натискається, а Caps Lock не активний, все набране вводиться малими літерами. Великі та малі регістри часто є синонімами Маджускули та Мінускули.

Багато мов мають два різні письмові подання своїх букв, великі та малі регістри, також відомі як великі та мінускульні форми.

Великі та малі літери часто змішуються в одному фрагменті тексту. Використання відмінків вирішується граматикою, але існує також різноманітна форма відмінків. Деякі стилі регістрів є загальноприйнятими в комп'ютерному програмуванні, що називається умовами іменування, наприклад CamelCase та snake_case.

Великі літери:

а Б В Г Г Д Е Є Ж З И І Ї Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ ью я

Малі літери:

а Б В Г Г Д Е Є Ж З И І Ї Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ ью я

Великі літери важливі з наступних причин:

  • Паролі: паролі чутливі до регістру, тому використання великих літер додає додатковий рівень захисту.
  • Вимірювання: При роботі з комп’ютерними вимірами та іншими вимірюваннями великі літери мають велике значення для ідентифікації точного типу вимірювань. Наприклад, “Mb” (скорочення від “Мегабіт”) і “MB” (скорочення від “Мегабайт”) - це два різні типи вимірювань з різними значеннями.
  • Команди
  • Імена файлів, каталоги та шляхи.

Емс і Енс

Ems та Ens - це форма пунктуаційного знака, що називається «тире». Хоча за зовнішнім виглядом вони схожі на дефіс, вони служать різним цілям.

Em Dash

Використовуйте тире Em для позначення перерви в реченні. Замініть його комою або для позначення паузи у реченні. Вони також використовуються для приписування цитати оратору. Тире «Em» - це одна ширина в ширину - ширина величини крапки шрифту. Не ставте пробілів до і після тире.

Наприклад: Шум із сусідського будинку - це вбиває мене.

  • Команда для тире Em на Mac: Shift-Option-Дефіс
  • Команда для тире Em у Microsoft Word: Alt + Ctrl + (мінус)
  • Тире в HTML: або

En Dash

Використовуйте тире En як заміну слову "до" або для позначення діапазону чисел. Тире En - це половина ширини тире Em. Не ставте пробіли перед і після тире.

Наприклад: Перша світова війна тривала з 1914–1918 років.

  • Команда для тире En на Mac: Option-Дефіс
  • Команда для тире En у Microsoft Word: Ctrl + (мінус)
  • Тире в HTML: або

Кернінг та відстеження

Кернінг відноситься до інтервалу між двома окремими символами в слові.

Відстеження відноситься до інтервалу між словами.

Деякі шрифти не розроблені для того, щоб бути ядровими або відстежуватися занадто вільно, і навпаки. Якщо хтось зліпить або відстежує занадто щільно чи занадто вільно, вони ризикують пожертвувати читабельністю та розбірливістю.

Вирішуючи, наскільки жорстким або вільним є керн або відстеження тексту, бажано спочатку врахувати масштаб, з яким буде взаємодіяти текст. Якщо його потрібно надрукувати, наскільки далеко від надрукованого тексту буде переглядач? Вони проїдуть? Чи буде це читатися на екрані з підсвічуванням?

Слід також враховувати позитивні та негативні підстави при відстеженні та кернінгу. Відстеження занадто щільно або занадто вільно може призвести до незручних відносин між фігурою та землею, які відвернуть увагу користувача.

Розбірливість і читабельність

Розбірливість

Розбірливість означає можливість розрізнення різних символів у тексті. Розбірливий текст означає, що його можна легко інтерпретувати. Погляньте на унікальні характеристики гарнітури, розглядаючи розбірливість. Деякі з міркувань такі:

  • Ви повинні використовувати кожен шрифт відповідно до його контексту та передбачуваного використання . Подивіться на його історію, і це найкращі сценарії використання. Наприклад: Garamond найкраще використовувати для великих текстів на друці, тоді як Georgia для екрану.
  • Майте на увазі, чи накреслений шрифт для відображуваного тексту чи основного тексту .
  • Висота x шрифту - це розмір нижнього регістру "x" у шрифті. Шрифт із середньою та високою висотою x дає текст розбірливим навіть при невеликих розмірах.
  • Зазвичай зарубок шрифти більш чіткими для основного тексту , ніж їх без зарубок колег.

Читаність

Читаність означає упорядкування групи слів або блоків тексту таким чином, щоб зробити текст більш доступним. Ідея полягає в тому, щоб зменшити кількість зусиль, необхідних для читання основного тексту.

Стівен Коулз зауважує, що читабельність не лише ставить питання "Чи можете ви це прочитати?" але чи "ти хочеш це прочитати?" .

Джейсон Санта-Марія зазначає у своїй книзі Про веб-типографіку, що читання не є лінійною діяльністю. Ми читаємо рухами вперед і назад, які називаються саккадами , тобто наші очі стрибають від однієї точки до іншої. Крім того, текст із знайомими словами полегшує нам читання. Деякі основні моменти, які слід пам’ятати при розгляді читабельності, такі:

  • Контраст стосується зміни товщини штриха в різних частинах літери. Чим вище контраст, тим вище зміна удару. Використовуйте шрифти середнього та низького контрасту для довгих текстів.
  • Висота рядка - це відстань між двома рядками тексту. Ви не хочете робити блок тексту ні занадто щільним, ні занадто вільним. Ви можете керувати висотою рядка в CSS за допомогою властивості 'line-height'. Для більшості текстів ви можете встановити його від 1,2 до 1,5 (без одиниць).
  • Довжина рядка (міра) відноситься до середньої кількості символів у рядку тексту. Велика довжина рядка ускладнює читабельність, ускладнюючи для наших очей сканування тексту. Зазвичай для основного тексту оптимальним є приблизно 45-75 символів на рядок. Якщо ви плануєте збільшити довжину рядка понад цю, подбайте також про збільшення висоти рядка, щоб між двома рядками тексту було достатньо місця. У CSS ви можете встановити ширину контейнера, а використовуючи блок em, ви можете наблизитись до заданої кількості символів, залежно від співвідношення ширини до висоти шрифту. Приклад: ширина: 35em;
  • Відстеження стосується регулювання простору між символами в тексті. Додавання відстеження означає додавання пробілу між символами та навпаки. При невеликих розмірах шрифту, тобто менше 10 балів, додавання відстеження допомагає покращити читабельність. Так само для великих заголовків використовуйте негативне відстеження, щоб наблизити літери. Ви можете керувати відстеженням у CSS за допомогою властивості 'інтервал між літерами'. Наприклад: інтервал між літерами: 0,05em;
  • Розмір шрифту - це розмір шрифту, який використовується в тексті. Для мобільного дисплея використовуйте розміри не менше 12 пікселів. Ви можете керувати розміром шрифту в CSS за допомогою властивості 'font-size'. Приклад: розмір шрифту: 48 пікселів;

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

Колір та тональне значення

У теорії кольорів тональне значення отримується шляхом додавання білого, сірого або чорного до вибраного кольору. Це не змінює відтінок, але змінює кольоровість, також відому як насиченість. При обговоренні тонального значення слід обговорити три основні терміни: відтінок, тон і відтінок.

Відтінок - це додавання білого до кольору. Відтінок можна використовувати для виділення ділянки, а також для створення ілюзії глибини об’єкта.

Тон - це додавання сірого до кольору. Тональний колір створює більш приглушений і менш насичений колір.

Тінь - це додавання чорного до кольору. Тінь можна використовувати для затемнення та створення площі, щоб створити ілюзію глибини об’єкта.

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

Більше про типографіку:

  • Типографіка: анатомія літерних форм
  • 8-точкова сітка: типографіка в Інтернеті
  • Чому типографіка може зробити або зламати ваш дизайн