すべてのデザイナーが知っておくべき15のオンラインタイポグラフィツール
読書は私たちがWeb上で行う最も基本的なことの1つであるため、タイポグラフィはあらゆるデザインの基盤です。選択した文字体裁は、Webサイトのさまざまな側面に影響を与えます。 読みやすさ、雰囲気、および全体的なユーザーエクスペリエンス. デザイナーや開発者にとって不可欠なのは タイポグラフィの基本原則を知っている に 読みやすいデザインを作成する.
私たちは以前、フォントペアリングツールについて話してきました。そして今日、私たちはあなたが構築および/またはデザインするウェブサイトでより良い読書体験を達成することができるタイプツールをあなたと共有するつもりです。.
これがあなたを手助けするプラグイン、オンラインツール、そしてスクリプトです。 素晴らしい見出しを作成する そして 読みやすいテキスト.
銘板
デザインの選択はできませんが、一般的な活版印刷テンプレートのスタイルを使用して正しいマークアップを定義します。また、テキストコピーを適切にスタイル設定する方法についてのヒントも得られます。.
チェックアウトデモドキュメンテーション
グーテンベルク
Gutenbergは、開発者とデザイナーのための柔軟で使いやすいタイポグラフィスターターキットです。それはあなたが基本型のサイズ、行の高さと最大の幅を設定するのを助けるでしょう。グーテンベルクはオープンソースプロジェクトなので、自由に貢献、適応、修正してください。.
チェックアウトデモドキュメンテーション
Lettering.js
Lettering.jsはカーニングタイプを制御するjQueryプラグインです。それはあなたが簡単にエディトリアルデザインを手に入れ、コードを管理することを可能にします。ウェブサイトはインスピレーションのためにこのプラグインで作られたタイポグラフィの素晴らしい例を特徴とします.
チェックアウトデモドキュメンテーション
Typebase.css
Typebase.cssはカスタマイズ可能なタイポグラフィスタイルシートです。それはsaaと少ないバージョンの両方を含み、現代のWebプロジェクトに簡単に変更されます。.
チェックアウトデモドキュメンテーション
FitText
FitTextはあなたのウェブサイトのフォントサイズを柔軟にするプラグインです。それはあなたが様々な画面解像度のためにスケーラブルな見出しを達成するのを助けます。言い換えれば、あなたのタイポグラフィを即応させる。大きなテキストだけを表示するために作られています.
チェックアウトデモドキュメンテーション
Kerning.js
Kerning.jsを使用すると、CSSを使用してタイポグラフィを自動的に変換、拡大縮小、変更することができます。 Kerning.jsを使い始めるのは簡単です。.
チェックアウトデモドキュメンテーション
Typesettings.css
Typesettings.cssは、最小限のWebプロジェクトまたはブログを作成するための遊び場です。ここで使用されているすべてのタイポグラフィスタイルは、グラフィックデザインの基本に触発されています.
チェックアウトデモドキュメンテーション
リュックサック
Rucksackを使用すると、フォントサイズに関する新しいレスポンシブプロパティにより、驚くほど滑らかなタイポグラフィを作成できます。レスポンシブタイポグラフィを作成することは非常に簡単になります.
チェックアウトデモドキュメンテーション
FlowType.JS
最も読みやすいタイポグラフィは1行に45から75文字含まれていますが、そのバランスを見つけることは開発者にとって困難な作業です。 FlowType.JSは、特定の要素の幅に基づいてフォントサイズとその後の行の高さを変更します。.
チェックアウトデモドキュメンテーション
Blast.js
Blast.jsは、タイポグラフィの操作を容易にするためにテキストを分割するのに役立ちます。これには、文字、単語、文、および要素の4つの組み込み区切り文字が含まれています。カスタム表現やフレーズにも一致させることができます.
チェックアウトデモドキュメンテーション
slabText
slabTextは、利用可能な水平方向のスペースを完全に埋めるために見出しを行に分割する単純なスクリプトです。スクリプトは、利用可能な幅をピクセルフォントサイズで割ることによって、各行に設定する理想的な文字数を計算します。.
チェックアウトデモドキュメンテーション
タイプスケール
タイプスケールを使用すると、プロジェクトに適したタイプスケールをプレビューして選択できます。ルールはありません - フォントサイズ、スケール、さまざまなWebフォントを使って遊ぶだけです。.
チェックアウトデモドキュメンテーション
活版印刷
活版印刷は、活版印刷をレスポンシブにするのに役立ちます。あなたがする必要があるのは、単にいくつかのフォントを選択し、いくつかの設定を設定することですあなたは素晴らしいレスポンシブタイポグラフィを得るでしょう.
チェックアウトデモドキュメンテーション
Typi
Typiは、レスポンシブタイポグラフィを簡単に作成するために使用できるsaasミックスです。 HTMLや他の要素のフォントサイズと行の高さを作成します。また、Typiはラインの高さを計算するための垂直方向のリズム機能を持っています.
チェックアウト： ドキュメンテーション
Lining.js
Lining.jsプラグインを使用すると、Webタイポグラフィを完全に制御できます。 Safari、Google Chrome、Opera、Mozilla Firefoxなど、最も人気のあるブラウザでサポートされています。.
チェックアウトデモドキュメンテーション
ボーナス：2他のツール!
Webタイプの状態
Web Type of the Web Typeは、Webの種類や機能のサポートに関する最新のデータを提供するWebサイトです。カーニング、大文字、CSSフォントの読み込みなど、検索やカテゴリを使用して、必要なものを正確に見つけることができます。.
活版印刷
Typographは、1文字の単語の後に改行なしのスペースを入れ、数字と単位をつなぐことができる素晴らしいWebおよびスケッチプラグインです。それはまた二重スペースを取除き、入り、点および他のタイプミスです、従って読みやすいきれいで美しいタイポグラフィを達成できます.
チェックアウト： ドキュメンテーション
