これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
日本語WEBフォントをサブセット化する際の参考文字列一覧 | U-618WEB
WEBフォントをサブセット化して使用する際に参考になるかもしれない文字列一覧です。 Noto sansの軽量化の際などに。 以下、詳細です。 【2018/06/20】 一部更新しました。 【2018/07/11】 JIS第2水準の一覧を追加しました。 JIS第1水準漢字（2965字） 亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨
フォントをサーバーにアップしてWebフォントとして使う手順と方法を解説 | PLUSONEWEB
Webフォントを使用するには、大きく分けて2つの方法があります。 1つ目の方法は、「Google Fonts(無料)」や「TypeSquare(有料)」といったWebフォントサービスを使用するという方法です。 そして2つ目は、フリーフォントをサーバーにアップロードしてWebフォントとして使う(別名: セルフホスティング)という方法なのですが、今回は後者のセルフホスティングでWebフォントを使う方法についてをご紹介したいと思います。 こちらの方法でWebフォントが使えるようになると、より幅広い選択肢の中から理想に近いフォントを選択することができるようになるので非常に便利です。 Webフォントとして使用できるフリーフォントのライセンスについて それではフリーフォントをサーバーにアップロードしてWebフォントとして使う方法を解説していく前に、まずはWebフォントして使用できるフリーフォントのライ
これでもうUIデザイン用のSVGアイコンに困らない！ 2,000種類以上が揃った商用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。2,452種類のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォーマッ
UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio
UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということができます。また、作成した比例スケールは、CSSで書き出されるのですぐに使用できます。 Proportio Proportio -GitHub Proportioの特徴 Proportioの使い方 Proportioの特徴 Proportioはデザインシステムに必要となるタイポグラフィ、スペースや角丸やシャドウなどのシェイプ、コンポーネントに使用する比例スケールを簡単に作成するためのツールです。 パラメトリックデザイン（変数を基準としてサイズを決める形状作成方法）を採用しているので、体系的なデザイン
“奇跡のフォント”で小学生の正答率に差 開発者が語る「UDデジタル教科書体」の驚くべき効果とは（全文） | デイリー新潮
ロービジョン（弱視）や学習障害のひとつであるディスレクシア（読み書き障害）の人でも読みやすい「UDフォント」をご存じだろうか。UDとはユニバーサルデザイン（Universal Design）の略で、障害がある人に優しいだけではなく、そうでない人にも読む速さの向上や疲労感の軽減の効果が期待できる書体である。『奇跡のフォント 教科書が読めない子どもを知って－UDデジタル教科書体 開発物語』（時事通信社）を3月23日に上梓した書体デザイナーの高田裕美さんに話を聞いた。 【比較画像】一般的な明朝体と「BIZ UD明朝体」の読みやすさの違いを体験する 新たなフォントが続々開発 日々目にするさまざまな文章だが、そのフォント（書体デザイン）が何なのかを意識している人は少ないかもしれない。例えば、Yahoo!ニュースでは、デフォルトの設定でメイリオという書体が使われている。 「明朝体やゴシック体だけで、そ
2024年用、日本語のフリーフォント699種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
個人でも商用でも無料利用できる、日本語のフリーフォント727種類を紹介します。 Webデザイン、アプリ、動画、紙のデザインをはじめ、クライアントのプロジェクトでも販売する同人誌まで、幅広く利用できる無料フォントが満載です！ 前年の647からフリーフォントが50種類くらい増えています！ ※サイト閉鎖などでかなりのフォントが減っています。気になったフォントはダウンロードできるうちにダウンロードしておくことをお勧めします。 本記事は定期的に、全フォントを確認して、更新しております。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。 更新情報 2024/6/4: フォントを10種類追加 2024/2/20: フォントを11種類追加 2023/12/26: フ
Ricty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話 - Qiita
誰もが知る(？)プログラミングフォントこと Ricty にインスパイアされ、Ricty のように英文フォントと和文フォントを合成したプログラミングフォントを作りました。 その名も、プログラミングフォント「白源 (はくげん／HackGen)」です！ 白源 (はくげん／HackGen) 通常版 生成元にはプログラミング向け英文フォント Hack と、Adobe 製作の源ノ角ゴシックに丸みを付けた派生フォント 源柔ゴシック を使用させていただきました。 白源の生成元である Hack、及び源柔ゴシックには、いずれも SIL Open Font License Version 1.1 という大らかなライセンスが適用されているため、改変及び配布が自由となっています。したがって、白源の生成済みフォントファイル (ttf ファイル) は GitHub からダウンロードして、すぐにご利用いただけます。 「白
Consolas - 開発者用のフォント
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 2019年02月22日追記：こちら、ライセンスが非常に怪しい（というかブラック）です。記事は残しますが、ダウンロード/利用されないことをお勧めします。 プログラマーやWebデザイナーにとってフォントは気になる存在です。そのフォントの善し悪しで作業効率が大幅に変わってきます。視認性の悪いフォントを使うと不用意なバグを生み出してしまう可能性もあります。0やO、Iとlなどが見分けやすいものを選ぶべきです。 今回は開発者向けに作られたフォント、Consolasを紹介します。元々オープンソース・ソフトウェアではなかったのですが、v8.0からオープンソース（といっても現時点ではライセンスはありませんが…）になるとのことです。 Consolasの使い方 フォントの見栄えはこんな感じ。 コードを表
RPG-Awesome
Requesting Icons Have an idea for a new fantasy based icon? We'd love to hear it! New icons for future releases will mostly be based on the RPG-Awesome community on Github. Please keep these few things in mind when requesting an icon. Please be nice, and please write in proper english. Please search to see if your icon request already exists. If someone else has already requested your icon idea, +
プログラミング用等幅フォント「Fira Code」がモダンで素敵 | 綺麗に死ぬITエンジニア
皆さんは普段、PCを使う上で、フォントは気にしますでしょうか。 最近は、Webフォントの登場によって、Webサイトごとに独自のフォントが表示されているのを見る機会も多くなりました。 しかしながら、Webや画像制作等の経験がない方は、あまりフォントをインストールする機会もないかもしれません。 そこで今回は、プログラマー向けに、普段使う開発環境等に導入したら良さそうな、オープンソースのフォント「Fira Code」を紹介したいと思います。 Fira Codeは、プログラミング用・コーディング用フォントで、リガチャー（合字）により、関係演算子（比較演算子）や論理演算子、アローファンクションなどを見やすくしてくれる等幅フォントです。様々なプログラミング言語に対応できるように設計・工夫されています。 具体的には以下のように変換してくれますが、リガチャーになっても表示幅は同じで、文字自体が変化している
縦書きや擬音や魔方陣のフォント大集合！マンガや同人誌に無料で使える日本語のフリーフォントのまとめ
縦書きのマンガのセリフや吹き出しに、実際に聞こえる音や様子を表現する音を書き文字に、普通の人には読めないヒエログリフ・神代文字や魔方陣にぴったりの文字など、マンガや同人誌に無料で利用できる日本語のフリーフォントを紹介します。 Rounded Mgen+ 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 「フリーフォントを一つだけ」と聞かれたら、この使いやすい丸ゴシックのフリーフォントがオススメです。 収録漢字は14000文字以上！ JIS第一・第二・第三・第四水準に対応。極細から極太まで7種類が用意されており、さらに丸みを変化させた3バージョンが揃っています。 ちょうどよい丸ゴシックって、なかなかないんですよね。
Google Fonts + Japanese • Google Fonts + 日本語
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
Yaku Han JP - 約物半角専用のフォント
ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き 縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!-- HTML：CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist
ゴシック体で汎用性の高い日本語フリーフォント10選【商用利用可】
日本語のフォントはとにかく漢字が多いので、英語のフォントに比べると無料のフォントの種類が限られます。デザイナーであれば、日本語のフォントは有料で購入している人も多いかと思いますが、スポットで使いたい場合など、なかなか手を出しづらいのが現状です。 そこで今回は汎用性の高いゴシック体の日本語のフリーフォントを集めてみました。 ※細かな規約はサイトごとで異なるのでダウンロードするときはよく確認しましょう。 ※4/9 0:00 10選といいながら９つしかなかったので１つ追加しました Mgen+ (ムゲンプラス) 「Mgen+ (ムゲンプラス) 」は、フリーフォントである「M+ OUTLINE FONTS」をベースに、含まれていない漢字・記号をAdobeとGoogleが共同開発した「源ノ角ゴシック(Source Han Sans/Noto Sans CJKの日本語部分）」で補い、さらに豊富な漢字や記
フォント名を画像から調べる、日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ
Webページ、本や雑誌、ポスターや看板などで見たフォントを使いたいけど、そのフォントが何か分からない時ってありますよね。そんな時にはフォントを画像から、フォントの特徴からそのフォントが何か検索できる無料サービスを紹介します。 日本語のフリーフォントのまとめも参考にどうぞ。 2022年用、日本語のフリーフォント 609種類のまとめ フォント名が分からない日本語フォントを検索・自動判定 Adobeやダイナフォントやタイプバンクの有償日本語フォントをはじめ、青柳衡山フォントやみかちゃんフォントなど無料日本語フォントまで、日本語フォントを検索できます。 Identifont -形状別フォント 識別名称別フォント検索 対応フォント 日本語・英語 対応フォントは、書体メーカー一覧をご覧ください。 検索方法 形状別・名称別・スタイル別・類似・絵文字・メーカー別 使い方は簡単で、名前が分からないフォントの
Kazesawa フォント: M+ と Source Sans Pro の合成フォント
豊富なウェイト Extralight, Light, Regular, Semibold, Bold そして Extrabold の 6 種類ものウェイトを使い分けることができます。 繊細なシーンから、力強さが必要なときまで自由自在に表現が広がります。 自由なライセンス Kazesawa フォントは、非常にゆるいライセンスの M+ フォントと、SIL Open Font License のもとに配布されている Source Sans Pro の合成フォントなので、Kazesawa フォントも SIL Open Font License に基づいて提供されます。 このライセンスは FSF によってフリーであると認定されています。 Kazesawa フォントは使用や再配布を自由に行うことができます。 Kazesawa フォントは、もちろん Web フォントとして使用することもできます。 圧縮さ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
google webfonts helper
Adobe、プログラミング向け無料フォント「Source Han Mono（源ノ等幅）」をリリース／PanCJKをカバーした等幅フォント
