Typography элегантно, когда она привлекательна и связь идей дизайнера.
Когда выбран с умом и использовать осторожно, это может быть очень эффективными в поддержке общий дизайн.Дизайнеры всегда изучает различные методы типа: одни использование изображений или SIFR производить очень красивые типографии, в то время как другие предпочитают CSS только, чтобы получить типографии просто right.
Сегодня, мы будем смотреть на 50 самых полезных типографские инструменты, методы и ресурсы для создания эффективных и выразительных designs.Мы также рассмотрим некоторые практические типографии инструменты, которые помогают дизайнерам и разработчикам узнать, как стиль их содержимое веб-сайта, протестировать его в интерактивном режиме и увидеть изменения немедленно.Эти инструменты прекрасно подходят для экспериментов с различными типами шрифтов для вашего website.
Ниже мы рассмотрим типографские инструменты, полезные ссылки типографские, шрифт браузеров, типографские CSS-и JavaScript-методы, перенос методов, SIFR инструментов и ресурсов, сетей и связанных с ними инструментов, бесплатных и коммерческих шрифтов, руководство типографии Web, примеры великихВеб-typography.
Пожалуйста, не стесняйтесь предложить дополнительные средства и ресурсы в комментариях к этому посту.И, если вам нравится этот пост пожалуйста подписаться на нашу RSS-feed и Следуйте за нами на Twitter .
Вы можете взглянуть на следующие статьи:
1.Полезные типографских references
Лучше CSS шрифт StacksПару полезных каскадов шрифт для вашего CSS-stylesheet.
Поразительные веб-сайты с шрифта стеков, что InspireПри правильном знания CSS стеки шрифтом, что мы на один шаг ближе к разрешению наше воображение дизайном лучшего веб опыт для everyone
FontsMatrixМатрица шрифтов в комплекте с Mac иОперационной системы, Microsoft Office и Adobe Creative Suite (через @ lucianosb на Twitter)
Общие шрифтов для всех версий ОС Windows & Mac equivalentsВ список со стандартным набором шрифтов, общие для всех версий Windows, Mac и их заменители, иногда называют “ браузере безопасной fonts”.
По умолчанию Mac OS X 10.4 шрифты list (через Elementiks)
Windows по умолчанию шрифт list (через Elementiks)
2.Типографские Tools
Вместо того, чтобы делать свои собственные испытания, использование полезных и экономящих время инструментов ниже.Они помогут вам играть с типографии и сделать выбор, давая Вам просмотр в реальном времени многие из доступных шрифтов CSS properties.
HTML IpsumПолезно немного сайт, созданный Крисом Coyier.Он предоставляет вам стандартный латинский текст уже в HTML тегов.При нажатии на любой из блоков автоматически копирует текст в буфер обмена
TypechartTypechart позволяет пролистывать, просматривать и сравнивать веб-типографики при получении CSS.Вы можете просмотреть различные стили типографский.Каждый стиль соответствует стилю ID, которая позволяет вам комментировать прототипов и получить CSS при кодировании.Еще одной полезной функцией является то, что вы можете сравнить Windows (ClearType) рендеринга с Apple, шрифт rendering.
TTFTitles WordPressPluginЭтот плагин позволяет вам использовать изображения, чтобы заменить названия вашей должности, таким образом обходя проблемы гадать, что шрифты конечные пользователи могли установить (через hyperdjango).
FontstructFontStruct это бесплатный шрифт строительный инструмент, который позволяет быстро и легко создавать шрифты построены из геометрических фигур, которые расположены в сетке, как плитка или bricks.
abcTajpu Firefox ExtensionВведите акцентированных букв, международные знаки или символы в Firefox или Thunderbird, либо просто с помощью контекстного меню (причем поддержка многих языков), или быстро с помощью клавиатуры макрос (Вы даже можете определить свои собственные)
PXtoEMЭтот инструмент преобразует пикселей единиц EM-устройства при помощи 16px размер браузера по умолчанию (через @ briancray и @ CasJam на Twitter).
Em CalculatorEm Calculator это небольшая утилита, JavaScript, который поможет вам сделать масштабируемые и доступные CSS дизайн.Он преобразует размеры в пикселях в относительных единицах их, в основе которых лежат данный текст size.
CSSTYPECSSTYPE v2 позволяет просматривать текст, как вы измените его.Вы можете задать семейство шрифтов, размер, цвет, письмо-интервал, словом расстояние, высоту строки и другие свойства.Код CSS могут быть созданы легко, как только вы удовлетворены previews.
CSS-Typoset матрицы и код generatorЭтот инструмент (к сожалению, только на немецком языке)вычисляет размеры шрифта и высота строки в их и ПВ и представляет их в матрице.Инструмент вычисляет как симметричные, так и asymmetricam края.Полезные
WP-typogrify WordPress PluginWP-typogrify представляет собой набор шаблонов Django фильтры, которые помогут приукрасить ваш веб-типографики за счет предотвращения уродливые цитаты и вдов и предоставление CSS крючки для стиля некоторых особых случаях. Python-скрипт для Django доступен как well.
FontBurnerПосле того как вы найдете шрифт, который вы хотели бы использовать, Font Burner дает вам кусок кода, который необходимо вставить в голову вашего сайта.Условии, что вы не имеют никаких стилей конфликтов, новый шрифт будет отображаться на вашем сайте immediately.
Преобразование шрифтов TrueType в SIFR флэш FileДобавить шрифт и инструмент генерирует Flash-файлов (SWF) и отправляет его по электронной mail.
Текст 2 PNG ConversionЭта услуга предоставляет вам возможность конвертировать вы заголовков и навигации в PNG изображений automaticlly.Она работает путем добавления файлов JavaScript и выбрать, какие теги заменить.Полезно, например, если вы хотите создать изображение с вложении электронной почты address.
7 Бесплатные инструменты для выявления FontСписок бесплатных онлайн-инструментов для ускорения идентификации process.
21 Typography веб-приложений Вы Can’ Онлайн-т Without
3.Выбор font
Тип TesterТип Тестер представляет собой интернет-приложение, которое позволяет тестировать различные шрифты.У вас есть три колонки текста и может изменить типографии так, как вам угодно.Затем Вы получите CSS, который сопровождает вашу selections.
STC fontBROWSERЭтот инструмент позволяет просматривать шрифты, установленные в вашей системе online.
Шрифт PickerЭто простой инструмент показывает все шрифты, установленные на вашем компьютере и помогает вам выбрать, какой из них наиболее подходит для конкретного проекта.Также имеется Adobe AIR application.
FontTesterШрифт Tester это бесплатный онлайн инструмент сравнения шрифтов.Она позволяет легко просмотреть и сравнить разные стороны шрифты бок с различных стилей шрифта CSS применяется к them.
CSS Тип SetCSS Type Set представляет собой удобный инструмент, который позволяет просмотреть текст CSS, как вы измените ее, и она генерирует код для Вас немедленно ( @ jmreedy).
Flipping TypicalЭто хороший способ познакомиться с популярными шрифтами у вас на компьютере и увидеть, какая соответствует проекту вы работаете.Это делается путем создания текста, который отображается с использованием различных шрифтов с вашего computer.
4.Типографские Techniques
12 Примеры пункта TypographyВитрина некоторые интересные методы проектирования пунктах, Джон Тан.Некоторые из этих стилей являются эксперименты с использованием псевдо-элементов и соседних селекторов брата; браузере поддержку не consistent.
Оказание комплекса типа — Кто есть Любовь Узнайте, как создавать сложные образцы типографского с чистой CSS.
10 примеров красивой типографикой CSS и как они это сделали ItМного хороших сайтов там есть красивые типографии, используя только CSS.Но просто глядя на них дает вам только половина картины.Это сообщение демонстрирует примеры хорошей чистой типографии, используя только CSS, и это объясняет то, что дизайнеры сделали для достижения этой красивой type.
typeface.jsС typeface.js, вы можете вставлять пользовательские шрифты на веб-страницах, так что вы не должны отображать текст в виде изображений.Что отличает то, что это только наличие, а не наличие and Flash как sIFR или JavaScript и PHP, как FLIR.Таким образом, вместо создания изображений или при использовании вспышки, чтобы показать текст вашего сайта в шрифт вы хотите, вы можете использовать typeface.js и писать на простой HTML и CSS, как будто ваши посетители были шрифтов, установленных на местном уровне.Это довольно прост в использовании: загрузите typeface.js библиотеки и некоторые typeface.js шрифты, то действуйте normal.
Facelift Image Replacement (FLIR) Facelift Image Replacement (FLIR) является сценарий замены изображения, который динамически генерирует изображение представления текста на веб-странице в шрифтах, которые иначе не могли бы быть видны посетителям.Созданный образ будет автоматически вставлен в веб-страницы с помощью JavaScript и видна во всех современных браузерах.Любой элемент с текстом можно заменить, начиная от заголовков (< h1> < h2> и т.д.) < span> элементов и все между ними!FLIR является SEO-дружественные и только делает изображение, если JavaScript включен в браузере пользователя.Если вы используете WordPress для своего блога, вы можете найти этот плагин in полезные легко применять FLIR на веб-pages.
P C DTRPHP CSS Динамический замененный текст JavaScript-бесплатную версию Динамическая замена текста метод, позволяющий принимать ванили, основанные на стандартах (X) HTML веб-страницы и динамически создавать изображениязаменить заголовки страниц, используя только PHP и CSS.Техника CurrentY недоступны для download.
Дополнительные методы Typography Использование CSSВ то время как описание и основные использования CSS управления типография была избита до смерти, многие богатые возможности типографского из CSS-прежнему не очень хорошо документированы.Это сообщение является прекрасным примером того, что вы можете сделать, объединяя и настройки типа с помощью CSS.Различные методы вводятся: размышления, потеря символов, почерк, газетные заголовки и more.
Контрастность Формные FlowТипографские отличие важно, потому что не каждая часть контента на странице, имеет тот же вес: некоторые имеют большее значение, …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров