15便利なWebタイポグラフィツール、ライブラリ、およびフレームワーク

Web上のタイポグラフィを扱うことは本当に風変わりです. 各ブラウザには、フォントをレンダリングするための独自のアルゴリズムがあります。 これは予期しない矛盾につながる可能性があります。フォントカーニング、フォントスムージング、DropCapsの作成など、フォントを制御するために使用できるCSSプロパティはわずかしかありません。その上で、フォントに関しては、レイアウトの問題を数多く処理する必要があります。.

良いニュースは、それがウェブサイトのタイポグラフィに関しては、車輪を引き継ぐために使用できるリソースがあるということです。ここにあります 15のWebツール、ライブラリ、およびフレームワーク あなたはそのために使用することができます.

Hongkiatの詳細：

9 WordPressプラグインをあなたのフォントでもっと活躍させる
読みやすさを向上させる20のベストWordPressタイポグラフィプラグイン
Webフォントを使用したより良く、より鮮明なUIアイコン

タイプレンダリング

手短に, タイプレンダリング Modernizrと似た働きをしますが、フォントレンダリング用のブラウザエンジンを識別するだけです。このライブラリは発見に基づいてカスタムクラスを追加します。そしてそれはタイプレンダリングのために特定のスタイリング規則を適用するために使われることができます.

KerningJS

KerningはまだWeb上での使用にはカスタマイズできません - フォントカーニング 現時点ではまだサポートは不十分ですが、新しい標準的なプロパティが登場しています. KerningJS カーニングコントロールを向上させるためのいくつかの新しいプロパティを提供するJavascriptライブラリです。 -レターカーン.

 #heading -letter-kern：1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

上記の例は標準ではなく、KerningJSにのみ適用可能であることに留意してください。.

DropcapJS

ドロップキャップを作成することは現在のCSS標準でも可能ですが、結果はまだ完全ではありません。時にはそれは実に望ましくないことです。 Adobe Web Platformによって開発されたDropcapJSは、Webデザイナーが完璧なdropcapを簡単に適用できるようにするという使命を委ねられています。.

ライニングJS

ライニングJS を追加するJavaScriptライブラリです。 ライン 段落の各行にクラスを入れます。これにより、線を個別にスタイル設定できます。それはのアイデアをシミュレートします :: nth-line（）, :: nth-last-line（） そして ::最後の行 まだCSSには存在しない疑似クラス。これがLiningJSを使って段落の最初の行をどのようにスタイルするかの例です。

 p .line [first] フォントの太さ：600;テキスト変換：大文字。

さらに、LiningJSは中国語段落フローもサポートします.

アンダーラインJS

アンダーラインJS 下線を引きやすくするJavaScriptライブラリです。デモをチェックして、私が何を言っているのかを確かめてください。行の上にカーソルを置いてください。デモを現在のCSSの下線付き出力と比較する テキスト装飾 標準で、あなたはおそらくunderlineJSのファンでもあるでしょう.

FlowType

このプラグインは、特定のラッパー幅に基づいてフォントサイズを動的に調整します。. FlowType どの画面幅でも、1行に理想的な文字数を適用するのに役立ちます。ライブラリには、最小/最大画面幅、最小/最大フォントサイズ、およびフォント比率を設定できるオプションがあります。.

ハッチショー

ハッチショー フォントのサイズをコンテナの幅いっぱいに広げます。プラグインは、アルゴリズムを使用してすぐに機能します。一言で言えば、それはコンテナの幅とフォント文字の長さを測定し、フォントの適切なサイズを追加します.

GridLover

GridLover 簡単なスライダーUIでタイポグラフィ配置（サイズ、行の高さ、および余白）のための基本的なスタイルを生成するための素晴らしいツールです。どのCSSプリプロセッサを使用するかにかかわらず、SCSS、LESS、およびStylusのスタイルを生成するので、すぐにプロジェクトに含めることができます。.

TypeScale

TypeScale あなたのウェブサイトに適したフォントサイズを簡単に決めるのに役立つオンラインツールです。このツールは、使用したい基本フォントサイズ、スケール、フォントファミリーを挿入するためのシンプルで直感的なGUIを提供します。結果はあなたのために視覚化されるので、あなたは正しい値を得るためにスケールで遊んでみることができます。完了したら、CSSを入手するだけです。.

モジュラースケール

モジュラースケール 本文と見出しのテキストに理想的なフォントスケーリングを生成するためのツールです。 Sassライブラリと一緒に使うべきSassで出力します。あるいは、JavaScriptを使用することもできます .

フォント幅

幅にフォント（FTW） フォントをその幅コンテナに合わせるJavascriptライブラリです。それはフォントに必要な単語の間隔と共にフォントサイズを決定します。あなたがかなりの見出しを作りたいのであれば、これはあなたが試したいと思うかもしれない図書館です。.

FFFFallback

FFFFallback, あなたが優雅に低下するであろう最高のフォントスタックを見つけることを可能にする便利なツール。このツールは、あなたのページ上のフォントファミリーを分析し、代替として使用するフォントのセットを提案するブックマークレットの形で提供されます。.

フォントペア

Googleフォントは何百万もの人々が使用している最も人気のあるウェブフォントライブラリの1つで、500以上のフォントファミリをホストしています. フォントペア は、フォントファミリーとタイプフェイスの間のさまざまな組み合わせを簡単に見つけることができる、対になったGoogleフォントのコレクションです。フォントペアは、フォントペアリングの選択をやや難しくします。.

TypeSettings

TypeSettings 適切なフォントの拡大縮小、垂直方向のリズム、および活版印刷の反応率を定義するためのCSSルールセットのコレクションです。 TypeSettingsはSassとStylusで提供されており、変数を調整することでプロジェクトのニーズに柔軟に対応できます。.

銘板

銘板おそらくタイポグラフィを設定するための最も完全なスターターキットの1つです。タイププレートには、スケーリング、色、小大文字、ドロップキャップ、インデント、ハイフネーション、ブロック引用符、コードブロックなど、さまざまな基本的な文字体裁スタイルが付属しています.

今読む：美しいタイポグラフィを使ったWebデザインのショーケース