Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
#Круги добра
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр Коллекционная карточная онлайн-РПГ. Собери уникальную колоду фэнтезийных героев и сражайся в дуэлях и на арене с другими игроками!

Повелители стихий

Карточные, Мидкорные, Ролевые

Играть

Топ прошлой недели

  • SpongeGod SpongeGod 1 пост
  • Uncleyogurt007 Uncleyogurt007 9 постов
  • ZaTaS ZaTaS 3 поста
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
0 просмотренных постов скрыто
design.all
design.all
1 месяц назад

Разнообразие шрифтов улучшающее читаемость информации⁠⁠

Разнообразие шрифтов улучшающее читаемость информации Дизайн, Font

Типографика в дизайне: как шрифт управляет вниманием

Читаемость и акценты как основа восприятия

Типографика — не просто про шрифты. Это система визуального мышления, в которой каждый элемент работает на восприятие. Хорошо оформленный текст читается быстрее, проще, а главное — понятнее.

Шрифт — это голос интерфейса

Каждая гарнитура транслирует тональность и характер бренда.
Шрифт с засечками передаёт серьёзность и традиции. Без засечек — современность, лёгкость, цифровую нейтральность.

Примеры:

  • Times New Roman — авторитет, формальность

  • Arial — универсальность

  • Yandex Sans — баланс технологичности и читаемости

Иерархия как структура

Типографика создаёт визуальную иерархию: от заголовков до мелких пояснений.
Когда уровни читаются последовательно — интерфейс воспринимается интуитивно.

Рекомендованные уровни:

  • Заголовок: 24–32 pt

  • Подзаголовок: 18–20 pt

  • Основной текст: 14–16 pt

  • Мелкие элементы: 12 pt

Акценты — через начертание, цвет, размер. Но в умеренном объёме.

Контраст — главный инструмент акцентирования

Хорошая типографика — это баланс между ритмом и выделением. Контраст создаётся не только цветом, но и:

  • Размером

  • Жирностью

  • Интерлиньяжем

  • Отступами

Чем чётче структура — тем быстрее считывается смысл.

Ритм и дыхание текста

Интерфейсный текст должен быть воздушным. Используемые параметры:

  • Интерлиньяж: на 30–40% выше кегля

  • Кернинг: выровнен вручную

  • Трекинг: сдержанный

  • Длина строки: не более 70 символов

Если глазу комфортно — мозгу понятно.

Минимализм в шрифтах

Чем меньше шрифтов в макете — тем чище восприятие.

Оптимально:

  • Одна гарнитура

  • 2–3 начертания (Regular, Bold, Italic)

Слишком пёстрые сочетания шрифтов теряют доверие и визуальную логику.

Типографика — инструмент навигации

Шрифт в интерфейсе работает на пользователя:

  • помогает быстро найти главное

  • снижает когнитивную нагрузку

  • усиливает визуальную идентичность

  • делает интерфейс живым, но системным

Типографика — это не оформление, а функциональность.
Хороший текст в дизайне не просто читается — он направляет, расставляет акценты и создаёт эмоциональный фон, даже если пользователь не осознаёт этого.

Хочешь больше?
Переходи в Энциклопедию по веб-дизайну DFA — крупнейшую структурированную и свободную базу знаний для дизайнеров.
Читай статьи, присоединяйся к сообществу профессионалов и делись своими знаниями — оставь свой след в дизайне, помогая собрать энциклопедию вместе.

👉 Читать в DFA

Показать полностью
Дизайн Font
0
46
Amir74
Amir74
3 месяца назад
Кириллические шрифты

Шрифт onder⁠⁠

Шрифт onder. Новая презентация. Это современный геометрический гротеск с минималистичным и футуристичным характером.

Автор: Alisa Oleinikova
Бесплатен для личного и коммерческого использования.

Этот и другие кириллические шрифты можно загрузить в вк или телеге
Телега | Вконтакте

Шрифт onder Дизайн, Photoshop, Digital, Креатив, Font, Шрифт, Кириллица, Длиннопост
Шрифт onder Дизайн, Photoshop, Digital, Креатив, Font, Шрифт, Кириллица, Длиннопост
Шрифт onder Дизайн, Photoshop, Digital, Креатив, Font, Шрифт, Кириллица, Длиннопост
Шрифт onder Дизайн, Photoshop, Digital, Креатив, Font, Шрифт, Кириллица, Длиннопост
Шрифт onder Дизайн, Photoshop, Digital, Креатив, Font, Шрифт, Кириллица, Длиннопост
Показать полностью 5
[моё] Дизайн Photoshop Digital Креатив Font Шрифт Кириллица Длиннопост
5
2
Maxiom
8 месяцев назад
Помощники

Что за шрифтом нарисано слово АМАДЕЙ?⁠⁠

Что за шрифтом нарисано слово АМАДЕЙ? Шрифт, Помогите найти, Буквы, Амадей, Помощь, Слова, Font

Что за шрифтом написано слово "Амадей"?

Шрифт Помогите найти Буквы Амадей Помощь Слова Font
2
17
Elias.Ice
Elias.Ice
9 месяцев назад
Кириллические шрифты

Семейство Bodoni⁠⁠

Приветствую коллег!

Внезапно, в процессе работы выяснилось, что нет сабжевого кирилического шрифта. Но Бодони не простой, а конденсед, т.е. чутка сплющенный, ну вы поняли. Прошу камрадов поделиться сокровищем на какое-нибудь «облако». Пиво телеграфирую. Спасибо.

Семейство Bodoni Шрифт, Засада, Пиво, Телеграф, Bold, Italic, Font
Шрифт Засада Пиво Телеграф Bold Italic Font
0
Deffethazrashid
Deffethazrashid
Пишу о идеологии и науках
Искусственный интеллект
9 месяцев назад

Подробная инструкция как создать свой собственный шрифт, используя ИИ⁠⁠

Делал из собственного интереса, было бы интересно почитать ваши отзывы на этот счёт и получить какой-то отклик.

Шаг 1:генерируем текст со всеми буквами (нейросеть, которой я пользовался, позволяла использовать лишь латиницу).

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

Шаг 2: Стираем всё лишнее в редакторе, оставляя на экране только символы.

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

Шаг 3. Делаем все символы чёрными.

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

4. Далее следует открыть программу "High-Logic FontCreator"

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

5. Программа выглядит следующим образом:

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

6. Чтобы начать создавать шрифт надо нажать на значок в левом верхнем углу. Я решил назвать шрифт "аль-шрифт" без всякой причины.

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

7. Появляется вот такой список символов:

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

8. Надо нажать на символ и вставить путём ctrl+c; ctrl+v туда свой символ.

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

9. Так надо сделать со всеми сгенерированными знаками:

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост
Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

(важно отметить: так как у нас только заглавные буквы, то мы должны и в заглавные и в строчные буквы вставить одно и тоже)

10. Далее заходим в "тест шрифта". Для этого надо нажать F5. Мы видим, что буквы имеют странные пробелы.

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

11. Чтобы поправить расстояния меж символами, вновь заходим в карточку символа и передвигаем эти линии, они и являются расстояниями. (Линии по бокам от символа) и проделываем так со всеми символами, чтобы расстояние от конца символа было примерно одинаковым везде.

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

12. В конце концов должен выйти примерно такой результат:

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

13. В целом на этом основная часть закончена. Если вы хотите добавить какие-то ещё символы, в фоторедакторе в целом можно дорисовать. Возьмём например такую букву:

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост
Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

Далее вставляем туда символ-основу. Место наверху от буквы как раз зарезервировано для диакритических знаков. Рисуем диакритический знак в фоторедакторе и просто вставляем сюда сверху.

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

Буква.

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

Пример работы шрифта с буквой с диакритическим знаком.

Таким же образом, в целом, можно создать кириллицу. Я это развёрнутая R, И - N. И так далее. Но всё же ради экономии времени, я оставлю только латинский вариант. Возможно я выпущу новую версию шрифта с большим кол-вом символов если это будет кому-то нужно.

14. Экспортируем наш шрифт.

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

15. В указанной папке у нас появляется такой файл. Это и есть шрифт, который устанавливается стандартным методом. Готово. Им можно пользоваться.

Подробная инструкция как создать свой собственный шрифт, используя ИИ Шрифт, Файл, Font, Искусственный интеллект, Нейронные сети, Инструкция, Гифка, Длиннопост

Если кому-то нужна ссылка на скачивание шрифта: https://github.com/DEffet/-/blob/main/AlShrift-Regular.ttf (да, я знаю, что использовать гитхаб для таких целей не очень принято, но я подумал, что буду, пожалуй, загружать любые свои файлы или картинки в этот репозиторий, а народ пусть скачивает, что хочет.)

Показать полностью 19
[моё] Шрифт Файл Font Искусственный интеллект Нейронные сети Инструкция Гифка Длиннопост
1
0
Вопрос из ленты «Эксперты»
Maxiom
9 месяцев назад

Что ЭТО за шрифт?⁠⁠

Что ЭТО за шрифт?

Это не Comic sans, говорю сразу

Вопрос Спроси Пикабу Шрифт Помощь Font Скриншот
4
30
Amir74
Amir74
10 месяцев назад
Кириллические шрифты

Шрифт Halo Grotesk⁠⁠

Шрифт Halo Grotesk. В меру читаемый шрифт для заголовков и небольших абзацев.

Автор: Roman Bobkov
Бесплатно для всего

Шрифт Halo Grotesk Font, Дизайн, Шрифт, Photoshop, Фирма, Презентация, Бесплатно, Дизайнер, Длиннопост
Шрифт Halo Grotesk Font, Дизайн, Шрифт, Photoshop, Фирма, Презентация, Бесплатно, Дизайнер, Длиннопост
Шрифт Halo Grotesk Font, Дизайн, Шрифт, Photoshop, Фирма, Презентация, Бесплатно, Дизайнер, Длиннопост
Шрифт Halo Grotesk Font, Дизайн, Шрифт, Photoshop, Фирма, Презентация, Бесплатно, Дизайнер, Длиннопост
Шрифт Halo Grotesk Font, Дизайн, Шрифт, Photoshop, Фирма, Презентация, Бесплатно, Дизайнер, Длиннопост

Этот и другие кириллические шрифты можно загрузить в вк или телеге
Телега | Вконтакте

Показать полностью 5
[моё] Font Дизайн Шрифт Photoshop Фирма Презентация Бесплатно Дизайнер Длиннопост
2
133
Amir74
Amir74
11 месяцев назад
Графический и Веб-дизайн

Ловите бесплатный шрифт Лена⁠⁠

Ленаааа! Шрифт так называется. Красивые волнистые буквы идеально подойдут под многие темы. Пользуйся. Бесплатный для личного и коммерции

Ловите бесплатный шрифт Лена Шрифт, Font, Кириллица, Презентация, Халява, Photoshop, Длиннопост
Ловите бесплатный шрифт Лена Шрифт, Font, Кириллица, Презентация, Халява, Photoshop, Длиннопост
Ловите бесплатный шрифт Лена Шрифт, Font, Кириллица, Презентация, Халява, Photoshop, Длиннопост
Ловите бесплатный шрифт Лена Шрифт, Font, Кириллица, Презентация, Халява, Photoshop, Длиннопост
Ловите бесплатный шрифт Лена Шрифт, Font, Кириллица, Презентация, Халява, Photoshop, Длиннопост


Автор шрифта: Vsevolod Abramov

Этот и другие кириллические шрифты можно загрузить в вк или телеге
Телега | Вконтакте

Показать полностью 5
[моё] Шрифт Font Кириллица Презентация Халява Photoshop Длиннопост
10
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии