EN
Пошук ...

Шрифти веб -сайту

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

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

У цій статті:

  1. Поточний набір шрифтів
  2. Попередні налаштування шрифтів
  3. Розширене редагування
  4. Скинути спеціальні налаштування
  5. Альтернативні шрифти від Google

Ви можете керувати шрифтами для свого веб-сайту з Дизайн (1) розділ.

У розділі «Дизайн» натисніть Шрифти (2) вкладка.

Поточний набір шрифтів

  • Вибрано Попереднє налаштування шрифту (1) буде відображено тут.
  • Ви можете налаштувати Тема (2) і пункт (3) шрифт для вибраного стилю.

Примітка: Після внесення власних налаштувань до параметрів колірної палітри або розширеного редагування ви побачите «Змінено» (4) кнопка.

  • Верхній текст (5) представляє шрифт заголовка.
  • Нижній текст (6) позначає шрифт абзацу.

Примітки:

  • Зміна шрифту заголовка також вплине на назву сайту та пункти меню.
  • Зміна шрифту абзацу також вплине на кнопки, галереї (заголовок зображення) і текст нижнього колонтитула.

Попередні налаштування шрифтів

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

  • Ви можете легко змінити шрифт глобально, вибравши будь-який із Попередні налаштування шрифтів (1).
  • Фільтр (2) список, вибравши всі, Serif, Sans Serif або Mixed стилі. Вибравши фільтр, ви побачите лише відповідні стилі.
  • Щоб вибрати a Попереднє налаштування шрифту (3), вам просто потрібно натиснути на нього та Публікувати (4) зміни.

  • Прокрутіть список шрифтів до кінця, щоб отримати доступ до нього та вибрати один із доступних. ОФЛ шрифти.

Розширене редагування

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

Тут ви побачите такі параметри:

Назва Сайту

Це заголовок вашого веб-сайту, який діє як текст логотипу, якщо основний логотип недоступний.

З тут Ви можете:

  1. Шрифт – Виберіть шрифт для назви сайту.
  2. Вага - Виберіть товщину шрифту для назви сайту.
  3. Розмір – Настільний – Вкажіть розмір тексту для назви сайту на робочому столі.
  4. Розмір – мобільний – Укажіть розмір тексту для назви сайту на мобільному пристрої.
  5. Інтервал між літерами – Встановіть пробіл між літерами в назві сайту.

Меню заголовка

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

З тут, ви можете налаштувати:

    1. Шрифт – Вкажіть шрифт для посилань меню.
    2. Вага - Виберіть товщину шрифту для посилань меню.
    3. Розмір - Вкажіть розмір тексту для посилань меню.
    4. Інтервал між літерами – Встановіть пробіл між літерами в посиланнях меню.

    1. Шрифт – Укажіть шрифт для посилань спадного меню.
    2. Вага - Виберіть товщину шрифту для посилань спадного меню.
    3. Розмір - Укажіть розмір тексту для посилань спадного меню.
    4. Інтервал між літерами – Установіть пробіл між літерами в посиланнях спадного меню.

Рубрики

Теги заголовків мають вирішальне значення, оскільки вони допомагають структурувати вміст, покращують SEO, підвищують доступність і читабельність. Pixpa пропонує чотири типи тегів заголовків. Це заголовок (H1), заголовок (H2), заголовок (H3) і заголовок (H4).

З тут Ви можете:

  1. Шрифт – Вкажіть стиль шрифту для заголовка (H1).
  2. Вага - Виберіть товщину шрифту для заголовка (H1).
  3. Розмір – Настільний – Вкажіть розмір шрифту заголовка (H1) для робочого столу.
  4. Розмір – мобільний – Вкажіть розмір шрифту заголовка (H1) для мобільного.
  5. Висота лінії – Вкажіть висоту рядка шрифту для заголовка (H1) (вказано в термінах em).
  6. Інтервал між літерами – Вкажіть відстань між літерами тексту заголовка (Н1) (вказано в термінах em).

Примітка: Подібно до Заголовка (H1), ви можете налаштувати параметри для стилів шрифту H2, H3 і H4.

Відступ тексту (заголовки)

  • Заголовки – Укажіть відступи для заголовків на вашому веб-сайті.

Пункти

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

З тут Ви можете:

  1. Шрифт – Виберіть стиль шрифту для всього тексту абзацу (звичайний, малий і великий).
  2. Вага - Виберіть товщину шрифту для всього тексту абзацу.
  3. P (Звичайний) – Робочий стіл – Виберіть Звичайний розмір шрифту всього тексту абзацу для робочого столу.
  4. P (Звичайний) – Мобільний – Виберіть Звичайний розмір шрифту всього тексту абзацу для мобільних пристроїв.
  5. P (Small) – Робочий стіл – Виберіть менший розмір шрифту (менше P (звичайний)) усього тексту абзацу для робочого столу.
  6. P (Small) – Мобільний – Виберіть менший розмір шрифту (менше P (звичайний)) усього тексту абзацу для мобільних пристроїв.
  7. P (великий) – робочий стіл – Виберіть більший розмір шрифту (більший за P (звичайний)) усього тексту абзацу для робочого столу.
  8. P (великий) – мобільний – Виберіть більший розмір шрифту (більший за P (звичайний)) усього тексту абзацу для мобільних пристроїв.
  9. Висота лінії – Укажіть висоту рядка шрифту для тексту абзацу (зазначену в термінах em).
  10. Інтервал між літерами – Укажіть інтервал між літерами тексту абзацу (вказується через em).

Відступ тексту (абзаци)

Абзац – Укажіть відступи для абзаців на вашому веб-сайті.

Кнопки

Кнопки – це елементи, які ви можете натиснути або торкнутися, щоб виконати певні дії, наприклад надіслати форму або перейти на іншу сторінку.

З тут Ви можете:

  1. Шрифт – Тут ви можете вибрати шрифт для тексту кнопки.
  2. Вага - Тут установіть товщину шрифту для тексту кнопки. Ви можете вибрати звичайний, світлий і жирний.
  3. Розмір (великий) – Встановіть великий розмір шрифту для кнопок.
  4. Розмір (середній) – Встановіть середній розмір шрифту для кнопок.
  5. Розмір (малий) – Встановіть дрібний розмір шрифту для кнопок.
  6. Інтервал між літерами – Звідси встановіть пробіл між літерами тексту кнопки (вказано в em).

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

  1. Шрифт – Вкажіть стиль шрифту для тексту нижнього колонтитула.
  2. Вага - Тут можна встановити товщину шрифту для тексту нижнього колонтитула. Ви можете вибрати між звичайною, світлою та жирною.
  3. Розмір тексту – Визначте розмір шрифту для тексту нижнього колонтитула.
  4. Розмір меню – Встановіть розмір шрифту для елементів меню нижнього колонтитула.
  5. Розмір заголовка сайту (версія для комп’ютерів) – Налаштуйте розмір заголовка нижнього колонтитула сайту під час перегляду на комп’ютері.
  6. Розмір заголовка сайту (мобільний) – Налаштуйте розмір заголовка нижнього колонтитула сайту під час перегляду на мобільних пристроях.
  7. Інтервал між літерами – Вкажіть інтервал між літерами для тексту нижнього колонтитула (вимірюється в em).

Різне

Це деякі інші налаштування в налаштуваннях шрифту. Від тут Ви можете:

Це застосовується, коли ви вирішуєте відображати заголовки зображень при наведенні курсора.

    1. Шрифт наведення – Тут можна вибрати шрифт для тексту заголовка зображення при наведенні курсора.
    2. Вага наведення – Тут установіть товщину шрифту для тексту заголовка зображення. Ви можете вибрати звичайний, світлий і жирний.
    3. Розмір наведення – Звідси встановіть розмір тексту заголовка зображення при наведенні курсора.
    4. Інтервал між літерами – Тут встановіть пробіл між літерами тексту заголовка зображення (вказано в em).

Скинути спеціальні налаштування

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

Ви побачите кнопку «Змінено». Наведіть курсор на кнопку, вона зміниться на Скинути. Ви можете відновити початкові зміни тут.

Альтернативні шрифти від Google

Ось кілька альтернативних шрифтів Google для деяких популярні шрифти:

  • Брендон Гротеск – Жозефін Санс
  • Софія Про – Поппінс
  • Авенір – Lato or Речення-запит (промпт)
  • Проксима Нова – Montserrat  or Roboto
  • Proxima Soft – Нуніто
  • DIN – Великий складаний кишеньковий ніж
  • Charter - Джерело Serif Pro
  • Helvetica Neue – Roboto or Працюйте без
  • Вітні - Катамаран or лань
  • Готем - Montserrat
  • Tisa Serif – EN serif
  • Музейна плита – Плита Зілла or Robot Slab
  • Оптима – арсенал
  • Сколар – Джерело Serif
  • готичний лист – Фіра Моно
  • Segoe UI – Відкрити sans
  • Futura – Мулі
  • Гібсон – Noto sans
  • Zona Pro – Поппінс
  • Міньйон – Багряний текст
  • Mostra Nuova – Жозефін Санс
  • Геогротеск – Армата
  • Баскервіль – Лібре Баскервіль
  • Страж - Домін
  • Neuzeit – лань
  • Міллер - Абріл Товстун
Мітки:

Не можете знайти те, що шукаєте?

Зв’яжіться з експертом Pixpa.

Контакти
Pixpa Studio щойно оновлено. Ми зараз оновлюємо всі скріншоти довідкових статей.