クリエイターのために使いやすいサイトを目指していますので商用利用OKのフォントのみ紹介しています。個人利用のみのものはここでは紹介しません。なお、フォントを利用される際は、配布先ページに記載されている利用条件やライセンスを必ずご確認ください。
ウェブサイトのフォントは何を指定すればよいのでしょうか? CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー&ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
レスポンシブ対応で、可変のfont-sizeを定義するスタイルシートを記述するのは、なかなか面倒です。 スマホ表示での最小値、ワイドスクリーンでの最大値を決め、その間は可変サイズで表示されるfont-sizeのスタイルシートを簡単に生成できる無料オンラインツールを紹介します。 font-sizeは自由に定義できるので、日本語のフォントでも最適に利用できます。 Fluid-responsive font-size calculator Fluid-responsive font-size calculatorは、レスポンシブ対応のfont-sizeを可変にするスタイルシートもこの計算機で簡単に生成できます。font-sizeは最小値と最大値を決め、その間のサイズはcalc()関数でスムーズに変更させます。例えば、スマホなどの小さいスクリーンでは16px(最小値)に、ワイドスクリーンでは24p
小学1年生の手書き文字を元に作られた、「全児童フォント(フェルトペン)」が公開されました。字を覚えたての子どもが背伸びして漢字に挑戦したような、たどたどしい字体にほっこりさせられます。 童心を思い出させる字体 価格は1410円(税込)で、JIS第二水準漢字やIBM拡張文字などを含む、6700文字以上を収録。元が「小1ががんばって書いた字」なので、“オリジナル漢字”も多数混入しているとのことです。 同時に、収録された漢字が教育漢字(1006文字)のみの無料版も公開。こちらでも難しい漢字の表示は可能なのですが、子どもが描いた“黒いソフトクリーム的な何か”が上乗せされるので、公的な文書に使う際は注意が必要です。こんな無料版・有料版の差別化、今までにあっただろうか。 有料版は、筆致こそおぼつかないものの、難しい漢字もしっかり表示 無料版の場合、小学校では習わない漢字全てに、ンコっぽい落書きが乗せら
源ノ明朝は、アドビフォントとしては2番目の Pan-CJK 書体ファミリーであり、Serif 書体として源ノ角ゴシックと対をなすものです。どちらのファミリーも、東アジアに住む 15 億の人々のための、統一された書体デザインへのニーズに応えるためにリリースいたしました。 源ノ明朝は、東アジアで用いられている4つの言語(簡体中国語、繁体中国語、日本語、および韓国語)で必要な文字をサポートします。それぞれ、7つのウェイトを持ち、各ウェイトに含まれる 65,535 の字形は、各言語の多様性を尊重するとともに、共通化できる部分については積極的にデザインの一貫性を高めるようデザインされています。さらに、欧文の豊富な文字セットを有し、ラテン、ギリシアおよびキリル文字に対応しますが、そのデザインは Source Serif に基づいています。
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較! 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定(和文等幅)の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境:ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma
フォントによって、見た目の印象はかなり変わります。 言い方を変えれば、フォントを上手く使いこなすことによって、表現の幅を広げることも可能です。 とは言っても、なかなか自分が使いたいフォントを見つけるのは非常に大変です。 ということで、今回はそんな方のために役に立つフリーフォント検索・ダウンロードサイトをいくつかご紹介します。 FREEフォントケンサク FREEフォントケンサクは、国内のフリーフォントをまとめたフリーフォントリンク集です。 各フォントを見本付きで書体別・ジャンル別で検索できるので、とても便利。 オーソドックスなフォントから個性的なデザインフォントまで幅広く揃っています。 フォントに困ったら、まずはこのサイトで探してみると良いでしょう。 FREEフォントケンサクのサイトはこちら
実は、私もうすぐ結婚10年目です。 結婚式、招待状は自分たちでこだわって、手作りしたい。 もしくは頼まれてデザインをすることになった… そんな時に役立つフォントをまとめました。 エレガントだったり、可愛かったりとするフォントを 中心に、個人的によく使う物から選びました。 たかがフォントですが、せっかくの結婚式だからこそ 本物の良いデザインのフォントを選びたいものです。 もちろん結婚式だけじゃ無く、DTP、同人誌でも大活躍のフォントです。 Wekcome to Our Wedding Receptionの文字は差を出すため Baskerville Old Faceというフォントにしています。 Aphrodite Text より華麗なイメージの通常のAphroditeではなく、あえてシンプルなTextの方。 名前の通り美と愛の女神アフロディーテは美しい書体です。 Breathe Pro 筆記体
個人や商用で利用できる、無料の日本語フォント164種類を紹介します。 年賀状の宛名にも使える縦書き対応のフォント、かわいい手書きフォント、読みやすいゴシックなどが揃っています。同人誌や印刷物などでの利用も明記しました。 毎年まとめていますが、初紹介のものから既存のものまでダウンロード・ライセンスを改めて確認しています(※情報はこの記事の執筆時のもの)。 最新版を公開!フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ フォント紹介の前に各フォント制作者からのお願いごと。 フォントを利用の際には必ず利用条件やライセンスをご確認ください。 では、多彩なデザインが揃った「FGシリーズ」からご紹介。 FGゼロ 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 零式艦上戦闘機に使用されていた文字を現代風にアレンジしたフォント。レトロでシャープな字形
最初から入っている標準フォントだけでは、ブログの画像にキャプションを入れたいとき、WEBサイトのメリハリを付けたいとき、ロゴを作りたいときなど、かっこがつかない!そんなふうに思うことありますよね。 しかしフリーフォントって、あまりに種類がたくさんありすぎて、どれを使っていいのやら困ってしまいがち。欧文フォントは種類も豊富だけれど、日本語対応(漢字も対応)フォントを探し出すのはひと苦労。 そこで!今回は使うだけでサイトや印刷物がかっこよく仕上がる、そんな日本語フリーフォントをご紹介いたします。 誰でも自由に無料ダウンロード!商用利用も可日本語対応上記を満たすフォントの中でも、特にクオリティが高く、様々なシーンで使用できそうなフォントを中心に集めました。(参考:サイト改善 10のポイント) 誰でも上手いキャッチコピーが作れる!ノウハウ記事17選とテクニック集 1. スタイリッシュにまとめたい
Webページ閲覧中に「あれ…このフォントなんてフォントだろう…」ということがよくあるのですが、それをチョー簡単に調べられるChrome機能拡張がありましたのでご紹介。 その名も「WhatFont」。名前の直球具合に好感が持てます。 WhatFont WhatFontの使い方 まずはなにはともあれDLしましょう。ダウンロードはこちらから。 DLしたら機能拡張メニューバーにご覧のアイコンが現れます。あとはフォントを調べたいサイト上でこのアイコンをクリックするだけ。 マウスオーバーするとそのフォントが表示されます。 クリックすればこのようにfont-sizeやline-height、colorなどの詳しい情報も知ることができます(色が赤になっているのはhover時の色を表示しちゃってるっぽい) 複数指定している日本語フォントでもこの通り。バッチリです。
作成:2013/11/11 更新:2014/10/24 Webデザイン > 前回フォントや「文字」に関するまとめを書きましたが、書き足りないことが結構あったので、続編を作りました。今回は自分の勉強もかねて、フォントに関する基礎知識、アキ、段組み、詰め、図版などデザインに携わるなら知っておきたい知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 文字の基礎知識 1.文字用語 組版 2.組版(くみはん) 3.禁則処理 4.追い込み/追い出し/ぶらさがり 5.段間 行間(レディング) 6.アキ 7.行長 8.段組み 9.黄金比 詰め 10.プロポーショナル詰め 11.音引き 12.拗音(ようおん) 13.合成フォント 余白 14.近接と遠隔 15.版面(はんづら) 図版 17.図版率 18.訴求度 文字の基礎知識 1.文字用語 頻繁に出てくる、ちょ
作成:2013/10/28 更新:2014/10/24 Webデザイン > 先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フォントに関する知識 1.字間 2.行間 3.字詰め 4.文字組 5.ジャンプ率 6.余白/図版率 7.メリハリをつける 8.書体 9.読みやすいフォントサイズ 10.見やすい文章 11.Webフォント スライド 12.フォントに関するスライド フォントに関する知識 1.字間 字間とは文字と文字の間に生まれる空間。文章の行間・送り、漢字とひらがなの字間など文章レイアウト
フロップデザインフォントという商用可の日本語フリーフォント フロップデザインフォントは、どなたでも自由に無料でダウンロードして、商用・非商用問わず使用できる日本語フリーフォントです。このフォントは第二水準の漢字も含まれ、ワープロ、Adobe製グラフィックソフトなどのアプリケーションで自由に加工して使えます。ひらがな、カタカナ、アルファベット、数字をオリジナルで制作し、残りの部分をM+FONTで補いました。またM+FONTで不足している漢字をIPAゴシックで補完しています。 フォントのデザイン特徴について 水平、垂直の線がデザインの基本となっているシンプルなゴシック体の日本語フォントです。暖かみのある手書きを感じさせるひらがな、シャープなイメージのカタカナ、スマートでデザイン性の高いアルファベット(英語)、スタンダードで読みやすい数字とそれぞれ異なる考えに基づいて作られたフォントです。しかし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く