デザインやコーディングの文字組に最適?よくある日本語フォントをリアルタイムで調整→確認するツール

2016.12.20 webツール

みなさんは、デザインを造ったり、もしくはデザインなしでコーディングを始めるとき、文字組みをどうしていますか。

  • 最近のトレンドだと○○pxかな?
  • さすがに16pxはデカいような…
  • スマホで基本文字サイズが12pxって大きい?小さい?

など。

PCかスマホ、どちらを優先して考えるかにもよりますが、僕の場合は正直IllustratorやPhotoshop上でデザインをしていても、実際の画面で表示された時の、文字が画面を占有する具合などは正確につかめない時が多いのです。でもちょうどいい文字組のサイトがみつからなかったり。

じゃあ簡易的に編集しつつみれればいいよね、ということで、「日本語フォントの按排(あんばい)確認帳」なるものを作りました。

サイトデザイン、コーディング時の日本語フォントのline-heightやfont-weightなどをチェックするオンラインツール!

日本語フォント按排確認帳

レイアウトにflexboxを使っているため正確なレイアウトで閲覧してこそのツールということで、ブラウザはIE10+の環境でご覧ください。ほかモダンブラウザに関してはある程度大丈夫だと思います。

ブラウザのCSSが適用された「基本状態」

ツールではグレーの背景のデモ部分にh1~h6と、pタグを使用しています。

これらはmarginの調整などを行っていないので、ブラウザのCSSのみが適用されている状態となってます。

Google Fonts 早期アクセスの日本語フォントも掲載。

Google Fonts + 早期アクセスで使える日本語フォントも、ツール上で再現が可能です。(2016年12月現在)

ニコモジとかも使えます。

テキストの個別・一括編集が可能

HTML5からのcontentEditable属性を指定しているため、見出しや本文をクリック・タップするとその個所を編集してご覧いただけます。

また、メニューからは一括で編集できます。

 

日本語フォントの按排(あんばい)確認帳 動作環境

IE10+, Edge, Chrome, Safari, Firefox, Android5.0+,iOS

一部未検証ですのでバグあったら教えてください。。

日本語フォント按排確認帳

 

でわ!

 

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。