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

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

Googleフォントを使ったタイポグラフィに惚れぼれ!「Google Web Fonts Typographic Project」

Googleフォントを使った美しいタイポグラフィに惚れぼれ!「Google Web Fonts Typographic Project」

Googleフォントを使った美しいタイポグラフィをご紹介します。 Googleフォントは無料で使え

記事を読む

CCSだけで見出しに自動で連番を記入する方法

当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。 こうしたとき、以前ま

記事を読む

文字をカラフルに!CSSとjQueryでテキストを2〜3色で表現してしまう「HalfStyle」

CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色

記事を読む

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料の現場で使えるBootstrap3用テンプレートをまとめました。 ラ

記事を読む

CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと

記事を読む

WEBデベロッパーのためのおすすめYouTubeチャンネル15選

WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS

記事を読む

無料で使えるフラットデザインUIキット40

フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン

記事を読む

いちど食べたらやめれない!美味(ウマ)すぎるフードタイポグラフィがコレクションされた「FOOD TYPE」

食べることもタイポグラフィも大好きです。 では、その2つが同時に体感できるとしたら?  それはも

記事を読む

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

戦慄を覚えるマップです。 サービス自体は1年前に公開されていましたが、海外で再び注目され、私自身が

記事を読む

初心者のためのCSSアニメーションチュートリアル

よくわかる 初心者のためのCSSアニメーションチュートリアル

初心者のためのCSSアニメーションチュートリアルです。 海外の有名ブログでわかりやすいチュートリア

記事を読む