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

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

Давайте розумітися.

А то знань обмаль!

Фізика та лірика

Колись давним-давно букви відливались на металевих або дерев'яних брусках, і їх розміри були досить статичними. Висота літерного майданчика називалася кеглем, а вимірювали її в пунктах (у СНД 1 пункт дорівнює 0,376 мм).

Літера з лігатурою ſi. 12-й кегль, шрифт Клода Гарамона

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

Тут тобі і сантиметри, і дюйми, і ті самі пункти.

Однак коли справа стосується цифрового середовища, на арену виходять віртуальні величини вимірювання.

Розмір шрифту у векторному.

Як правило, цифрові шрифти є векторними, і всі їх метрики задаються в окремих умовних одиницях, які не мають розмірності.

Основні метрики шрифту "Нова Гельветика Тонка" у вікні налаштувань шрифтового редактора "Фонтлаб 5".

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

При цьому у векторному поданні все ж таки присутня точка відліку та міра, а точніше пропорційність окремих елементів один одному.

Гліф G зі шрифту «Нова Гельветика Тонка» у вікні гліфа програми «Фонтлаб 5».

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

Вікно налаштувань шрифту у редакторі «Фонтлаб 5». Зверніть увагу, що параметр UPM є глобальним та впливає на всі гліфи у шрифті.

UPM (Units Per Em) - це кількість умовних одиниць на кегельний (літерний) майданчик.

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

Іншими словами, UPM--це щільність тих самих одиниць, в яких вимірюються різні метрики векторного шрифту: розміри гліфів, їх напівапрошів, відступів для кернінгових пар та інші.

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

Будьте обережні, змінюючи значення UPM з 1000 на якесь інше. Ходять чутки, що не всі комп'ютерні програми коректно працюють із шрифтами, у яких значення цього параметра відрізняється від стандартного.

Прямо на процес створення або зберігання векторних шрифтів параметр UPM не впливає. Він стає важливим лише тоді, коли шрифт потрапляє у конкретну систему координат.

Наприклад, у вікно тестування/перегляду шрифту або у Фотошоп.

Розмір шрифту у Фотошопі

О, які оманливі можуть бути звичні речі! Багато дизайнерів і звичайних людей роками працюють у Фотошопі, але так ніколи і не замислювалися, а як вимірюється шрифт у цій програмі.

Щоб зрозуміти, що відбувається з векторними метриками шрифту у Фотошопі, давайте розберемося, а що означає пікселі в параметрі «розмір шрифту»?

Вікно налаштування шрифту у програмі Адобе Фотошоп.

Коли ви вибираєте розмір шрифту, наприклад, «16 px», насправді ви встановлюєте це значення для параметра PPM.

PPM(Pixels Per Em) - це кількість пікселів на кегельний майданчик.

Іншими словами, це щільність того самого умовного кегельного майданчика, але в пікселях.

Тобто, жодна з вертикальних метрик шрифту не стане рівною 16 пікселям! Ні висота малих, ні висота великих, ні відстань між верхніми і нижніми виносними елементами.

Шрифт Helvetica, PPM = 16 пікселів, згладжування у режимі Strong. Висота великих літер дорівнює 12 пікселям, а малих - 9 пікселів.

То що насправді змінює параметр «розмір шрифту»? Ви вже здогадалися? Молодці, цілком правильно.

Коефіцієнт масштабування

Змінюючи «розмір шрифту» у Фотошопі, ми, не мало не багато, змінюємо коефіцієнт масштабування при перенесенні умовних одиниць з безрозмірного світу векторів у світ розмірних пікселів. Він служить «містком» під час переходу умовних векторних метрик у пікселі.

Відбувається це в такий спосіб.

Як ви вже зрозуміли, величини UPM і PPM пов'язані між собою елементом «M», загальним множником-невизначеним розміром умовним кегельним майданчиком. Звідси отримуємо просту формулу:

Х у.о. в 1 пікселі = UPM / PPM

Використовуючи цю формулу, умовні одиниці, якими ми оперували у векторному редакторі шрифту, можна виразити у пікселях. І навпаки.

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

Живий приклад

У процесі створення шрифту «5 копійок» (5 Cent Regular) було важливо досягти абсолютної чіткості ліній при «розмірі шрифту» (PPM) у 5 пікселів у Фотошопі або в будь-якій іншій програмі.

Шрифт "5 Cent Regular" - це, мабуть, найбільші "5 копійок" у справу піксельної друкарні

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

Значення UPM для шрифту передбачалося стандартне, 1000 одиниць.

Дано:

PPM у Фотошопі = 5 пікселів

UPM шрифту = 1000 у.о.

Завдання: Знайти кількість Ху.о. для рендерингу в 1 піксель.

Рішення:

X у.о. в 1 пікселі = UPM / PPM = 1000/5 = 200.

Відповідь: 200 у.о.

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

Усі по 200!

Висновок про користь

Розуміючи значення метриків PPM та UPM, а також формулу залежності між ними, можна з необхідною точністю керувати метриками при розробці цифрового шрифту.

У цій статті ми розглянемо різні способи, за допомогою яких можна встановити розмір шрифту HTML .

Огляд одиниць виміру

Одиниці виміру можна розділити на дві категорії: абсолютні та відносні.

Абсолютні одиниці є фіксованими і належать до будь-яких фізичних одиниць виміру. Після того як вони були задані, розмір не змінюється.

Відносні одиниці немає фактичного значення. Їх розмір визначається щодо батьківського елемента. Це означає, що розмір шрифту можна змінити в HTML шляхом зміни розмірів зв'язаного елемента.

Ось короткий огляд деяких одиниць виміру:

Я докладніше розгляну ті одиниці виміру, які є найбільш значущими - px, pt, %, em, rem і vw.

Яка між ними різниця?

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

Приклад 1 — Налаштування за замовчуванням

У HTML-документі , де ви ще не встановлювали жодних розмірів шрифтів, існують стандартні налаштування. У більшості браузерів розмір стандартного шрифту для розділів html і body — 100%. Що відповідає такому:

100% = 1em = 1rem = 16px = 12pt

Це означає, що якщо ви встановите розмір шрифту для одного блоку<р>в 100%, а для іншого - 16px, на екрані вони будуть виводитися з одним і тим же розміром шрифту:

Приклад 2 - Абсолютні та відносні одиниці вимірювання

Різницю між абсолютними та відносними одиницями виміру простіше зрозуміти на прикладі, коли ми хочемо розмір шрифту HTML задати для конкретного елемента. Якщо ми задамо html (font-size: 200%), це вплине тільки на блоки<р>з розміром шрифту, заданим у відносних одиницях:

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

Приклад 3 - rem та em (і %)

Одиниці вимірювання em (і %) працюють шляхом обчислення поточного розміру шрифту залежно від розміру батьківського шрифту елемента.

Наприклад:

html ( font-size: 100% /* =16px */ ) body ( font-size: 2em; /* =32px */ ) p ( font-size: 1em; /* =32px */ /* font-size: 0.5em;=16px */ )

Оскільки р є дочірнім елементом body, який у свою чергу є дочірнім html — параграфи, font-size яких задані за допомогою em і відсотків, матимуть два різні розміри шрифту HTML:

При використанні Em ви повинні брати до уваги розмір шрифту всіх батьківських елементів. Інакше це може призвести до повної плутанини.

Вирішенням цієї проблеми є rem. Він розраховується лише з урахуванням розміру шрифту елемента html , а чи не батьківського елемента.

Наприклад:

html ( font-size: 100% /* =16px */ ) body ( font-size: 2rem; /* =32px */ ) p ( font-size: 1rem; /* =16px */ )

Використання rem дозволяє зберегти масштабованість em без впливу ієрархії елементів.

Приклад 4 — Розмір шрифту на основі ширини вікна перегляду

vw - це нова одиниця виміру CSS3, яка використовує для зміни розміру шрифту HTML ширину вікна перегляду. Це дозволяє задавати розміри шрифтів у адаптивних макетах.

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

Мій метод

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

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

Тому моє рішення полягає у використанні в html коді розміру шрифту rem ( і пікселів як запасний варіант):

html ( font-size: 62.5%; /* для простоти обчислень як базовий розмір шрифту задається 10 пікселів */ ) body ( font-size: 16px; font-size: 1.6rem; /* встановлюємо розміри шрифтів за умовчанням, щоб бути впевненими, що розміру 10 пікселів у нас ніде не буде */ ) h1 ( font-size: 32px; font-size: 3.2rem; )

Це дозволяє змінювати розміри шрифтів за допомогою наступного коду:

@media screen and (min-width: 1280px) ( html ( font-size: 100%; ) )

Цей метод використовує пікселі як запасний варіант, оскільки rem не підтримується в IE8 і нижче. Через це, коли я змінюю розмір шрифту HTML для забезпечення масштабованості, це не зачіпає резервний варіант. Але це не проблема, тому що можливість масштабування для більших екранів є необов'язковою.

Переклад статті CSS Font Sizing був підготовлений дружною командою проекту.

Шрифт (від нім. Schrift) - це малюнок, накреслення букв будь-якого алфавіту, цифр і знаків.

Шрифти креслярські (ГОСТ 2.304-81) призначені для виконання написів, зображення умовних знаків і розмірних чисел на кресленнях. Для виконання написів у кресленні використовують ГОСТ. ГОСТ встановлює номери креслярських шрифтів (1,8; 2,5; 3,5; 5; 7; 10; 14; 20; 28; 40) російської, латинської та інших алфавітів.

Перший стандарт «Шрифти для написів» було розроблено та затверджено у 1919 р.

Номер шрифту відповідає висоті (h) великої літери. Наприклад, шрифт № 5 має висоту великої літери, що дорівнює 5 мм.

Висота літери вимірюється перпендикулярно до основи рядка. Шрифт виконується з нахилом 75° (ГОСТом допускається виконувати написи креслярським шрифтом без нахилу).

Для зручності написання букв креслярського шрифту вибудовують допоміжну сітку (рис. 35), яку виконують в такий спосіб. Проводять нижню і верхню лінії рядка, відстань між якими дорівнює висоті великої літери. Відкладають на нижній лінії рядка ширину літер та відстань між ними (табл. 3).

Використовуючи кути 45° і 30° косинців, будують нахил літер у рядку, що дорівнює 75°.

Розгляньте накреслення букв креслярського шрифту (рис. 35-37). Вони відрізняються наявністю горизонтальних, вертикальних, похилих ліній та заокруглень, шириною та висотою. На малюнках показано (стрілками) послідовність зображення кожної літери.

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

Мал. 36. Напис великих букв, що складаються з горизонтальних, вертикальних і похилих елементів

Мал. 37. Напис великих букв, що складаються з прямолінійних і криволінійних елементів

Мал. 38. Напис малих літер, що відрізняються від написання великих літер

Як ви, напевно, вже помітили, зображення багатьох малих і великих літер не відрізняються між собою, наприклад К - до, О - про та ін Накреслення деяких малих літер відрізняється від написання великих (рис. 38).

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

3. Розміри букв креслярського шрифту

Незважаючи на те, що відстань між літерами визначена стандартом, вона повинна змінюватися в залежності від того, яке накреслення мають букви, що стоять поруч. Наприклад, у слові РОБОТА (рис. 39, а) відстанню між буквою P і A, T і А необхідно знехтувати (тобто відстань має дорівнювати нулю), оскільки їх накреслення візуально створює достатній міжлітерний просвіт. З цієї причини стандартну відстань між літерами Б і О, 0 і T слід скоротити наполовину. Якщо такими умовами знехтувати, то літери в слові будуть розсипатися (рис. 39, б).

Мал. 39. Облік міжлітерного просвіту під час написання слів: а - правильно; б - неправильно

Мал. 40. Цифри та знаки

Накреслення цифр і знаків показано на малюнку 40. (При виконанні креслень вибирайте висоту шрифту щонайменше 3,5 мм.)

Дата введення 01.01.82

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

1. ТЕРМІНИ І ВИЗНАЧЕННЯ

2. ТИПИ І РОЗМІРИ ШРИФТУ

Таблиця 1

Шрифт типу А (d = h/14)

Таблиця 2

Шрифт типу Б (d = h/10)

2.4. Граничні відхилення розмірів букв та цифр ± 0,5 мм.

3. РОСІЙСЬКИЙ АЛФАВІТ (КИРИЛИЦЯ)

3.2. Шрифт типу А без нахилу наведено на рис. 6.

3.3. Шрифт типу Б з нахилом наведено на рис. 7.

3.4. Шрифт типу Б без нахилу наведено на рис. 8.

4. ЛАТИНСЬКИЙ АЛФАВІТ

4.2. Шрифт типу А без нахилу наведено на рис. 10.

4.3. Шрифт типу Б з нахилом наведено на рис. 11.

4.4. Шрифт типу Б без нахилу наведено на рис. 12.

4.5. Види, форма та розташування діакритичних знаків для шрифтів типів А та Б без нахилу наведені у довідковому додатку. Діакритичні знаки для шрифтів з нахилом слід виконувати за тими самими правилами.

5. ГРЕЦЬКИЙ АЛФАВІТ

5.2. Шрифт типу А без нахилу наведено на рис. 14.

5.3. Шрифт типу Б з нахилом наведено на рис. 15.

5.4. Шрифт типу Б без нахилу наведено на рис. 16.

5.5. Найменування букв грецького алфавіту, наведених на рис. 13 - 16:

6. АРАБСЬКІ ТА РИМСЬКІ ЦИФРИ

6.2. Шрифт типу Б наведено на рис. 18.

Примітки: 1. Римські цифри L, С, D, М слід виконувати за правилами латинського алфавіту. 2. Римські цифри допускається обмежувати горизонтальними лініями.

7. ЗНАКИ

7.2. Шрифт типу А без нахилу наведено на рис. 20.

7.3. Шрифт типу Б з нахилом наведено на рис. 21.

7.4. Шрифт типу Б без нахилу наведено на рис. 22.

7.5. Найменування знаків наведено у табл. 3.

Таблиця 3

8. ПРАВИЛА НАПИСАННЯ ДРОБІВ, ПОКАЗНИКІВ, ІНДЕКСІВ І МЕЖНИХ ВІДКЛОНЕНЬ

Таблиця 4

ДОДАТОК

Довідкове

ДІАКРИТИЧНІ ЗНАКИ

Німецька мова

Польську мову

Румунська мова

Чеська та словацька мова

ІНФОРМАЦІЙНІ ДАНІ

1. Розроблений і внесений Державним комітетом СРСР за стандартами2. ЗАТВЕРДЖЕНИЙ І ВВЕДЕНИЙ У ДІЮ Постановою Державного комітету СРСР за стандартами від 28.03.81 № 15623. (Виключено, Зм. № 2)4. ВЗАМІН ГОСТ 2.304-685. Видання (липень 2001 р.) із Зміною № 1, затвердженим у березні 1989 р. (ІУС 7-89)

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

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

Чинний на сьогоднішній день ГОСТ 2.304 – 81говорить про те, що для креслярського шрифту передбачено десять розмірів, а саме: 1,8 ; 2,5 ; 3,5 ; 5 ; 7 ; 10 ; 14 ; 20 ; 28 ; 40 . При цьому під розміром мається на увазі та величина, яка визначає висоту великої (великої) літери. При цьому вимірюється вона по відношенню до основи рядка перпендикулярно їй. Цей параметр шрифтупозначається буквою ( h) та є його розміром. Щодо таких літер, як Щ, Ц, Д, то нижні їх елементи, а також верхній елемент літери Йвиконуються за рахунок відстаней між рядками.
	Товщина ліній також є одним із параметрів, які має креслярський шрифт. Товщина ліній позначається буквою ( d), а її розмір дорівнює 0,1h. .
Літерою ( g) позначається ширина великих літер, а дорівнює вона 6d або 0,6h, Причому цей розмір приблизно відповідає величині ( h), який має шрифтнайближчого найменшого номера. Це правило не поширюється на такі літери, як Ю, Ы, Ц, Х, М, Д, А. Їхня ширина дорівнює 0,7d. Крім того, виняток також поширюється на літери Ъ, Ш, Щ, Ф, Ж, для яких цей параметр складає 0,8d, а також на літери З, Зі Гширина яких рівна 0,5d.
	Для переважної більшості малих літер параметр ( з), що позначає їх висоту, дорівнює 0,7h. Цей розмір приблизно дорівнює тому, що має шрифтнайближчого найменшого номера. Наприклад, той шрифт, який має номер 10 , мала літера буде висотою 7 міліметрів, а цей же параметр для малої літери номер 7 – 5 міліметрів. Що стосується нижніх і верхніх елементів, які мають малі літери, то вони мають розмір 3d, що виконується відстанями між рядками.
Ширина малих літер позначається символом ( g), а її величина дорівнює 5d. Виняток становлять літери а, м, ц, ъширина яких рівна 6d; для букв з,з- 4d; а для букв ж, т, ф, ш, щ, ы, ю – 7d.
	Спеціальна допоміжна сітка була розроблена для того, щоб малюнки-початківці навчилися наносити шрифтвручну. Вона утворюється тонкими допоміжними лініями, між якими мають бути вписані букви. Той крок, який має допоміжні лінії сітки, залежить від того, яке значення має параметр ( d) (тобто товщина ліній самого шрифту).

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

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

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

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

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