2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
関口浩之
著者：関口浩之の記事一覧 更新日：2021年04月13日、公開日：2014年07月11日、 著者：関口浩之 2014年07月11日[3731] 家にカギをかけないという生き方もじもじトーク［01］デジタルフォントが豊富に手に入る時代／関口浩之2014年07月24日[3739] 道程青年団（ザ・ディスタンス）の巻もじもじトーク［02］Webフォント基本講座（1）／関口浩之2014年08月28日[3750] 日本語Webフォントってどこがおいしいの？もじもじトーク［03］Webフォント基本講座（2）日本語Webフォントってどこがおいしいの？／関口浩之2014年09月11日[3760] 宮崎で燃え尽きるの巻もじもじトーク［04］僕の好きな書体の仲間達（1） 丸明オールド：書体設計家の片岡朗さんをお訪ねして／関口浩之2014年09月25日[3768] 我が家にタイプライターがやってきた！もじもじト
フォントオタクなデザイナーが本気で選んだ「美しいフォント」24選【フリー＆有償】
『Soldi』は、複数の企業と提携し情報を提供しており、当サイトを経由して商品への申込みがあった場合には、各企業から報酬を受け取ることがあります。ただし当サイト内のランキングや商品の評価に関して、提携の有無や支払いの有無が影響を及ぼすことはございません。また当サイトで得た収益は、サイトを訪れる皆様により役立つコンテンツを提供するために、情報の品質向上・ランキング精度の向上等に還元しております。 名古屋の事業会社でデザイナーをやっているAkitaと申します。 プロのデザイナーとして、デザインで気にしているところは沢山ありますが、中でも一番こだわっているのは「フォント」です。 「フォントの選び方でデザイナーの実力が分かる」というのは、私が最初にデザインを教わった先輩の言葉でした。 世の中にはどんどんクオリティが高く、美しいフォントが登場しています。 広告・パッケージではやはり有償フォントが目立
[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。 追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブラウザでフォントが読み込まれる仕組み font-displayプロパティとは ほとんどの場合、swapを使
![[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」](https://cdn-ak-scissors.b.st-hatena.com/image/square/a833243d7f7fa2de140f06d3243344bf1713f818/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017072510.png)
なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。入社以前はエディトリアルデザイナー（新聞・雑誌・書籍などの出版物のデザイナー）として書籍の装丁などもしていました。フロントエンドエンジニアのほりでーです。 今回は紙のデザインとWebデザインにある大きな違いのひとつ、「文字組みアキ量」というものについてお話しします。日本語組版のルールにも詳しく触れていくため、Webの経験しかない方も是非読んでみてくださいね！ 2017年2月27日追記：有識者の方からのご指摘を反映し、記事の内容を一部訂正いたしました。詳細な訂正内容については記事末尾をご覧ください。 今回の要点 日本語組版は約物（記号類）のアキが大事 Webブラウザの文字組がイマイチなのは、約物のアキ量が常に一定であることが原因 font-feature-settings: “halt” 1; で約物のアキをなくせるようになった jQury.yakumonoプラグインで行末約物半
Variable Fontについて - console.blog(self);
Goodpatch Advent Calendar 2016の7日目！ フォントもくもく会 #5でVariable Fontについて調べてみた。2016年9月にVariable Fontというものが発表された。ひとつのフォントファイルで、さまざまなウェイトで表示ができる。 ワルシャワで開催中のATypIカンファレンスにて、バリアブルフォントと呼ばれる新しいタイプのフォントが世界に紹介されました。Apple、Google、Microsoft、およびアドビが共同で開発したバリアブルフォントは、ジョン ハドソン（John Hudson）の言葉を借りれば「ひとつのファイルでありながら複数のフォントのように動作する」フォントです。ひとつのフォントファイルを使い、ファイルサイズを拡大することなくウェイト（太さ）や幅やその他の属性を無限に変更することができたらどうなるか、またデザインにおいてそれがどのよ
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
商用利用可能！高品質なオススメ日本語Webフォント10選（無料フォント多数） - ICS MEDIA
Webフォントは、サーバーにあるフォントデータを読み込むことで、端末の環境に依存せず同じフォントをウェブページに表示する技術です。 2010年頃からCSS 3の登場とともに徐々に浸透し、近年ではさまざまなウェブサイトやサービスで使われるようになりました。 しかし日本語フォントは3〜10MBもの大容量になったり、導入にコストがかかったりと、採用を見送っている方もいるのではないでしょうか。今回は実用的でオススメの日本語Webフォントを、それぞれの特徴を踏まえつつ紹介します。 Noto Sans JP / 源ノ角ゴシック 世界中の言語をサポートすることを目標にAdobeとGoogleが開発したフォントファミリー。Googleのブランド名は「Noto Sans JP」で、Adobeのブランドは「源ノ角げんのかくゴシック（英名：Source Han Sans）」といいます。 Noto Sans JP
新宿駅の「ガムテープ案内表示」を作りだした佐藤修悦さんインタビュー ！『修悦体』はこうして生まれた
» 新宿駅の「ガムテープ案内表示」を作りだした佐藤修悦さんインタビュー ！『修悦体』はこうして生まれた 特集 皆さんは、「修悦体」という書体をご存じだろうか？ 佐藤修悦さんというガードマンの方が、ガムテープを使って作り出した書体である。佐藤さんは、2005～2007年頃にかけてテレビや新聞などで話題となり、ネットでも注目を集めた人物だ。一時期JR新宿駅で、この修悦体を使ってガムテープで書かれた案内表示をしょっちゅう目にした。 あれから約10年を経て、新宿駅の様子も様変わりし、ガムテープの案内表示も見かけなくなっていたのだが……。ここ最近、再び新宿駅のアチコチで「左側通行」の文字を見かける。これはもしや！ 佐藤さんが再び活躍しているのではないか？ そう思い、私（佐藤）はその真相を確かめた。 ・約10年前の記事 私が最初に修悦体の存在を知ったのは、ネットメディア「デイリーポータルZ」の記事だっ
第11回 - こんな時にはこんな文字 ―気持ちが伝わる文字って？― | モリサワ文字文化フォーラム | 文字の手帖
2013年11月5日、株式会社モリサワは、第11回モリサワ文字文化フォーラム「こんな時にはこんな文字」―気持ちが伝わる文字って？―を開催いたしました。モリサワ本社4F大ホールにて、当初の募集人数をはるかに超える300名が参加。演出家・CMディレクター・CMプランナーなど、各方面でその才能を発揮する大宮エリー氏と、グラフィックデザイナー・アートディレクターでGRAPH代表取締役社長の北川一成氏をお迎えし、気持ちを込めたタイプフェイスというものについて論じていただきました。なお、今回のフォーラムは、ddd ギャラリーでの「大宮エリー展」との共催のトークショーとなりました。 大きな拍手の中、ご登壇いただいたお二人。期待に膨らむ会場の空気に「緊張してます…。来てくださってありがとうございます」と大宮エリー氏の第一声からフォーラムは始まり、まず二人の馴れ初め、そして「大宮エリー展」への思いを北川氏が
Google Web フォント完全ガイド！使い方や 参考にしたいサンプル例まとめました。
どんなデザインにおいても、ただしいフォント選びが成功の鍵となります。見た目だけでなく、読みやすさも考えながら、フォントの組み合わせを考えるのに悩んでしまうこともしばしばです。 フォントの組み合わせについては、これまでにもいくつか（1/２/３）の記事を紹介していますが、今回は、Google Web フォントを利用した、実用的でデザインも美しいサンプル例をまとめています。 目次 Google フォントとは？ Google フォントの実装方法 実用で使える、Google フォントの組み合わせ パート１ 実用で使える、Google フォントの組み合わせ パート2 Google Web フォントを見つけやすくする Font Library Google 謹製、日本語 Web フォント「Noto Sans Japanese」 Google Font とは? 通常、ブラウザで表示できるフォントは、ユーザ
Adobeがモリサワと提携、Adobeソフトでモリサワフォントを使えるように！
Adobeがモリサワと提携、Adobeソフトでモリサワフォントを使えるように！2015.10.06 13:307,084 フォントって意外と高いんですよね。 使いたくても使えなかった、そんな方に嬉しいニュースです。現在ロサンゼルスで開催中のAdobe MAXで、Adobeとモリサワがパートナーシップを組み、TypekitというAdobeソフトウェアに20種類のモリサワグループフォントが組み込まれることが発表されました。 TypekitとはAdobe Creative Cloud（Adobe CC）の一部で、1000種類以上の欧文フォントを使えるサービスです。こちらでモリサワフォント10種類とモリサワのグループ会社であるタイプバンクのフォント10種類の計20種類が使用可能になります。 なお、TypekitはAdobe CCのメンバーであれば追加料金なしで使うことができます。つまり、Photo
フォント名を画像から調べる、日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ
Webページ、本や雑誌、ポスターや看板などで見たフォントを使いたいけど、そのフォントが何か分からない時ってありますよね。そんな時にはフォントを画像から、フォントの特徴からそのフォントが何か検索できる無料サービスを紹介します。 日本語のフリーフォントのまとめも参考にどうぞ。 2022年用、日本語のフリーフォント 609種類のまとめ フォント名が分からない日本語フォントを検索・自動判定 Adobeやダイナフォントやタイプバンクの有償日本語フォントをはじめ、青柳衡山フォントやみかちゃんフォントなど無料日本語フォントまで、日本語フォントを検索できます。 Identifont -形状別フォント 識別名称別フォント検索 対応フォント 日本語・英語 対応フォントは、書体メーカー一覧をご覧ください。 検索方法 形状別・名称別・スタイル別・類似・絵文字・メーカー別 使い方は簡単で、名前が分からないフォントの
日本語Webフォントは「遅い・重い」って思い込んでた……こんなに速くなってたなんて…… | Web担当者Forum
Webフォントは重い・遅いと思っていないだろうか。確かにかつてのWebフォント、特に日本語Webフォントはブラウザでの表示が遅く、Webフォントに切り替わるまではシステムフォントが表示されるのも、良いユーザー体験を提供できているとはいえなかった。 しかし、Webフォントはすごく進化しているのだ。実際、このページでは日本語Webフォントを利用しているが、そんなに遅いとは思わなかったのではないだろうか。 日本語Webフォントの進化を、表示スピードの向上を中心に取材してきた。 ※このページはTypeSquareの「黎ミン」「新ゴ」「ゴシックMB101」を利用しています。 Webで書体の融通がきかないのは諦めるべきか――Webフォントをおさらい自社製品のパンフレットやカタログを作る場合には、担当者はどのようなフォントを使うかについてかなり深く考えるものだ。自社製品のイメージに合うのはどのような書体
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
第36回リクリセミナー「フォントのホント リターンズ with FONTPLUS DAY」のツイートまとめ #resem36
最近はもうHelveticaだけではない！2018年、実際に使用されている人気が高い英語フォントの組み合わせ
[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size![[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e988256232f0d626498e49d6ce0a326ccb9d200/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017013101.png)
ウェブ最大の「フォント問題」を巡ってアップル、グーグル、MS、アドビが団結
ＭＳ ゴシック、ＭＳ 明朝相当のフォントについて知る | 産業向け製品 | リコー
便利すぎる！GoogleフォントがPhotoshopで簡単にホイホイ利用できる無料の機能拡張 -Fontea
