2015年のフォント総括／鷹野 雅弘（スイッチ）スライド内で参照しているリンク先一覧 http://matome.naver.jp/odai/2145969573620076801 2015年12月26日（土）、ソラシティホールで開催したShift9：Webデザイン行く年来る年（CSS Nite LP43）のフォントセッションから http://cssnite.jp/archives/post_2859.html Read less
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (
![[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/9632aee4416db718e0899706ace859f7fdcdf363/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072201.png)
フォントサイズ「px→％」表記一覧・早見表 - 人生は暇つぶし
2016 - 01 - 11 フォントサイズ「px→％」表記一覧・早見表 まとめ スポンサーリンク Tweet Webサイト制作において、フォントサイズは非常に重要ですよね。僕の会社では、フォントサイズを指定するとき、 PCサイトでは「％」 、 SPサイトでは「px」 で指定しています。 その際、％表示を計算するのが面倒くさいので、この機会にフォントサイズ「px→％」表記一覧・早見表を作成します。 目次 目次 フォントサイズのパーセント表記一覧・早見表の計算式 主要ブラウザのデフォルトフォントサイズは16px フォントサイズのパーセント表記一覧・早見表 フォントサイズ１６％ まとめ フォントサイズのパーセント表記一覧・早見表の計算式 表示したいサイズ / 基本サイズ * 100 小数点以下は切り上げて計算します。表示したいサイズは10~30pxとします。 主要ブラウザのデフォルトフォント
outtakes
スライドに使用するフォントについて（「MSゴシック」や「MS Pゴシック」を使わないようにしましょう）それぞれ好みがあると思いますが、「MS ゴシック」や「MS Pゴシック」を使わず、次のいずれかのフォントを使われることをオススメします。 メイリオ游ゴシック（Yu Gothic）Noto Sans Japanese CJK JP源真ゴシックPプレゼン資料に限っていえば、「源真ゴシックP」を大プッシュします。 理由:「MS ゴシック」（や「MS Pゴシック」）にはウエイトがないためメリハリ（強調）を付けるには、次のような方法があります。 太さ（ウエイト）を変えるフォントサイズを変える下線を付ける文字色を変える「MS ゴシック」にはウエイトがないため、PowerPointの機能で太字にすることができますが、アプリケーションの機能で太らせるのは、あまり美しくありません。 また、「MS ゴシック」
The Typekit Blog | 日本のお客様へ。日本および東アジアのWebフォントへの対応と新しいフォント選択ツールに関するお知らせ。
日本のお客様へ。日本および東アジアのWebフォントへの対応と新しいフォント選択ツールに関するお知らせ。 4つのチームが、3つの大陸、5つの時間帯に分かれ、その長年の作業を終え、TypekitのWebフォントサービスが拡張され、日本語、中国語、および韓国語用のフォントにも対応しました。 私どもの日本（および東アジア向け）書体ライブラリーを、デスクトップ用フォントとして同期可能にするだけでなく、お客様のWebサイトでもご利用可能となり、小塚明朝と小塚ゴシックのファミリーに加えて、従来のアドビの書体ライブラリーに含まれていた平成書体、かづらき、および、りょうの書体ファミリーがTypekitのコレクションに加わりました。 ダイナミックなサブセット化 日本語フォントを含む東アジア用フォントのサイズは巨大です。昨年、源ノ角ゴシック（Source Han Sans）をリリースしましたが、日本語用の文字が
ウェブ・フォントの読み込み - Weblog - Hail2u.net
ウェブ・フォントも完全に行き渡り、今はどう効率的に配信するかについて多くの時間を割くようになった。Google Fontsの低め安定路線を見限り、TypeKitやFonts.comへ鞍替えする人々も増えた。それと同時に自前でホスティングする人々も徐々にその数を増やしており、どれが最適解なのか一応の結論が出るにはもう少しかかるだろう。まず、ウェブ・フォントの読み込みにおいてどのようなアプローチがあり、どのようなメリット、そしてデメリットがあるのだろうか。 TypeKit等に頼るにしろ、自前でホスティングするにしろ、もちろん最終的にはウェブ・フォントをブラウザーに送りつける必要がある。読み込みとはまさにその部分の話だ。話がややこしくなるので、多様な実装を意識した安全な書き方などについては触れない。 普通に@font-face定義を利用 @font-face定義をただ普通に書く場合のメリットは、
Keynoteでデフォルトテンプレートを使うときには、マスターで日本語フォントを指定し直すこと｜DTP Transit
ちょっとDTPという枠からははずれてしまうのですが、組版、フォント、Mac OS X絡みということもありますし、参照いただけるようにメモしておきます。 テーマ「グラデーション」を使うと欧文はGill Sansになる Keynoteで、人気のテーマのひとつ「グラデーション」を使うと、 次のように、数字の「1」と小文字の「エル」の見分けがつかなくなってしまいます。プレゼンのような場面では、これは致命的です。 マスタースライドを選択し、スライド上のテキスト（ボックス）を選択すると、 ［フォント］パネルでは「Gill Sans」が選択されています。つまり、欧文部分はGill Sans、それ以外（和文）はヒラギノ角ゴW3で表示されます。 ［フォント］パネルで、ヒラギノ角ゴW3を選択しておきましょう（ほかのマスタースライドもチェック）。 テーマ「ストーリーボード」を使うと欧文はAmerican Typ
モリサワの「新ゴ」フォントがWebでCMSと連携、クラウドフォントで拡がるWebデザインの可能性とは | イベント・セミナー
フォントを活用したデザインがテーマの本セミナーには、紙媒体をメインとするグラフィックデザイナーやWebデザイナーが参加した。セミナーではまず、ロフトワークの濱田真一氏が「クラウドフォントで手に入れる新たな表現力」という題目で講演。 Webデザイナー歴8年、現在はディレクターとして活躍する濱田氏が、「クラウドフォントとは何か」といった基本から、実際の顧客企業への提案事例まで説明した。 まず、クラウドフォント（Webフォント）とは、インターネットを介してフォントを配信し、ブラウザのWebページ表示に使う仕組みだ。ユーザーのデバイス（PCやスマートフォン）にフォントが搭載されていなくても、制作者側が指定したフォントを表示できるのが特徴。 一般的に、Webデザインで特殊なフォントを利用する場合は、テキストを画像化するものだが、クラウドフォントを使うと「たとえば、見出しには立体的な文字を使い、リード
The Fonts Apple Uses - Apple Gazette
Ever wonder what font that is that Apple uses for ads and marketing? What about the font on your computer’s keys? The UI on your Mac? Or your iPhone? Here’s a list of every font Apple uses. Update log: 12.17.14 – Updated for new fonts in OS X and Apple Watch 06.14.12 – New iOS 7 font added. 07.23.12 – Helvetica “Neue” typo corrected. 07.23.12 – As readers pointed out, Lucida Grande is not the font
MUROTA.SO » font-family ヒラギノ角ゴ、MSゴシック、メイリオの優先順位
以前、勤め先でHP制作を外注したところ、font-familyでこんなことがあった。 ホームページで使いたいフォントはちょっと固いイメージの角ゴだった。自分の環境はmacでヒラギノ、開発会社はwindows環境でメイリオと、当初は「どっちでもチェックできていいね」なんて言っていた。 正式に公開したのち、どちらもチェックして互いのブラウザ環境のいずれも正常に期待しているゴシックが表示されていたので、とても満足だった。 しかし、自分の環境でmicrosoft officeの新バージョンを導入したところ、問題が起こった。なんと、それまでヒラギノだった表示が突然メイリオになっていた。 どうもofficeにメイリオが入っていて、当初はwindowsだけで表示されるはずのメイリオがmacでも優先されてしまっていた。 font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3',
もうfont-familyで悩まないための2行 « CSS « Snippet-Editor.com
body, textarea { font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif; } input, select { font-family: Arial, "ＭＳ Ｐゴシック", sans-serif; } この2行のスタイルシートで、Windowsではメイリオフォント（なければMS Pゴシック）、Macではヒラギノ角ゴシック（Firefoxのみ例外時あり）で表示することができます。 実際に適応すると、 Windows 7、またはVistaではメイリオで表示され Windows XPではMS Pゴシックに Windows XPで、且つメイリオを自分でインストールした人はメイリオに Mac OS Xではヒラギノ角ゴに（Firefox以外のMac用ブラウザでは日本語で書かれたフォント指定が無効になるため） と、なります。なお例外として、 MacにMS
人気サイトのfont-family - r7kamura's Hakolog
国内でトラフィックランキング1-20位周辺のサイトの、body要素に対するfont-family指定方法を調べた。 /* yahoo.co.jp */ body { font-family: "MS PGothic", "Osaka", Arial, sans-serif } /* google.co.jp */ /* google.com */ /* youtube.com */ body { font-family: arial, sans-serif } /* fc2.com */ body { font-family: Verdana, Helvetica, "ＭＳ Ｐゴシック", "MS P Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif, /* Meiryo */; } /* facebook.c
メイリオを指定したIE7・8でopacity不具合 | 技術部 | TAC部Log
フォントにメイリオを指定したページを、jQueryでフェードインしてみたところ、IE7・8での挙動がなんだかおかしい。。。 フォントにメイリオを指定したページを、jQueryでフェードインしてみたところ、 IE7・8での挙動がなんだかおかしい。。。 メイリオのアンチエイリアスが効かなくなり、テキストがジャギジャギになっています。 調べてみると、やはりIE独自仕様の仕業。 CSSでオブジェクトの半透明化を実現する方法 IEでopacityを変更した場合に、ClearTypeが無効になる 上記のサイトを参考に、フェードイン処理を設定したのが以下。 $(document).ready(function(){ if(jQuery.browser.msie) { $("#id_name").fadeIn(450,function() {this.style.removeAttribute('fil
朝日新聞デジタル：キチジョウ字？ 看板から吉祥寺フォント、ネットで配布 - 社会
「ハ」は、ハモニカ横町にある飲食店「ハモニカキッチン」から吉祥寺の街から切り取った「キチジョウジ」吉祥寺の街で集めたフォント一覧 東京都武蔵野市在住の建築家２人が、吉祥寺にある看板から文字を集めてフォント集を作った。街の風景に溶け込んでいる文字から吉祥寺の個性を感じてほしい、との思いからだ。今春から無料ダウンロードを始めた。 建築設計やインテリアデザインを手がける個人事務所「ミリメーター」の笠置秀紀さん（３６）と宮口明子さん（３７）。２人が看板に興味を持ったのは４年ほど前だった。 街によって趣が異なる看板。文字を集めたら、街の「らしさ」がみえてくるのでは、と考えた。地元の吉祥寺でフィールドワークを重ね、約２５０枚の看板を撮影。文字を切り取り、カタカナ５０音とアルファベットの小文字・大文字を「採取」した。 続きを読むこの記事の続きをお読みいただくには、購読手続きが必要です。購読申し込み
小さい文字が綺麗になるかもしれない方法と、コマンド「PI_CleanText」 (PIXEL LAB)
小さい文字が綺麗になるかもしれない方法と、コマンド「PI_CleanText」 ( 2012年03月22日 ) Fireworksの文字のアンチエイリアスは、 「鮮明」「強く」「滑らかに」「カスタム」の4種類がありますが、 正直、どれもあまり綺麗ではありません。 あるフォントでは、「鮮明」が綺麗だけど、別のフォントでは、「滑らかに」が きれいだったり、フォントの種類だけでなく、文字の大きさによっても、 適切なアンチエイリアスの種類は変わってきます。 このエントリーでは、アンチエイリアスのかかった小さいテキストが 少し綺麗になるかもしれない方法を紹介します。 同時に、その方法をコマンド化したので、それの解説と配布を行います。
フォントブログ
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
稲川淳二が書き溜めた直筆の怪談ノート。特に目を引くのが、まるでPCからプリントアウトされたかのような均一性の高い文字。もはや稲川フォントと言っても過言ではない。インダストリアルデザイナーである氏の一面が垣間見える。
メイリオは想像以上の難敵
cagylogic
