wordmark.it でフォントを選ぶ方法

LINEで送る
Pocket

フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそうですが、フォント選びはふぉんと大変。…やば。。

昔、というかこのサイトを知るまでは、こんなものを作って、これを参考に選んだりしてました。
wordmork.itの画像1

でも邪魔くさいというか、使用したい文字じゃないからいまいちピンとこない。
ってなわけで、今はフォント選びに使ってるのがこの【wordmark.it】なのですが、これ、すごく便利。使用しているPCの中に入っている、使用可能な全てのフォントで、使用したい文字を表してくれるという、優れもの。
今日はその簡単な使い方をご紹介します。

1, まずはここに入力したい文字を入れます。今回はこのサイトタイトルの【WebDesign ABC】を入力。
wordmark.itの画像2

2, 入力したら、ドンドン “いいなぁ” と感じたものを、こんな感じにクリックして行きます。
wordmark.itの画像3

3, 一番下まで選んだら、この “filter seledted” をクリック。
wordmark.itの画像4

4, そうすると選んだフォントのみが表示されるので、
wordmark.itの画像5
今度はそこからドンドン “ちょっと違うかな?” と感じたものを、そのフォントの右上にでてくる “remove” をクリックして消して行く。
wordmark.itの画像6

このドンドン消して行く作業、結構大事です。こだわり過ぎると、そこにドンドン時間が割かれて、気がつけばフォント選びで何時間も使っちゃった。。なんてこともあるので、”ちょっと違う” と感じたら、その場で切り捨てる勇気も必要です。
なんて言いつつ、一つの事にこだわりすぎて、気がついたら “あーあぁ。もうこんな時間。。” って事、未だに多々あるJUNなのですが。。

5, で、だいたい絞れてきたら、気になるフォントの左上にある “zoom” をクリックして、
wordmark.itの画像7

こんな風に拡大したり、
wordmark.itの画像8

“tracking” で行間を大きくしたり、小さくしたりして、イメージ合ってるかどうかチェックします。
wordmark.itの画像9

ここまでくれば、もうだいたいフォントは決まったころだと思うのですが、まだ悩んでるようであれば、

6, 最下部にある “save selection” をクリックして、また時間をあけてチェックして選んでください。ちなみにこの機能は sign up しないと使用できません。
wordmark.itの画像10

どうです?すんごい便利でしょ?
知らなかった方、是非これを利用してフォント選びの時間短縮につなげてくださいね!

ただ一つ注意しないといけないのは、自分の(現在使用している)PCに入っているフォントのみしかそこで表現されないので、仕事場等で発見した”これいい!”ってフォント、せっかく選んで使っても、家に帰ったら使用できない。。って事もあるので、その辺はフォントの名前を控えて家でDLするなりなんなりして、うまいことしてくださいね!



関連記事

SyntaxHighlighter Evolved のサムネイル

WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法


よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、 …

記事を読む▷


お名前.com から脱出する!:ドメインの移管方法


『お名前.com』でドメイン取得してからは、『Whois情報公開代行』の件(詳細はこちら)で大変な思いをしたのですが、そ…

記事を読む▷


Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法


せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿!でもいざFBでシェアしようとしたら、サムネイル…

記事を読む▷


WordPressのメニューを、footer等用に作成して追加する方法


WorPressのデフォルトでは、gnavi(グローバルナビ)にメニューを追加し、表示させることはできますが、foote…

記事を読む▷


OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定


今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から…

記事を読む▷


サーバー移転の手順 その2:データベースの移行(phpMyAdminを使って)


前回サーバ移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)からの続きです! って…

記事を読む▷


easy-edit

共通パーツ(header,footer等)をjQueryで読み込んで編集を楽にする方法 & 文字化け対策


WordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編…

記事を読む▷


no image

テキスト、画像を選択できなくする方法


facebookで『続きを読みたかったらいいねを教えてね!』みたいな記事がよくありますが、必ずそういう記事に限ってコピペ…

記事を読む▷


これは便利!!WordPressの投稿内に、管理者やログインユーザーにしか見れないメモを残す方法


よく投稿を途中まで作って、なかなか仕上げれずに長い期間あいてしまうと『これなんのサイト参考にしてたんやっけ?』とか『え〜…

記事を読む▷


お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法


先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

参考にさせていただいてるサイト

Error: Feed has an error or is not valid

PAGE TOP