2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
おすすめフォント
ポスターやスライド、その他の資料を作るときのおすすめのフォントをまとめておきます。書体の選び方や使い方の項目で解説したように、重要なのは、可読性、視認性、判読性を意識しながらの「TPOに合わせたフォント選び」です。すでに説明した通り、｢短文か長文か？｣、｢読みにくいフォントではないか？｣、｢太字・斜体に対応しているか？｣ユニバーサルデザインか（＝判読性が高いか）？ということに着目しておすすめフォントを紹介します。これまで触れてきませんでしたが、フォントを選ぶときには汎用性・互換性にも注意しなければなりません。 最後にPowerPointにおけるフォント関連の便利なテクニックをいくつか紹介しますので、ぜひ参考にしてみてください。 ゴシック体（和文書体） Winならメイリオ/游ゴシック、Macならヒラギノ角ゴシックも プレゼン用のスライドや学会発表のポスターなどでは、視認性の高いゴシック体を使
Android における最適なフォント環境を考えてみる – ミルログ
Font-family を考える時にいつも Android のフォント環境はスルーされてしまうので、Android のフォント環境のみにフォーカスを当てた記事があってもいいと思って書きました。 前提知識 英字フォントは Roboto Android 4.1 (2012年リリース) から英字フォントは、Google の開発したフォントでおなじみ、Roboto フォントが使われています。 Google Map や YouTube と Google 系のサービスで幅広く使われているフォントなので、iPhone 使いの方でも日常的に見ているフォントであるかと思います。 ちなみに iOS 9 以降で採用されている、San Francisco フォントと比較するとこんな感じ。 上から San Francisco, Roboto San Francisco よりも細長くスラッとした印象になっていることが
デザイナーはなぜMS Pゴシックを使わないのか? - エディトリアルデザイナーに聞いてみた
デザインを語る上で重要な要素のひとつ、「フォント」。デザインを実際に手がける人だけでなく、それを見る多くの人にとってなじみ深いフォントとして、Windowsのプリインストールフォント「MS Pゴシック」は代表的なもののひとつかもしれません。 「MS Pゴシック」 「MS Pゴシック」は過去にマイナビニュースで実施した美大生の「お気に入りフォント」アンケートにも名前が挙がった実力派(?)ですが、実際に日々グラフィック/エディトリアルデザインを手がけているデザイナーの目には、この定番フォントはどう映るのでしょうか。 今回は、デザイン会社にてエディトリアルデザイン/Webのレイアウトデザインを手がけているSさんに、「MS Pゴシック」についての率直な思いを伺いました。 ――「MS Pゴシック」、デザイン業務で使うことはありますか? 私は主にエディトリアル(雑誌や書籍など)、グラフィック、Web領
Noto Sans (源の角ゴシック) をWebフォントで使えるように軽量化する方法 - あなたのスイッチを押すブログ
ウェブフォントにハマりすぎて、かなり泥沼化していたのですが…。この度ようやく1つのゴールに辿り着くことができました。 その結果が「Noto Sans CJK JP」の採用です。 しかしこのフォント、Webフォントとして使用するには些かサイズが大きすぎるのが問題。そのまま使ってはページの読込速度に大きく影響してしまいます。 そこで必要なのが、フォントの軽量化。具体的にはこれを「サブセット化」と言います。 Noto Sans とは？ 最初にちょっと「Noto Sans」というフォントについてご紹介しましょうか。 これは、 Google が、Adobe と共同開発した無料かつオープンソースのフォントファミリーNoto Sans CJK をリリースしました。 via: Google、オープンソースの日中韓フォントNoto Sans CJK を無料配信。Adobe と共同開発 - Engadget
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
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
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
iOS 6: Font list
Academy Engraved LET Plain:1.0 American Typewriter American Typewriter Bold American Typewriter Condensed American Typewriter Condensed Bold American Typewriter Condensed Light American Typewriter Light Apple Color Emoji Apple SD Gothic Neo Bold Apple SD Gothic Neo Medium AppleGothic Regular Arial Arial Bold Arial Bold Italic Arial Hebrew Arial Hebrew Bold Arial Italic Arial Rounded MT Bold Avenir
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
日本語ウェブフォントまとめ+GoogleWebFont
日本語ウェブフォントとは 日本語ウェブフォントも本当にゆっくりですが、広がりを見せてきています。私のホームページで使っているのも日本語ウェブフォントですし、このブログも実は日本語ウェブフォントを使用しています。ちょっと可愛い文字でしょ。SEOにも有利ですし今後広がっていくと思います。 FONTPLUSのFONT TIPS https://fontplustips.comではわかりやすく日本語ウェブフォントの説明がされているので、まずは基礎知識を得てみるのも良いと思います。Webディレクターとしておさえておきたい！日本語Webフォント最新事情でもわかりやすい説明があります。 私の公開しているフロップデザインフォントと、うつくし明朝体もウェブフォントを見据えてデザインされています。このブログはフロップデザインフォントをカスタマイズしたフォントです。フロップデザインフォントはフラットデザインのイ
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
10 fonts that are safe to use with CSS
With the rise of @font-face and the new possibilities it opens, web designers like to use fancy fonts to make their website more unique. However, this does come with a price, an more important loading time for web pages. If saving bandwidth and having fast loading pages is important for you, don’t worry too much, it doesn’t mean you have to give up on typography. There are a few fonts that you can
これだけは抑えておきたい！定番英字フォント18選｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、スイカは白いところまで食べる小林です。 今日は個人的主観で、よく使う、あるいは使いたいと思っている定番欧文フォントをご紹介したいと思います！ フォント選びで迷うと、ついつい、無難なフォントを使いがちですが、そのフォントの性質やディテール、成り立ちを知ることで、よりそのデザインにマッチしたフォントが選べるようになると思います！ セリフ体 Baskerville （バスカヴィル） 伝統、高貴さを感じさせる、1750年代にイギリスのジョン・バスカヴィル（John Baskerville）によって作られた、Transitional（※）フォントの代表格です。 バスカヴィルのフォントは当時のイギリスではなかなか受け入れられず、アメリカやフランスで多く使われたようです。 しかし今では堂々とした大文字などからイギリスを代表する書体デザインの一つと言われています。 Baskerville Ol
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypekitはAdobe Fontsになりました #AdobeMAX #AdobeFonts – Adobe Creative Station
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
ＭＳ ゴシック、ＭＳ 明朝相当のフォントについて知る | 産業向け製品 | リコー
FontReach - Best Free Fonts
Loading...