Typography 10について役立つツールとリソース

Typographyの理解に関する私の前回の記事では、Typographyのデザインと、それを操作してWebサイトのレイアウトを改善し、ユーザーエクスペリエンスを向上させる方法について説明しました。この記事では、私はリストしている タイポグラフィのための私のお気に入りのツールの10 ウェブ上で.

これらは、HTMLグリッドとコンテンツ領域の構築、CSSスタイルの作成、フォント名の生成、その他多数の素晴らしいものを手助けすることができます。下記のリンクをチェックして、ポストディスカッションエリアであなたの考えをお知らせください。.

おすすめ読書： タイポグラフィを理解する：Webのために書く

フォントマトリックス

このオンラインガイドは24ways design blogによって投稿されました。それはあなたが様々なソフトウェアベンダーからデフォルトで見つけるすべての標準的なウェブフォントのマトリックス表を特徴とします。人気のあるタイトルには、Windows、Mac OS X、Microsoft Office、およびAdobe Creative Suiteプログラムがあります。.

カラーコントラストチェック

色のコントラストは、標準の白黒モデル以外で作業するときによく発生します。あなたがマッチを見つけたとき、それはデザインの完成度のように感じます。それでもカラーコンボの選択が悪いと非常に悪く見え、デザイン全体に悪影響を及ぼします。この小さなWebツールを使用すると、任意のスタイルレイアウトで互いに一致する色のセットを選択できます。.

HTMLイプサム

テキストを出力するだけでは不十分なLorem Ipsumツールが必要ですか。このオンラインHTMLジェネレータは、最も一般的なページ要素用のコードブロックを作成します。例としては、番号なしリスト、定義リスト、Webフォーム、テーブル、その他多数の解決策があります。.

タイプチャート

TypechartはCSS開発者として私のお気に入りのツールのひとつです。私は頻繁に私のシステム上の特定のフォントをWebプロジェクトに合わせることを探していますが、私はコレクション全体をめくる時間がありません。この素晴らしいツールを使用すると、フォントファミリの一般的な選択肢を調べたり、適切なCSSコードをダウンロードしたりすることができます。!

PX-to-EM.com

デフォルトのブラウザのテキストサイズをリセットしない限り、emsとピクセルのマッチングに問題が生じる可能性があります。このブラウザ内アプリは、pxからemへの変換テーブルとユーザーインターフェイスの両方を提供します。それは確かに非常にシンプルなツールですが、それは本当にシンプルな機能を備えた便利なガイドを提供します - そしてあなたは無料の値札を打つことはできません.

CSSタイプセット

CSS Type Setは、初心者向けのツールなのであまり使い過ぎないことをお勧めします。選択した特定のフォントプロパティに基づいてCSSコードを生成できます。最初は非常に便利ですが、時間が経つにつれてそれは寄りかかるために松葉杖になります。そして、あなたは自分自身でCSSプロパティを習得するように動機付けられることはできません。しかし、もしあなたがプロジェクトの時間を節約する必要があるなら、このツールは見落とされることができません。.

反転する

これは、フォントプレビューライブラリの非常にユニークな例です。一般的な反転には、ご使用のオペレーティングシステムに固有の少数のフォントが含まれています。フォントディレクトリを自動スキャンして、最も安全なWebソリューションを見つけます。あなたはそれらを並べて比較することができ、あなたのお気に入りのオプションの中から簡単に選ぶことができます。これはあなたがブックマークして最後の最後まで考えないでくださいもう一つの素晴らしい時間節約です.

活版印刷グリッド

HTMLとCSSのグリッドを中心にしたデザインについては多くの話があります。あなたはおそらくグリッドがどのように機能するかの概念を理解していて、ピクセル単位でウェブサイトを測定することは変わらない。 CSS-Tricksによるこのグリッドチュートリアルは、デジタル時代のタイポグラフィの基本を紹介するためのガイド付きの作業に似ています。 Webデザインの分野では、これははるかに高度なトピックです。しかし、ある程度の忍耐力がある場合は、詳細を調べて、これらのグリッドプロパティが実際にページレイアウトにどのように影響するのかを確認することをお勧めします。.

WhatTheFont!

私たちはみんな本当にかっこいい識別できないフォントのロゴや画像を見つけました。 WhatTheFontは数年間インターネット上でラウンドを行ってきた、それはまだ私のお気に入りです。アップロードする画像を選択すると、それらのスクリプトによって写真内のテキストが分析され、似たような書体と一致します。アプリはあなたがあなたの都合の良いときに各フォントを購入することができる外部の製品にあなたをリンクさせるでしょう。.

ベースライン/ライン高さ計算

最後に、ラインの高さとリズムのプロパティを生成するための本当に強力なツールです。基本フォントサイズと行の高さの値を入力するか、横に独自のカスタムCSSコードを含めるだけです。あなたはこれらのプロパティがあなた自身のウェブサイト上でどのように見えるかのアイデアを得ることができるようにアプリはいくつかの異なるスタイルでプレビューを生成します.