Webデザイナーは要ブクマ!フォントやテキスト関連の便利サイト20

久しぶりにブックマークしているサイトを整理しました。という事でお掃除後の恒例行事?私がブックマークしているフォント・Webフォント・テキスト関連のWebサイトを、中の人へ感謝の気持ちも込めてシェアします!何年もお世話になっているサイトばかりですが、ここ最近はWebフォント関連のサイトが増えてきましたね。いいな!と思えるサイトがあれば嬉しいです。

↑私が10年以上利用している会計ソフト!

フォント関連

フォントhack.jp

フォントhack.jp
フォントhack.jp
日本語の無料フォントの表示確認ができるサイト。複数のフォントを表示して比較することもできます。

dafont

dafont
dafont
英字の無料フォントを大量に集めたサイト。大量すぎて眺めてたらいつも物凄く時間がたってますw ライセンスは各自要確認。

フォントガレージ

フォントガレージ
フォントガレージ
日本語フォントの販売サイト。販売サイトはいろいろありますが、このサイトの特徴は一文字単位で購入できるところ。「5文字だけでいいのに全部買うのはなあ…」なんて時におすすめです。

Common fonts to all versions of Windows & Mac

Common fonts to all versions of Windows & Mac
Common fonts to all versions of Windows & Mac
MacでもWindowsでも表示される英字フォント一覧。自分で確認するというより、クライアントに見せるために昔からブックマークしています。

WhatTheFont!

WhatTheFont!
WhatTheFont!
画像をアップロードするとそのフォント名を教えてくれるサイト。欧文フォントのみ。

Webフォント関連

Google Web Fonts

Google Web Fonts
Google Web Fonts
Googleが提供している無料Webフォント。フォントを選んでCSSに追加するだけで素敵フォントを表示できます。詳しい使い方は検索すればたくさんヒットしますが、「1分で誰でも導入できる「Google Web Fonts」の使い方」で書かれているのが基本の流れですね。今のところ日本語は含まれていません。英語サイトを作る時は頻繁に使っています。ありがたや。

TypeSquare

TypeSquare
TypeSquare
モリサワ社が提供している日本語のWebフォント。2013年12月31日まで無料で使用できますよ!使用するサイトを登録し、JavaScriptタグをコピペして表示させます。私のポートフォリオサイトでも使わせて頂いています。

Fontello

Fontello
Fontello
アイコンをWebフォントとして配布しているサイト。「アイコンフォント」などと呼ばれていますね。好みのアイコンを選び、ダウンロード後、WebフォントとしてCSSに記述して表示させます。商用サイトでも利用できるフォント多め。同様のサイトは多々ありますが、ここは使いやすく、種類も豊富です。

IEにも対応!10分でできるWebフォント実装法

IEにも対応!10分でできるWebフォント実装法
IEにも対応!10分でできるWebフォント実装法
Webフォントの実装方法を丁寧に解説している記事。少し昔に書かれたものですが、わかりやすくておすすめです。

ttf2eot

上記記事の解説でも紹介されている、フォントファイルの形式を .ttf から .eot に変換してくれるサイト。
閉鎖されました。代わりにFont Squirrelのジェネレーターが使えます。

Ligature Symbols

Ligature Symbols
Ligature Symbols
リガチャー(合字)を使ったWebフォント。商用でも無料で使えます。IE非対応という点に注意。

テキスト関連

HTMLエンコードフォーム

HTMLエンコードフォーム
HTMLエンコードフォーム
ブログで記入するとうまく表示されなかったりする、「<」や「&」などの記号をエンコードするためのフォーム。

URLエンコードフォーム

URLエンコードフォーム
URLエンコードフォーム
HTMLエンコードフォームと同じサイトです。こちらはURLに日本語が含まれているものを記号と英数字に変換するフォームです。日本語WikipediaのURLによくみられる、あの長い文字列です。

PXtoEM.com

PXtoEM.com
PXtoEM.com
左の表から基準となるフォントサイズを選ぶと、それに対応するピクセル、em、%、ptに変換してくれるサイト。

竹取 JS

竹取 JS
竹取 JS
日本語テキストをたて書きに表示できるJavaScript。短文に向いてるかも。初めて見た時は感動でした XD

numMojiなんもじ

numMojiなんもじ
numMojiなんもじ
フィールド内に入力した文字数をカウントするサイト。「空白をカウントしない」「半角英数字2文字で1と数える」なんてオプション付き。書き物をする時にお世話になってます。

ブラウザーをテキストエディターに

ブラウザーをテキストツールに
たった一行でブラウザをシンプルなメモ帳に変える方法」で紹介されていた技。ブラウザーのURLに以下を入力すると、ブラウザーが簡易テキストエディターに変身します。装飾のないプレーンテキストが必要な時に、一旦ここに コマンド + シフト + V でペーストして装飾をはずしてます(Mac+Chromeの場合)。保存の必要のない一時的なメモもここを使ってますね。

data:text/html, <html contenteditable>

Dummy HTML snippets for webdesigners

Dummy HTML snippets for webdesigners
Dummy HTML snippets for webdesigners
ダミーテキストをドラッグ&ドロップでカスタマイズできるジェネレーター。欧文のみ。

Binary to Text (ASCII) Conversion

Binary to Text (ASCII) Conversion
Binary to Text (ASCII) Conversion
テキストをバイナリ(2進数)、バイナリをテキストに変換するサイト。使う機会はほぼないですw たまーに友人からバイナリで暗号が送られてきた時用にブクマしてます。

そういえば以前バイナリでTweetしたような…。

FlipMyText

FlipMyText
FlipMyText
こちらも使う機会あまりないですけど、文字を逆さにしたり、逆から書いたりできるサイト。逆から書いたりは日本語でもできます。昔Facebookで逆さ文字が流行った時にブクマしてそのままだったもの。Twitterでも使えるかな?

みなさんのおすすめサイトもぜひぜひ教えてください! ;)

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)