Как называется пиксельный шрифт в легком движении

Обновлено: 25.11.2024

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

Или нет? По мере того, как цифровое оборудование становится все лучше и лучше — мы думаем об экранах Retina и т. д., — возникает вопрос, существует ли по-прежнему значимая разница между цифровыми шрифтами и любым другим шрифтом. Что готовит будущее?

Помня об этом, мы решили обратиться к прошлому и исследовать историю цифровых шрифтов. Как именно типографика изменилась с изобретением и массовым внедрением компьютеров? Что эта история может рассказать нам о нашем времени?

История цифровых шрифтов оказалась намного сложнее, чем мы ожидали, и восходит к 1950-м годам (как минимум). Здесь мы резюмируем его в версии, которая, говоря языком типографики, значительно «сжата».

Технология набора текста стремительно развивается
_

В послевоенные годы, и особенно в 1960-х годах, ряд нововведений произвел революцию в наборе текста как на персональных пишущих машинках, так и на машинах массового производства. Это проложило путь к цифровой революции.

IBM Selectric

Обычные пишущие машинки использовали набор полосок, которые ударяли по странице при нажатии соответствующей клавиши. Они часто застревали.

Затем, в 1961 году, IBM представила пишущую машинку Selectric, в которой вместо этого использовалась печатающая головка в форме мяча для гольфа, показанная вверху справа, которая превращала соответствующий символ в положение в зависимости от набора текста пользователем. Он редко заедал, и, что более важно, можно было легко переключать головки для смены шрифта (в том числе, скажем, на жирный или курсив).

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

Печать в виде ромашки

На первый взгляд, ромашковые принтеры (названные так из-за формы основного компонента в виде цветка) могут показаться небольшим новшеством по сравнению с Selectric. Они заменили головку сферического типа на диск с радиальными спицами (показан вверху справа), который был легче и эффективнее, что повысило скорость печати в два-три раза.

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

Во-вторых, эффективность этого метода была настолько велика, что компьютерный мир принял его оптом. До появления графических пользовательских интерфейсов некоторые компьютеры создавали распечатки с помощью гирляндных принтеров. Спустя долгое время после появления лазерной и матричной печати в конце 1970-х ромашка оставалась основным принтерным механизмом из-за его относительной доступности. Даже после того, как его время прошло, знаковые цифровые устройства, такие как Apple Laserwriter, эмулировали его набор команд.

Фотонабор

В сфере массовых печатных машин основным нововведением стал фотонабор, впервые представленный в 1949 году корпорацией Photon в Кембридже, штат Массачусетс. Этот метод заменяет свинцовые формы или «слаги» эфирной субстанцией света.

Вот как это работает. Оператор проецирует свет через «шрифтовой диск» с вырезами символов. Затем оператор выбирает увеличительную линзу, чтобы определить размер проецируемого символа. Наконец, проекция падает на светочувствительную фотобумагу или пленку, и, как по волшебству, появляются напечатанные слова. Эта пленка, в свою очередь, может быть использована для создания офсетной формы, которую можно красить и воспроизводить снова и снова.

Машина Digiset

В конечном счете, фотонабор такой же «аналоговый», как старомодный печатный станок времен Гутенберга. Разница лишь в том, что деревянные или свинцовые формы заменены относительно высокотехнологичными материалами из легкой и химически обработанной бумаги.

Однако машина Digiset была другим зверем. Созданный в середине 1960-х годов немецким печатником Рудольфом Хеллом, Digiset до сих пор проецирует свет на фотобумагу, но делает это с помощью электронно-лучевой трубки (ЭЛТ) — той же технологии, что и в телевизорах.

Большая разница в том, что в этом случае свет проецируется не через вырез физического персонажа. Скорее, свет распределяется на крошечные точки — эквивалент пикселей — которые проецируются в форме выбранной буквы, которая формируется с использованием сетки в том, что стало известно как растровый формат. Другими словами, он был цифровым.

Более того, в ЭЛТ был терминал редактирования, с помощью которого можно было легко вернуться назад и исправить ошибки. Поскольку информация была цифровой, документы можно было даже сохранять на дискетах, как только они появились. Таким образом, машина Digiset была предшественником настольных издательских программ на персональных компьютерах. Он был просто намного, намного больше.

Шрифты становятся цифровыми
_

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

Универсы

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

Один из самых известных примеров — Univers швейцарского типографа Адриана Фрутигера. Цель Univers, созданного в середине 1950-х годов, заключалась в том, чтобы заменить Futura в качестве шрифта без засечек для фотонаборных машин. Для Фрутигера результат был продуктом необходимости, а не искусства:

«Шрифты, которые я перерисовал, не имеют исторической ценности… если подумать, какие аберрации мне пришлось допустить, чтобы увидеть хороший результат на Lumitype! V и W нуждались в огромных промежностях, чтобы оставаться открытыми. Мне чуть не пришлось ввести засечки, чтобы не было закругленных углов — вместо гротеска наброски представляли собой кучу деформированных сосисок!»

Цифровой Гротеск

Первый настоящий цифровой шрифт появился в мастерской Рудольфа Хелла. Его машина Digiset на основе ЭЛТ требовала, чтобы цифровые шрифты были разработаны с использованием точек света на сетке, т.е. в растровом формате — это все равно выглядело бы хорошо. Результатом стал Digi Grotesk (гротеск означает "без засечек"), показанный выше в обычном и полужирном вариантах.

Учитывая свой новаторский статус, Digi Grotesk выглядит великолепно. Чертовски лучше, чем блочные растровые шрифты, появившиеся в 80-х. Причина этой разницы в том, что более поздние растровые изображения должны были иметь дело с чрезвычайно низким разрешением ранних мониторов ПК. Огромная машина Digiset в аду имела сравнительно высокое разрешение.

Оптическое распознавание символов

Еще одним ключевым моментом на пороге развития цифровой типографики стало стремление улучшить оптическое распознавание символов (OCR) в конце 1960-х и начале 1970-х годов.

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

Во времена примитивных компьютеров для оптического распознавания символов требовался шрифт, в котором каждая буква полностью отличалась от другой, чтобы компьютер не допускал ошибок, и при этом оставался распознаваемым человеческим глазом как обычные буквы. Первоначальным результатом стал OCR-A, совместный проект 23 американских литейных заводов в 1968 году. Вы можете узнать этот шрифт, потому что он до сих пор иногда используется на таких вещах, как международные стандартные номера книг (ISBN) и паспорта.

Однако европейцы не были в восторге от этого американского решения, поэтому в 1970-х годах они наняли Фрутигера (см. вверху слева) для разработки обновления. Полученный шрифт OCR-B по-прежнему соответствует требованиям машинного распознавания, но при этом приближается к эстетическим стандартам человека.

Прибывает персональный компьютер
_

К середине 1980-х годов персональные компьютеры явно заявляли о себе как о новом крупном продукте. Это означало, что больше обычных людей взаимодействует с цифровыми интерфейсами, и все проблемы с типографикой, связанные с этим предложением. Решение потребовало революции не только в компьютерном оборудовании и программном обеспечении, но и в принтерах.

Постскриптум

В 1983 году компания Apple выпустила Lisa, первый компьютер с графическим пользовательским интерфейсом, который покорил поклонников графического дизайна во всем мире. Единственная проблема заключалась в том, что мало что можно было сделать с разработанными вами вещами, поскольку не существовало технологии для переноса такой сложной информации на печатную страницу. Вывод текста был читабельным, но далеко не профессиональным. И изображения? Забудь об этом.

Тем временем пара парней по имени Джон Уорнок (на фото вверху слева) и Чарльз Гешке уволились с работы в Xerox и основали новую компанию, которую они назвали в честь ручья, протекавшего за их домами в Лос-Альтосе, Калифорния: Adobe.< /p>

Большим изобретением Уорнока стал PostScript, язык описания страниц, который делал именно то, что нужно Apple: он преобразовывал информацию о шрифте для цифрового дисплея в информацию о шрифте для печати гладкого векторного вывода. Результаты с разрешением 300 dpi рекламировались как «качество набора текста».

Особенно после появления LaserWriter (показан вверху справа), первого достойного принтера Apple, Apple начала заниматься графическим дизайном.

Пейджмейкер

Третий необходимый компонент — улучшенное программное обеспечение для экранного дизайна. Войдите в Aldus, компанию, позже приобретенную Adobe, и ее программу PageMaker, первую в истории настольную издательскую программу.

True Type vs. Open Type

Изображения через mmlab2.rlc.dcccd.edu

Adobe предложила интегрировать PostScript в операционные системы Apple и Microsoft, но по высокой цене. В ответ компьютерные компании отказались и объединили усилия для создания собственного программного обеспечения для шрифтов и описания страниц.

Результатом стал True Type (формат .ttf или «True Type Flavor») — технология масштабируемого векторного шрифта. Он объединил то, что раньше было двумя файлами шрифтов, один для отображения на компьютере и один для вывода на печать, в один.

К сожалению, немногие литейщики были готовы выпускать версии своих цифровых шрифтов в формате TrueType, поскольку программное обеспечение Adobe было более надежным объектом. Следовательно, многие шрифты TrueType, появившиеся на рынке, были самодельными и любительскими, что подорвало доверие к программному обеспечению.

В 1996 году Adobe и Microsoft потрясли индустрию, объявив, что они будут совместно разрабатывать новый формат шрифта, объединяющий PostScript и TrueType. Этот формат назывался OpenType (.otf, или формат «открытого типа»). В 2007 г. почти 90 % всех проданных шрифтов были шрифтами OpenType.

Сегодняшние шрифты принимают форму
_

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

Отец Роберт Палладино

Как бы невероятно это ни звучало, Стив Джобс, возможно, был обязан успеху Apple монаху-каллиграфу-трапписту отцу Роберту Палладино, с которым он познакомился в течение года, когда учился в Reed College в Орегоне.

По словам Джобса, работа Палладино в студии каллиграфии кампуса преподала ему несколько ценных уроков о важности эстетики и дизайна — элементов, которые, как считается, дали Apple преимущество над ПК. В 2005 году Джобс рассказал собранию студентов Стэнфордского университета, что он почерпнул из общения с отцом Палладино:

"Я узнал о шрифтах с засечками и без засечек, о том, как варьировать расстояние между различными комбинациями букв, и о том, что делает хорошую типографику великолепной. Это было красиво, исторично, художественно утонченно, чего наука не может уловить, и я нашел это захватывающим».

Шесть лет спустя, когда Джобс начал работу над Apple Lisa, он изложил некоторые основные требования: в нем должно быть много шрифтов, и они должны быть пропорциональны. Моноширинные драндулеты, которые мы ассоциируем с ранними вычислениями, уйдут в прошлое.

Сьюзен Каре

Чтобы воплотить свою эстетическую мечту в реальность, Джобс нанял искусствоведа и дизайнера Сьюзен Каре. Помимо разработки оригинального набора значков для графического пользовательского интерфейса Apple, Каре разработал серию растровых шрифтов с пропорциональным интервалом, названных в честь известных городов.

Шрифты должны отражать характер их одноименных городов. Таким образом, Чикаго большой и смелый, а Женева приближается по внешнему виду к швейцарской типографике.

Конечно, с появлением более гладких векторных цифровых шрифтов Adobe работа Каре станет спорной. Таким образом, вместо «Чикаго», «Женева» и «Лос-Анджелес» мы больше знакомы со шрифтами, входившими в исходную программу PostScript: Courier, Helvetica, Times и Symbol.

Множество

Роберт Слимах и Кэрол Твомбли (вверху слева) разработали Myriad, шрифт без засечек, отличающийся необычным нисходящим элементом «y», для Adobe Systems в 1992 году. цифровую среду, хотя сам Фрутигер, по-видимому, испытывает к этому смешанные чувства, говоря, что это «неплохо сделано», но заходит «слишком далеко».

В 90-е годы Myriad казался малоизвестным чудаком. Сегодня это один из самых известных цифровых шрифтов на земле. Почему? Потому что Apple приняла его в качестве корпоративного шрифта в 2002 году, заменив Apple Garamond.

Вердана

Вирджиния Хоулетт, один из главных дизайнеров Microsoft с 1985 года, также осознала необходимость шрифта в стиле Frutiger и поэтому в 1996 году поручила Мэтью Картеру разработать Verdana. Название представляет собой смесь слов «зеленый» и «Ана», имя дочери Хоулетта.

Verdana отличается высокой высотой по оси x (длина строчных букв), широкими пропорциями и свободным расстоянием между буквами. Все это в совокупности облегчает чтение на мониторах с относительно низким разрешением, которые были нормой в 1996 году. .

Однако в современном мире экранов сетчатки ценность такого дизайна ставится под сомнение. Можно даже заключить, что эпоха экспериментов с цифровыми шрифтами, начавшаяся с появлением фотонабора в 1950-х и продолжавшаяся до начала 2000-х, подошла к концу. Теперь практически любой шрифт может работать как «цифровой шрифт». Может начаться новая эра экспериментов.

Он включает в себя выбор цветов, изображений и иллюстраций, а также шрифтов, которые будут использоваться для текста.

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

Пиксельные шрифты, часто называемые экранными или растровыми, состоят из маленьких квадратных фигур, называемых пикселями.

Он показывает буквы в виде простых блоков, а не сложных кривых, как в большинстве обычных шрифтов.

Он очень популярен в Интернете, потому что мы все видели его, когда играли в видеоигры.‍

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

Пиксельные шрифты также можно использовать для логотипов, постеров и надписей, особенно если вы хотите создать винтажный или ретро-дизайн.‍

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

Просто посмотрите, и я надеюсь, вы поймете, какой из этих шрифтов идеально подходит для желаемого дизайна.

10 лучших пиксельных шрифтов

1. Пиксельный шрифт Tickerbit

Шрифт Tickerbit идеально подходит, если вы ищете современный пиксельный шрифт с различными стилями на выбор.

Этот причудливый шрифт доступен как в большом, так и в маленьком размерах и включает в себя такие стили, как моноширинный, курсив и монокурсив.

Благодаря своему необычному дизайну он хорошо смотрится как в винтажном, так и в современном стиле.

‍Tickerbit также может использоваться для заголовков, основного текста и дизайна комиксов, среди прочего.

Его также могут использовать дизайнеры для создания логотипов, редакционного контента, дизайна одежды и упаковки.

2. Шрифт Definety Pixel Perfect

Definety — это чистый и четкий пиксельный шрифт со строчными и прописными глифами, включая расширенную латиницу A, кириллицу, цифры и специальные символы.

Он предназначен для различных целей, включая брендинг, дизайн логотипов, плакаты, печать, видеоигры, Интернет и многое другое.

Он имеет простой, но элегантный внешний вид, что делает его лучшим выбором для сочетания с любым стилем дизайна.

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

Печать на футболках отлично подходит для этого, и производители одежды также могут извлечь из этого выгоду.

3. Ретро детский шрифт

Retro Kiddo — это красочный пиксельный шрифт, который отражает суть 1990-х годов в векторном формате.

Он включает в себя декоративные элементы, такие как геометрический фон в многоцветных и одноцветных вариациях.

В этом стиле шрифта используется смесь разных цветов для создания одновременно современного и винтажного вида.

Благодаря настраиваемым функциям Retro Kiddo является отличным выбором для создания дизайна видеоигр.‍

Помимо логотипов и этикеток продуктов, предназначенных для молодой аудитории, этот шрифт подходит и для других целей.

4. Пиксельный шрифт PRETTY WEIRDO

В качестве четвертого шрифта с пиксельным дисплеем в моем списке я выбрал беззаботный и непринужденный шрифт под названием PRETTY WEIRD.

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

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

Из-за своего яркого и привлекательного внешнего вида он особенно хорошо подходил для использования в детских товарах и даже для скрапбукинга.‍

Тема PRETTY WEIRDO идеально подходит для тех, кто хочет придать своей странице в Instagram, Facebook или веб-сайту современный и очаровательный вид.

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

5. Шрифт PIXEL GLITCH

PIXEL GLITCH, с другой стороны, обладает ностальгической атмосферой, в отличие от PRETTY WEIRDO, которая производит яркое и очаровательное впечатление.

Он имеет эффект глюка, который еще больше отличает его от других шрифтов на рынке.

Это векторный шрифт в стиле пиксельной графики, который идеально подходит для подписи к фотографиям.

‍PIXEL GLITCH также можно использовать для обложек журналов или этикеток продуктов, в зависимости от применения.

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

6. Пиксельный шрифт Chubby Choo

Если вы ищете простой ретро-растровый пиксельный шрифт для различных дизайнов, вам подойдет Chubby Choo.

Как видите, он кажется очень знакомым, поскольку его можно сравнить со шрифтами, используемыми в большинстве видеоигр.

Он имеет яркий, но утонченный внешний вид, который идеально подходит для этикеток продуктов или подписей к изображениям.

‍Chubby Choo – это шрифт с пиксельным дисплеем, который отличается свежим настроением и современным дизайном.‍

Он содержит пиксели среднего размера с неправильным расположением, что делает его вполне читабельным.

Это отличное дополнение к новым пиксельным видеоиграм, винтажной графике и мультипликационным проектам.

Этот геометрический пиксельный шрифт, заимствованный из ретро-игровых консолей, подходит для использования в современных дизайнерских проектах.

Он идеально подходит для дизайна видеоигр, особенно тех, которые связаны с исследованиями и приключениями.‍

Он создает отчетливую и винтажную атмосферу, которая вызывает чувство тайны и вызова.‍

Шрифт Jaunt обладает яркой индивидуальностью и разнообразием стилей, включая обычный, полужирный и теневой, благодаря гладкому и несложному дизайну омбре.‍

В частности, для таких тем, как техно, цифровое искусство, ретро, ​​киберпанк, игры и многих других.

8. Пиксельный битовый шрифт

Pixel Bit — отличный вариант, если вы ищете футуристический тематический пиксельный шрифт для использования в своих проектах, который отличается от остальных.

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

Он имеет широкий спектр применения благодаря тому, что излучает привлекательное и утонченное настроение.‍

‍Pixel Bit идеально подходит для использования в визуальных дисплеях, таких как логотипы, одежда, упаковка продуктов и плакаты, среди прочего.

Он также может использоваться для рекламных материалов, таких как плакаты, публикации в социальных сетях, ярлыки и брендинг.

Кроме того, поскольку он выглядит современно, он подходит для подписей к фотографиям, связанных с технологическим прогрессом.‍

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

9. Минимальный пиксельный шрифт

В отличие от других пиксельных шрифтов, шрифт Minimal Pixel с трудом читается и требует от читателя пристального внимания к содержанию написанного.

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

Из-за своего минимализма этот дизайн выглядит фантастически в сочетании с черно-белой цветовой схемой.‍

В нем также используется необычный и особый стиль букв, из-за чего создается впечатление, что в буквах чего-то не хватает.

Шрифт Minimal Pixel больше всего оценят дизайнеры, которые ищут уникальный абстрактный шрифт.

10.Стандартный пиксельный шрифт SB

SB Standard — это пиксельный шрифт, разработанный для текста и навигации и оптимизированный для использования с плотностью 10 точек на дюйм.

Благодаря методам, разработанным при создании SB Liquid, он должен быть нейтральным и разборчивым, а также иметь хорошую разборчивость при использовании в качестве текстового шрифта.

Поскольку он был разработан в первую очередь для использования в тексте, а не для отображения, была также создана полужирная версия.

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

Дизайнеры могут использовать это для широкого спектра дизайнов, включая печать на одежде, этикетки для продуктов и даже логотипы.

Выводы

Как графический дизайнер, я понимаю, что при создании дизайна важны даже мельчайшие детали.

Сочетание цветов, изображений и шрифтов должно привлекать внимание.‍

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

В этой статье я перечислил самые популярные пиксельные шрифты, которые широко используются многими креативщиками.

Вы можете скачать их в Интернете по очень доступной цене с сайта CreativeMarket.

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

Откройте для себя лучшие шрифты для вашего следующего проекта моушн-дизайна! Лучшая часть? Все они БЕСПЛАТНЫ.

Когда дело доходит до типографики, моушн-дизайн гораздо менее снисходителен, чем печатный дизайн. В то время как наиболее печатный дизайн находится перед вашей аудиторией в течение неопределенного времени, проекты текстового дизайна в движении видны в лучшем случае всего несколько секунд, поэтому ваша аудитория должна быть в состоянии прочитать его быстро. Учитывая проблемы с читабельностью, следует избегать ультратонких шрифтов, а также чрезмерно декоративных. Эти шрифты могут страдать от явления, известного как алиасинг, когда пиксели могут смешиваться друг с другом, что приводит к искажению цвета и затрудненному чтению текста.

В публикации Videomaker было 5 советов по выбору шрифтов в ваших проектах. Они отметили, что лучше всего избегать «растягивания» шрифта, так как это может исказить текст и отрицательно сказаться на удобочитаемости. «Если вы обнаружите, что растягиваете шрифт по горизонтали или вертикали, чтобы заставить его работать, вам, вероятно, лучше поискать шрифт, который изначально подходит для вашего проекта».

На практике это означает, что ваши возможности гораздо более ограничены, когда дело доходит до выбора правильного шрифта для использования в ваших проектах. Чтобы сделать этот процесс немного менее неприятным, мы делимся нашими 15 любимыми бесплатными шрифтами для проектов с анимированной графикой.

1. РБ№2

Вдохновленный индустриальными шрифтами конца XIX века, RBNo2 – это простой шрифт без засечек, который невероятно легко читается на экране. Бесплатная версия включает облегченную и легкую альтернативу, но вы можете получить полную версию за 25 долларов США.

2. Пятый фрагмент

Шрифт Chunk Five с крупными прямоугольными засечками отлично подходит для добавления американских тем в современные проекты.

3. Авраам Линкольн

Авраам Линкольн высокий и формальный, как и сам президент. Этот шрифт идеально подходит для беззаботных корпоративных видеороликов и добавляет простоты, но формальности.

4. Кутюр

Как следует из названия, Couture – это упрощенный шрифт, созданный для имитации шрифтов без засечек в индустрии моды. Его чистая квадратная форма делает Couture очень универсальным в проектах моушн-графики.

5. Мерриуэзер

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

6. Некса

В соответствии с Couture, Nexa — это жирный шрифт, который бросается в глаза и ничего не скрывает. Если вы хотите произвести впечатление и привлечь внимание людей, вам подойдет Nexa.

7. Гранд Отель

Хотя мы не часто используем скриптовые шрифты в проектах с анимированной графикой, время от времени клиент требует этого. Когда это происходит, смелые штрихи, смешанные с простыми петлями, делают Grand Hotel отличным шрифтом для использования.

8. Редуктор

Geared отличается упрощенной мужественностью, что делает его идеальным для динамичных видео. Обыгрывая промышленные темы, шрифт легко читается и имеет несколько слегка закругленных засечек.

9. Гео без света

Если вам нужно что-то игривое и легкое, вам поможет Geo Sans Light. Этот беззаботный шрифт легко читается и с ним еще проще работать.

10. Бебас Нойе

Возможно, нет лучшего шрифта для моушн-дизайна, чем Bebas Neue. Проще говоря, Bebas Neue хорошо смотрится практически во всем. При этом вы очень ограничены. Beas Neue следует использовать только для основных заголовков, так как его становится трудно читать, если текст состоит из нескольких слов. Тем не менее, это отличный шрифт.

11. Код

Простой код, который подходит практически ко всему. Достаточно сказано.

12. Высокий темноволосый и красивый

Tall Dark and Handsome — отличный шрифт для использования в анимационных заголовках, но он также отлично подходит для титров, постеров фильмов и веб-сайтов.

13. Освободитель

Liberator был разработан, чтобы выглядеть как старый шрифт времен Второй мировой войны. Шрифт можно бесплатно использовать и скачать уже сегодня. Наслаждайтесь!

14. Губернатор

Governor – это простой, не угрожающий шрифт без засечек, вдохновленный стилем ар-деко. Если вам нужен беззаботный шрифт, которым легко пользоваться, вам подойдет Губернатор.

15. Готическая миссия

Misson Gothic — один из самых универсальных шрифтов в этом списке. Благодаря 10 разным весам вы можете использовать Mission Gothic практически во всем.

Хотите еще больше бесплатных шрифтов? Ознакомьтесь с некоторыми из следующих ресурсов:

Есть бесплатные шрифты, которыми вы хотели бы поделиться? Давайте узнаем о них в комментариях ниже.

Свойство CSS font-weight задает толщину (или жирность) шрифта. Доступные веса зависят от семейства шрифтов, которое установлено в данный момент.

Попробуйте

Синтаксис

Свойство font-weight задается любым из перечисленных ниже значений.

Значения

Нормальный вес шрифта. То же, что и 400 .

Жирный шрифт. То же, что и 700 .

На один относительный вес шрифта легче, чем у родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.

На один относительный вес шрифта больше, чем у родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.

В более ранних версиях спецификации font-weight свойство принимает только значения ключевых слов и числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900; непеременные шрифты могут действительно использовать только эти установленные значения, хотя более мелкие значения (например, 451) будут преобразованы в одно из этих значений для непеременных шрифтов с использованием системы резервных весов.

Шрифты CSS уровня 4 расширяют синтаксис, чтобы принимать любое число от 1 до 1000, и вводят шрифты Variable, которые могут использовать этот гораздо более тонкий диапазон веса шрифта.

Запасные веса

Если указанный точный вес недоступен, для определения фактически отображаемого веса используется следующее правило:

  • Если указан целевой вес от 400 до 500 включительно:
    • Ищите доступные веса от целевого значения до 500 в порядке возрастания.
    • Если совпадений не найдено, найдите доступные веса меньше целевого в порядке убывания.
    • Если совпадений не найдено, найдите доступные веса больше 500 в порядке возрастания.

    Значение относительных весов

    Если указано значение светлее или жирнее, на приведенной ниже диаграмме показано, как определяется абсолютный вес шрифта элемента.

    Обратите внимание, что при использовании относительной толщины учитываются только четыре толщины шрифта: тонкий (100), обычный (400), полужирный (700) и тяжелый (900). Если в семействе шрифтов доступны более широкие веса, они игнорируются при расчете относительного веса.

    Унаследованное значение жирнее светлее
    100< /th> 400 100
    200 400 100
    300 400 100
    400 700 100
    500 700 100
    600 900 400
    700 900 400
    800 900 700
    900 900 700

    Общее сопоставление имени веса

    Числовые значения от 100 до 900 примерно соответствуют следующим общепринятым названиям весов (см. спецификацию OpenType):

    < td>Средний

    Вариабельные шрифты

    Большинство шрифтов имеют определенный вес, который соответствует одному из чисел в сопоставлении имени общего веса. Однако некоторые шрифты, называемые вариативными, могут поддерживать диапазон насыщенности с более или менее тонкой детализацией, и это может дать дизайнеру гораздо более строгий контроль над выбранной насыщенностью.

    Для изменяемых шрифтов TrueType или OpenType вариант "wght" используется для реализации различной ширины.

    Примечание. Чтобы приведенный ниже пример работал, вам потребуется браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором вес шрифта может быть любым числом от 1 до 1000 . Демо загружается с font-weight: 500; . Измените значение, чтобы увидеть изменение веса текста.

    Проблемы доступности

    Люди со слабым зрением могут испытывать трудности при чтении текста, для которого задана толщина шрифта 100 (тонкий/линия волос) или 200 (очень светлый), особенно если шрифт имеет низкий коэффициент контрастности цвета.

    Нестандартная: эта функция нестандартна и не соответствует стандартам. Не используйте его на рабочих сайтах, выходящих в Интернет: он не будет работать для каждого пользователя. Также могут быть большие несовместимости между реализациями, и поведение может измениться в будущем.

    Свойство CSS font-smooth управляет применением сглаживания при отображении шрифтов.

    Синтаксис

    Примечание. WebKit реализует похожее свойство, но с другими значениями: -webkit-font-smoothing . Он работает только в Mac OS X/macOS.

    • auto — пусть решает браузер (использует субпиксельное сглаживание, если оно доступно; это значение по умолчанию)
    • none — отключить сглаживание шрифта; отображать текст с неровными острыми краями.
    • сглаживание – сглаживание шрифта на уровне пикселя, а не субпикселя. Переключение с субпиксельного рендеринга на сглаживание для светлого текста на темном фоне делает его светлее.
    • субпиксельное сглаживание: на большинстве дисплеев без сетчатки текст будет максимально четким.

    Примечание: Firefox реализует похожее свойство, но с другими значениями: -moz-osx-font-smoothing. Он работает только в Mac OS X/macOS.

    • auto — разрешить браузеру выбирать оптимизацию для сглаживания шрифтов, обычно в оттенках серого.
    • Оттенки серого – рендеринг текста со сглаживанием оттенков серого вместо субпиксельного. Переключение с субпиксельного рендеринга на сглаживание для светлого текста на темном фоне делает его светлее.

    Формальное определение

    Значение Общее название веса
    100 Тонкий (Hairline)
    200 Extra Light (Сверхлегкий)
    300 Легкий
    400 Нормальный (обычный)
    500
    600 Semi Bold (Полужирный)
    700 Жирный
    800 Очень жирный (Ultra Bold)
    900 Черный (тяжелый)
    950 Экстра черный (ультра черный)

    Формальный синтаксис

    Примеры

    Пример базового использования

    В следующем примере показаны эквиваленты Safari/Chromium и Firefox, которые включают сглаживание шрифтов в macOS. В обоих случаях сглаженный шрифт должен выглядеть немного легче.

    Для тех из вас, кто не работает в системе macOS, вот скриншот (версия в реальном времени появится позже):

    Читайте также:

    Исходное значение auto
    Применимо квсе элементы
    Унаследованода
    Вычисленное значениекак указано
    Тип анимациидискретный