Arial Narrow フォントプレビュー＆SVG ジェネレーター（無料オンラインツール）
最終確認： ／ ArialNarrow.com 編集部
結論から言うと
下の入力欄に文字を打ち込むと、Arial Narrow の 4 つのスタイルすべてでプレビューできます。さらにジェネレーターで 字間や色を調整して SVG や PNG をダウンロードしたり、そのまま使える CSS をコピーしたりできます。 無料・アカウント不要で、データがブラウザの外に出ることもありません。
全スタイルでライブプレビュー
ジェネレーター：SVG・PNG の保存と CSS のコピー
きれいに仕上げるコツ
- まずフォントを確認。文字が横に広く丸っこく見えるなら、 端末が代替フォントを表示しています。Office の入った Windows PC に切り替えるか、Arial Narrow をインストールしてください。
- 小さい文字は字間を広げる。14 px 以下では字間を 0.2〜0.5 px 広げましょう。そのままだと詰まった文字同士がくっつき始めます。
- ラベルは大文字で。少し字間を空けた大文字の Arial Narrow は、 引き締まったコンパクトな表見出しやボタンになります。
- 共有には PNG、編集には SVG。PNG はどこでも同じ見た目です。 SVG は編集できますが、正しく表示するにはフォントかアウトライン化が必要です。
このツールの使われ方
デザイナーはレイアウトソフトを開く前に、パッケージのラベルや仕様書のたたき台をここで作っています。 開発者は出力された CSS を使い、クライアントの Office テンプレートと Web の見た目をそろえています。就職・転職活動中の方は、Arial Narrow で履歴書を作る前に、名前や見出しの見え方を確かめています。
よくある質問
スマホで見るとプレビューが Arial Narrow に見えないのはなぜ？
当サイトは Arial Narrow のファイルを配信していないため、このツールはお使いの端末に入っているフォントで文字を描きます。iPhone、多くの Android 端末、Office の入っていない Mac にはこのフォントがないので、代わりのフォントで表示されます。本物を見るには、Office の入った Windows PC でこのページを開いてください。
Arial Narrow が入っていないパソコンでも SVG は正しく表示されますか？
SVG は文字をテキストのまま保存するので、フォントが入っている環境でしか正しく表示されません。ロゴや他人に渡すファイルの場合は、フォントの入ったパソコンで Illustrator・Inkscape・Figma などで SVG を開き、文字をアウトライン化してください。PNG は画像なので、どこで開いても同じ見た目です。
ここで作った画像は商用利用できますか？
作った画像はあなたのものです。ただしフォントのライセンスは別の話です。Microsoft Office 経由で Arial Narrow が入っているなら、それを使って画像を作ることは一般的に認められていますが、フォントファイル自体を配布することはできません。
入力した文字はどこかに送信されますか？
いいえ。すべてブラウザの中で処理されます。文字や色、設定が端末の外に出ることはありません。