Огляд
Bellota Text шрифт — це display-шрифт із підтримкою української мови. Його варто розглядати насамперед для помітних текстових елементів: заголовків, обкладинок, hero-блоків, коротких акцентних написів. У наборі є кирилиця, тож шрифт можна перевіряти не лише на латиниці, а й на реальних українських фразах.
Що варто знати перед використанням
Bellota Text доступний у трьох товщинах: 300, 400 і 700. Це не variable-шрифт, тому довільно змінювати вагу між цими значеннями не вийде без синтезу браузером або графічним редактором. Для стабільного результату краще закладати в дизайн саме наявні накреслення.
Окремий плюс — наявність italic для кожної доступної ваги. Це дає більше варіантів для акцентів, цитат, підписів або коротких виділених фрагментів. За мовною підтримкою набір охоплює latin, latin-ext, vietnamese і cyrillic, а українська підтримка підтверджена окремо.
| Категорія | display |
|---|---|
| Насиченості | 300, 400, 700 |
| Стилі | Italic, Normal |
| Variable font | Ні |
| Кирилиця | Так |
| Українська | Так |
Як виглядає шрифт у реальному тексті
Найкраще оцінювати Bellota Text не лише за назвою чи категорією, а в живому наборі. У превʼю можна змінити текст, розмір і товщину, щоб швидко перевірити, як шрифт поводиться в заголовках, коротких українських фразах або латинських написах.
The quick brown fox jumps over the lazy dog.
Українська та кирилиця
Bellota Text підтримує кирилицю і має підтверджену підтримку української мови. Це означає, що в наборі є українські символи, зокрема характерні літери на кшталт ї, є, і, ґ. Для українських інтерфейсів, промоматеріалів або заголовків це суттєво: не потрібно замінювати шрифт лише через відсутність базових літер.
Перед фінальним використанням усе одно варто перевірити свій конкретний текст у превʼю. Особливо якщо в макеті є великі кеглі, капслок, змішані українсько-латинські фрази або нестандартні пунктуаційні комбінації.
Bellota Text підтримує українську мову. Шрифт містить ключові українські літери Ґ, Є, І та Ї.
А а Б б В в Г г Ґ ґ Д д Е е Є є Ж ж З з И и І і Ї ї Й й К к Л л М м Н н О о П п Р р С с Т т У у Ф ф Х х Ц ц Ч ч Ш ш Щ щ Ь ь Ю ю Я я
Накреслення
Набір має обмежену, але практичну структуру: легка вага для менш щільних акцентів, регулярна для базового набору і жирна для сильнішого виділення. Оскільки шрифт статичний, краще не планувати проміжні значення товщини як обовʼязкову частину системи.
Italic-версії можна використовувати для контрасту всередині одного шрифтового рішення: наприклад, у підзаголовках, коротких цитатах або декоративних підписах.
Де цей шрифт доречно розглядати
Оскільки Bellota Text належить до категорії display, його логічно спершу тестувати там, де текст має бути помітним і відносно коротким. Це можуть бути заголовки сторінок, hero sections, постери, обкладинки, банери, назви блоків, брендовані написи або візуальні акценти в соціальних креативах.
Для довгого body text сама категорія display не дає гарантії зручності читання. Якщо ви хочете набирати ним великі абзаци, краще перевірити реальні фрагменти: кілька абзаців українською, різні розміри, міжряддя, мобільний екран і темну тему, якщо вона є в продукті.
У вебдизайні Bellota Text можна розглядати як шрифт для верхнього рівня ієрархії: H1, H2, короткі CTA-блоки, промозаголовки. Для інтерфейсів із великою кількістю дрібного тексту варто бути обережнішим і порівняти його з більш нейтральними текстовими шрифтами.
Символи і набори
У Fontsource-даних для Bellota Text заявлені такі набори: cyrillic, latin, latin-ext і vietnamese. Це означає, що шрифт покриває не лише базову латиницю, а й розширені латинські символи, кириличний набір та вʼєтнамські символи.
Нижче можна переглянути доступні гліфи у візуальному вигляді. Це корисно, якщо у проєкті є специфічні символи, багатомовні фрагменти, українська пунктуація або змішаний набір мов.
Доступні набори символів: cyrillic, latin, latin-ext, vietnamese
Ґ ґ Є є І і Ї ї Аа Бб Вв Гг Дд Ее Жж Зз
0 1 2 3 4 5 6 7 8 9
.,:;!? — – «» “ ” ( ) [ ]
CSS
Цей блок показує базовий спосіб використання font-family для Bellota Text у CSS. Якщо ви плануєте кілька товщин або italic, не забудьте підключити саме ті накреслення, які реально використовуються в макеті.
font-family: "Bellota Text", sans-serif;\nfont-weight: 400;\nfont-style: normal;