個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

【保存版】商用利用可!漢字も使える無料の日本語/和文フリーフォント

【保存版】商用利用可!漢字も使える無料の日本語/和文フリーフォント114

フリーフォントを探すのは時間と手間がかかります。 これまでは、必要になったときだけググってフォント

記事を読む

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

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

記事を読む

WordPressで格安レンタルサーバーを選ぶなら?エックスサーバーかミニバードがおすすめ!

WordPressにベストな格安レンタルサーバーはこれです!

WordPressでレンタルサーバーを選ぶ場合のおすすめサーバーご紹介します。 新しくWordPr

記事を読む

かすれ具合が人気のベストセラー英語/欧文フォント「Veneer」がセール&ディスカウント中

かすれ具合が人気のベストセラービンテージ風英語/欧文フォント「Veneer」がセール&ディスカウント中

かすれ具合が人気のベストセラービンテージ風英語/欧文フォント「Veneer」がセール&ディスカウント

記事を読む

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

2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン

記事を読む

美しいエフェクトが施されたCSSで作られたボタン12

css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を

記事を読む

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

簡単にWEBサイトの背景画像が作れてしまう無料ジェネレーターのご紹介です。 つくれるのは、SVG形

記事を読む

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Fra

記事を読む

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

CSS3を使えば、シンプルなコードなのに、ユーザーを「おっ!」と思わせる楽しい動きを簡単に実装できて

記事を読む

CSSアニメーションを使ったエフェクトライブラー9

CSSアニメーションを使ったエフェクトライブラリー9

CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい

記事を読む