レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。

まさかまさかの朗報です！ MORISAWA BIZ UDゴシックとMORISAWA BIZ UD明朝がGitHubにオープンソースのOFLで公開されています！！！ アップデート情報 4/1 Google Fontsで利用できるようになりました！ Morisawa Inc. -Google Fonts 3/29 v1.001, v1.002がリリースされ、不具合が修正されました。 3/24 HTMLやCSS、JavaScriptなどコードを書く人にどうぞ。 仕事早っ！！ オープンソースになったMORISAWA BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」がリリース MORISAWA BIZ UDフォントとは GitHubで公開されているMORISAWA BIZ UDフォント MORISAWA BIZ UDフォントのダウンロード MORISAWA BIZ UDフ

Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという

Source Han Sans（日本語名称：源ノ角ゴシック）がバリアブルフォントに 源ノ角ゴシックがバリアブルフォントに。最小値から最大値の間の数値で表現される連続したウェイトを自由に使え、ニーズに応じて微妙なタイポグラフィの変化や効果を作り出すことができます。 2010年代初頭のある日、Googleはアドビに、東アジアの幅広い言語をサポートするオープンソース書体の共同開発という、野心的な提案を持ちかけました。当時アドビは、幸運にも（あるいは時代の流れとして）すでにそのような書体を開発しているところでした。そこで両社は、世界初のオープンソースのPan-CJK（中国語、日本語、韓国語で共用できる）書体をデザイン、開発するために協力することにしたのです。その取り組みは、Source Han Sans（GoogleからはNoto Sans CJKとしてリリース）として実を結びました。本日、アドビ

Adobe CCユーザーに朗報です！🎉 Adobe Fontsにまたまた、191書体の大量の日本語フォントが追加されました。これでトータル436の日本語フォントが利用できます。 Adobe Fontsは、Adobe CCのユーザーなら追加料金なしで利用できます。もちろん商用利用もOK、詳しくはライセンスページをご覧ください。 フォントのライセンス -Adobe Fonts 今年初めにも日本語フォントが大量に追加されましたが、さらに追加です！ 前回の分は、下記の記事をご覧ください。 日本語フォントがAdobe Fontsに大量追加、砧書体制作所のフォント39種類が利用可能に おそらく、4/10のフォントの日に向けたアップデートだと思いますが、まだまだ追加されるかもしれません。とりあえず、現在追加されてたものを紹介します。 まずは、デザインシグナル。七種 泰史氏のフォント。キリギリス・こころ

現在では想像もつかないが、テクノロジーの襲来によって漢字が厄介者扱いされていた時代。未来の漢字の姿をどのようにすべきかを本気で考え、不可侵の領域である字体まで踏みこんだ人々がいた。そんな方々が残した書籍（以下、造字沼ブック）を読み、臨書し、その想いを味わうお話しです。 第三冊は、『コンピュータに使う漢字の簡略化の限界』から、ミキイサム氏のデザインした「COM書体」を紹介したい（書籍ではなく年鑑に掲載されたの2ページより引用する）。 ▲『日本タイポグラフィ年鑑 1976』P.185より ...とても可愛い。ちょっと長体がかった素朴な佇まい。細かいところがゴニョゴニョっと省略されているのが特徴的。その省略により、本来複雑な漢字も密度が一定になっており、とても柔らかだ。 前回、前々回ご紹介した2名とは異なり、作者であるミキイサム氏は本職の方だ。 ミキイサム氏氏は明治生まれで東京美術学校（現・東京

通常は有料ですが、今週末まで無料でダウンロードできる、おしゃれなデザインにぴったりな手書きフォントを紹介します。 本来は有料なだけあってかなり高品質。フォントファイルは.otfと.ttfでWindowsでもmacOSでも利用でき、さらにWebフォントも含まれています。 期間中にダウンロードしておけば、いつでも使えて、再ダウンロードも無料です。 Strings // Handwritten Script Font おしゃれな英語の手書きフォントが好きな方は、こちらもお勧めです！ 商用利用無料、おしゃれな筆記体の英語フリーフォント・手書きの英語フリーフォントの総まとめ Stringsは手書きの質感がおしゃれなスクリプトフォントです。画像にフォントをポンッと配置するだけで、おしゃれなデザインになります。

PlainStyle を友だちに教える Twitter Facebook はてブ 説明 文字を学術用の記号に置き換えることによって、擬似的にフォントをつけることができるツールです。 Unicode に対応しているアプリケーションであれば、Twitter以外にもコピペできます。 テキストの一部を選択してからフォントを選ぶと、その部分だけフォントが変わります。 フォントを指定できるのは英数字のみです。 length は Twitter での消費文字数の目安です。 ご注意 重要な文書には使わないでください。音声読み上げやその他の機械処理で不具合が生じる恐れがあります。 URL やハッシュタグにフォントを付けるとリンクにならないかもしれません。 古い端末や OSバージョンによって正しく表示されない可能性があります。 当サイトは趣味で運営されています。環境によってうまく動かないかもしれませんが勘弁し

Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。 タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。 Google Fonts -Optimizing your font requests Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。 日本語フォントにも対応しています！ Tip: Shave up to 90% off the size

mojimo-manga（もじも まんが）とは？ あのマンガの、あのアニメの、 あのフォントが使える！ アニメやコミックなどで見かけない日はない、Fontworksの書体たち。 デザイナー・イラストレーターの方をはじめ、趣味で創作活動を行っている方、 同人誌を制作されている方に最適な書体をセレクト。 36書体が、定額制で自由に使えます。 Fontworksとアニメ・コミックとの 深いつながり 『新世紀エヴァンゲリオン』のタイトルカットなどで特徴的に使用され大反響を呼んで以来、 アニメやゲームなどのデジタルコンテンツへのご利用が瞬く間に広がりを見せたフォントワークスの書体。 近年ではさらに、コミックやライトノベルの装丁など カジュアルな用途でもお使いいただける、表現力豊かな書体が揃っています。 フォントコラムマティス-EB 新世紀エヴァンゲリオンで行われた文字表現 ※本書体はmojimo-m

Webでも紙でも文字のデザイン、タイポグラフィは非常に大きな存在です。 文字のデザインで基本となるカーニングについて、基礎知識から基本的なやり方、CSSでのカーニングのやり方までを紹介します。 The Ultimate Guide to Kerning 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 この画像のどこがおかしいか カーニングとは カーニングの基本的なやり方 カーニングはいつ必要なのか カーニングではないもの CSSでカーニング 終わりに この画像のどこがおかしいか この画像のどこがおかしいのか、経験の浅いデザイナーは頭をひねるかもしれません。

『全児童フォント』とは 小学一年生の児童が実際に書いた手書き文字をベースに作成した、オリジナルの漢字もモリモリ収録された日本語フォントです。 今回リリースするフォントは【フェルトペン】バージョンとなります。（将来的に、【鉛筆】【チョーク】【クレヨン】バージョンの追加を予定しています。） 今回は、 ・漢字が1,000文字ほど収録された【無料版】『全児童フォント教漢版』 ・漢字が6,700文字ほど収録された【有料版】『全児童フォント』（価格：1,410円・税込） の、２種類をご用意しています。 無料版・有料版の違いについて １．無料版では難しい漢字が大変なことになっています。 有料版の『全児童フォント』には、教育漢字を含む第一水準・第二水準・IBM拡張文字（6,700文字以上）を収録しています。 無料版の『全児童フォント教漢版』には、小学校で習う教育漢字（1,006文字）を収録しています。 【

フォントやデザイン素材を99%オフの特大セールで販売するDesign Cutsから、ついに日本語の有料フォントがセールに初登場です！ 販売期間は、7月31日12時まで。 【朗報】Design Cuts5周年記念で、5日間だけ復活！ 販売期間は、10月16日12時までです。 計233,000円分の日本語の有料フォントが、99%オフの3,200円で購入できます。日本語の有料フォントはWebデザイン、アプリ、動画、ゲーム、紙のデザインなどに利用でき、クライアントのプロジェクトでも販売する同人誌に使用してもOK。 デザインで差がつく日本語フォント集 画像の「豪龍」だけでダウンロード版定価18,000円！ 去年暮れにリリースされたばかりの「バサころ」も定価18,000円！ 一つ欲しいのがあるだけで、充分に元が取れてしまいます。 セットに含まれてる日本語の有料フォント Design Cutsでの購入方

フォントの色というか、塗りはベタが常識でした。 手書き風のフォントでも、隙間があるだけで、ベタ塗りです。 そんな今までのフォントの常識を打ち破る、SVGフォントを紹介します。 SVGフォントの塗りには高精細な水彩テクスチャが使用されており、透明感のある美しい文字が利用できます。

タイプフェイスデザイナーであるAlfredo Marco Pradil氏が自身のサイトのローンチ記念として期間限定で、有料フォントが無料でダウンロードできます。 期間は4月15日まで、今週いっぱいなのでお見逃しなく！ すべてのデザイナーに高品質なフォントを提供したい、と神のような方です。

ブランドやサービスのロゴで使われているようなモダンで、読みやすい文字をイメージして、デザインされた日本語の無料フォントを紹介します。 「刻ゴシック・刻明朝」をリリースされている作者様の新作で、連絡をいただきました！ フォント: コーポレート明朝 イラスト: freepik コーポレート明朝は源ノ明朝の派生フォントで、レトロな感じがかわいいコーポレート・ロゴを明朝体にアレンジしたものです。 ひらがな・カタカナ・漢字・英数記号文字が利用できます。漢字は源ノ明朝なので、文字がなくて困ることはないでしょう。

IBMと聞くと、ThinkPadを思い浮かべる人も多いと思います。 堅牢な作りは、使用していて安心感・信頼感があり、わたしも長年愛用していました。 そんなIBMから、コーポレートフォントがオープンソースフォントとして公開されました。「IBM Plex」と名付けられたフォントは、カジュアルなHelveticaという位置づけで、さまざまなデザインに合うフォントです。 安心・信頼に加え、洗練された美しさも備えています。 Win/Mac用、Webフォントがダウンロードでき、TrueType, OpenTypeも揃っています。 IBM Type IBM Type -GitHub ライセンスはSIL OPEN FONT LICENSEで、個人でも商用でも無料。Webデザイン、スマホアプリ、ゲーム、動画、紙デザイン、同人誌など、さまざまな媒体で利用できます。 IBM Plexにはサンセリフ、セリフ、モノ

“墨だまり”を表現した「A1ゴシック」、言葉によって形が変化する「みちくさ」など全17書体を今秋リリース 株式会社モリサワ（代表取締役社長：森澤彰彦　本社：大阪市浪速区敷津東2-6-25 Tel.06-6649-2151 代表、以下モリサワ）は、2017年秋にリリースする新書体を発表します。 モリサワは近年、定番として利用できる書体はもちろん、多彩な表現につながる装飾性の高い書体や日本語以外の書体の拡充に努めてきました。 本年度は、人気書体のA1明朝の特徴を継承しつつやわらかな表情をもつ「A1ゴシック」をはじめ、モリサワオリジナルの欧文書体で、98の言語と海外の表記ルールに対応する「Citrine（シトリン）」、縦組みの際に言葉によって文字の形が変化する機能をもった「みちくさ」、歴史的な書物の字形を復刻した「きざはし金陵」、活版印刷のインクのにじみを再現した「秀英にじみ明朝」、大胆な筆使い