個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

タイポグラフィ/WEBフォントに関する作業を簡単にするツール14

WEBフォントがどんどん使われるようになるにつれ、関連するツールもたくさん出来てきています。
多いのはWEBフォントを調べるサービスや、フォントの組み合わせを比較検討するサービスなどでしょうか。
便利なサービスがたくさんありますので、まとめてみました。

Typecast

typecast_com
フォントがレイアウト上でどのように見えるかを確認できるツール。
収録フォント数は約23,000。
フォントサイズ、行間、カラー、背景色なども変更可能です。
最適なフォントの組み合わせを選択できます。
Typecast

Tiff

tiff_herokuapp_com
フォントの違いを比較できるサービス。
オーバーレイしたり、並べて比較することが可能です。
フォントの微妙な違いがわからないときにとっても重宝します。
Tiff

Web Font Combinator

font-combinator_com
フォントの組み合わせをレイアウト上で確認できるツール。
フォントサイズ、行間、背景色などを変更することができます。
The Web Font Combinator

Typetester

typetester_org
異なるフォントの組み合わせを3タイプ、並行して比較検討できるサービスです。
便利なのは、1つのフォントを選ぶと、ボールドやイタリックなど、12種類のウエイトの違うフォントを同時に表示してくれることでしょう。
Typetester

TypeWonder

typewonder_com
調べたいサイトURLを入力すると、指定したWEBフォントをプレビュー表示してくれるサービです。
当然ですが、自分のサイトにも適応可能です。
気に入った場合には、右上にある「Get Code」というボタンを押せば、CSSをコピーできるので、そのまま自サイトにも実装できてしまうのです。
TypeWonder

Font Combinator

typotheque_com_site_font_tester_php
「雑誌」「本」「新聞」「ポスター」「招待状」「WEBサイト」の6種類のレイアウトを選択し、フォントの組み合わせを検討できるサービス。
気に入った組わせはPDFとしてもダウンロード可能です。
Font Combinator

Flipping Typical

flippingtypical_com
パソコンにインストールされている全フォントを、プレビューできるWEBサービス。
サイトにいくだけで、フォントが表示されます。
面白いのは、プレビューに自分の好きな言葉で表示できるという点です。
ただし、すべてのフォントが表示されるというわけではありませんので、その点はご注意を。
flipping typical

Web Font Generator

fontsquirrel_com_tools_webfont-generator
WEBフォントを生成できるサービス。
アップロードできるのは true-typeフォント(.ttf), open-typeフォント(.opt), Windowsのポストスクリプトファイル(.pfb), Macのdfont形式をサポート。
Create Your Own @font-face Kits | Font Squirrel

FFFFALLBACK

ffffallback_com
試したいページのフォントに関するCSSを簡単に触れるようにするブックマークレット。
FFFFALLBACK

FontFriend

somadesign_ca_projects_fontfriend
こちらも、試したいページのフォントに関するプロパティーを直感的に変更できるようにするブックマークレット。
上記FFFFALLBACKよりも格段に使いやすいと思います。
FontFriend

WhatFont Tool

chengyinliu_com_whatfont_html
ブラウザ上のフォントをすぐに教えてくれるChrome用機能拡張。
フォントサイズ、カラー、行間などを教えてくれます。
ブックマークレットもあります。
WhatFont Tool

WhatTheFont

myfonts_com_WhatTheFont
画像に使用されているフォントを調べられるサービス。
気になるフォントの画像をアップすれば、解析してくれます。
WEBフォントを利用しているサイトもよく見かけますが、まだまだ画像を使っている場合も多いので、重宝するサービスです。
iPhoneアプリもあります。
WhatTheFont

Typechart

Typechart
昔からあるサービスですが、WindowsやMac環境でフォントがどのように見えるかを確認できるサービスです。
さらに、気に入った組み合わせが見つかれば、スタイルシートをダウンロードすることも可能です。
Typechart

CSSTypeset

csstypeset_com
こちらも古くからあるサービです。
フォント関連のプロパティーを直感で操作しながら、そのままスタイルシートをコピーすることができるサービス。
CSS Type Set

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 4

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+

海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと

記事を読む

HTML5/レスポンシブ/フラットデザインの無料テンプレート50(2013年分)

以前「全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121」という

記事を読む

Bootstrapの無料テーマを探すなら一箇所で全部探せる「ThemeFinder」

Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」

Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」をご紹介しま

記事を読む

プロが使う欧文/英語の無料フリーフォントが手に入る無料フォント配布サイトBest10

プロが使う欧文/英語の無料フリーフォントが手に入る無料フォント配布サイトをまとめてみした! 無料の

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像サービスを開始

便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは

記事を読む

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

今回ご紹介するのはSVGベースのシームレスパターンを簡単につくれて、PNG形式でダウンロードできてし

記事を読む

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

html/cssでtableを組むのって、手間がかかりますよね。 そんなとき便利なのがジェネレータ

記事を読む