CSS での OpenType 機能の構文 | Adobe Fonts User Guide
この機能は、一連の字形を「合字」と呼ばれる 1 つの字形に置き換えます。合字は、タイポグラフィの目的で好んで使用されます。この機能を有効にすると、通常の状況ではデザイナーやベンダーの審査に使用するような合字が挿入されます。 この合字機能は、デフォルトで有効です。そのため、通常は CSS を記述しなくても動作します。ただし、Chrome ではデフォルトで有効になりません。また、Safari（Mac または iOS）では無効にできません。Chrome と Firefox の一部のバージョンでは、スペースを含む合字で問題が発生します。 .class { font-variant-ligatures: common-ligatures; -moz-font-feature-settings: "liga", "clig"; -webkit-font-feature-settings: "liga"
CSS font-display: The Future of Font Rendering on the Web — SitePoint
September 26, 2017CSS font-display: The Future of Font Rendering on the Web One of the downsides of using web fonts is that if a font is not available on a user’s device, it must be downloaded. This means that before the font becomes available the browser has to decide how to handle the display of any block of text that uses that font. And it needs to do so in a way that doesn’t significantly impa
文字にこだわるなら知っておきたい！CSSのfont-size-adjustの意味と使い方
Webフォントの普及やフラットデザインの浸透によって、タイポグラフィにこだわるサイトが増えています。でも、フォールバックを適当に済ませていませんか？ CSSのfont-size-adjustプロパティは、font-sizeを小文字の高さで指定するプロパティです。font-siza-adjustプロパティを活用することで、Webサイトの文字を読みやすく改善できます。 本記事ではfont-size-adjustプロパティの重要性と、プロジェクトで利用する方法を解説します。 font-size-adjustの重要性 Webサイトは主に文字で構成されます。ユーザーに情報を伝えるために、タイポグラフィにこだわるのは当然のことです。適切な書体で快適に読めるWebサイトを作りましょう。使いたい書体を決めたら、次は適切なサイズを選びます。 Webサイトで使うすべてのfont-familyオプションのサイズ
Improve Web Typography with CSS Font Size Adjust — SitePoint
August 23, 2017Improve Web Typography with CSS Font Size Adjust This article was peer reviewed by Panayotis Matsinopoulos. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! The font-size-adjust property in CSS allows developers to specify the font-size based on the height of lowercase letters instead of uppercase letters. This can significantly improve th
日本語向けフォントスタックの現状 - yuhei blog
日本語のウェブサイト向けのフォントスタックの現状と無難な設定についてまとめた。sans-serif、serif、system-uiのそれぞれの総称フォントファミリーに基づいて、主要な端末（Windows、Mac、iOS、Android）のフォントの搭載状況を整理する。 sans-serif まず、Windowsはメイリオ一択だと考えたほうが良い。游ゴシックはWindows 8.1ではかなり細く、Windows 10でも一般的なフォントと比べると少し細いのが問題だ。ハック的に回避する方法はあるものの、積極的に採用したくはない。メイリオはWindowsユーザーにとって馴染みがあり、最も問題になりにくいフォントだと考えられるため、あえて別の選択をする必要性は低いと思う。 Yu Gothic UIという選択肢もあるが、本文向きでは無さそうだ。 Macでは問題なく游ゴシックが利用できるので、ヒラギノ
読みやすいフォントの CSS 設定例 | murashun.jp
［ ＋ expand ］美しいフォントとはフォントの種類ゴシック体 vs 明朝体Web フォント総称ファミリーfont-family の設定例フォントのサイズフォントの色フォントの文字間隔フォントの行間まとめ関連記事美しいフォントとは 昔から Windows のユーザでしたが、初めて Mac のフォントを見たときの衝撃は今でも忘れられません。Windows と比べて Mac のフォントの美しさは際立っていました。その美しいフォントは "ヒラギノ" と呼ばれ、Mac の中心的なフォントのひとつで、これ以上に美しい日本語のフォントは見たことがありません。 Windows と Mac ではフォントのレンダリング方法が異なるため、今日に至っても Windows のフォントが美しくない問題は解決されていません。しかし、Windows は Vista 以降から "メイリオ" と呼ばれるフォントが収録さ
font-familyに指定する2017年春の決定版メモ - Qiita
Webサイトで表示するフォントは閲覧するユーザーの環境に依存しています。 グラフィックデザインメインの方でWebサイトのデザインを行う場合などの Webサイト制作をしたことのない人だと知らない方が多いので前置き書いてます。 例えば、『ヒラギノ』を指定していても、ユーザーの環境になければ別のフォントが表示されてしまいます。 同じく、明朝体はもっと悲惨でWindowsではキレイに表示できるのがわりと最近です。 （なので基本的に日本語のWebサイトってゴシック体が多いですよね。MS明朝は超汚いので過去に全てのテキストを明朝体でデザインされた時には投げたくなりました。） ゴシック体の指定はこれ！ body { font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese
Use rems for global sizing, use ems for local sizing
Use rems for global sizing, use ems for local sizing The following is an unedited extract from my forthcoming book. I chose this chapter because I felt it would be useful standing on its own. I should point out that this is a very technically-focussed extract, while the other chapters I’ve written contain a much higher proportion of typographic theory. The amazing em (and friends) The web has alwa
The Typekit Blog | Kerning on the Web
Kerning can refer to one of two things: spacing instructions that type designers put into font files to mitigate awkward character combinations, or spacing adjustments that graphic designers make as they typeset text. In today’s post, we’re talking about the former, though we’ve covered the use of Kern.js and Lettering.js here before for readers interested in learning even more. Imagine each chara
リガチャなアイコンフォントをお手軽に作成する - アインシュタインの電話番号
リガチャなアイコンフォントを自作しようとするとけっこう大変そうで、そのためのアプリを揃えて操れるようになったり、リガチャの仕様を把握したり、専用のCSSを書いたりする必要がある。そういった正攻法のやり方としては、このページがとてもわかりやすかった。また、実際にそのページの方法によって制作されたLigature Symbolsも魅力的。 ところが自分が欲しいのは、Twitterで使っているアバターアイコンと、ブログのボタン等で使う5〜6個のアイコンを含んだ最小のセットで良くて、そのために前述のような本気を出して作るのは、なかなか重い腰があがらずにいたところ、アイコンフォントを手軽に生成できるサービスIcoMoonの中に、そのリガチャを作成する機能もあることに気がついた。^1 それを使ってみたら、予想以上に簡単にリガチャなアイコンフォントをサクッと作れた。 上のはそのIcoMoonを使って作っ
Accessing OpenType features for web design - Font Technology
Fonts are great, but having too many fonts can use up precious resources on your device. Font management allows you to install, activate, and deactivate the fonts you need, while keeping your collection organized. Learn how to manage your growing font collection. OpenType features have long been considered indispensable in print design. In the case of many contemporary typefaces, display variants
Web Design, Interface Design, User Experience | Simple Focus
What does FlowType.JS do? Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size and subsequently the line-height based on a specific element's width. This allows for a perfect character count per line at any screen width. Addi
iconvau.lt - Užregistruotas domenas - Interneto vizija
Domenas iconvau.lt sėkmingai užregistruotas Interneto vizijos kliento vardu ir šiuo metu yra pilnai aktyvuotas bei paruoštas naudojimui. Norite nukreipti iconvau.lt? Prisijunkite prie savo paskyros klientų sistemoje; ties skyriumi "Paslaugos" pasirinkite nuorodą Plačiau...; pasirinkite domeno pavadinimą ir paspauskite mygtuką Nukreipti. Po pakeitimų domenas pradės veikti per 1 val. Ieškote kur pat
Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ
IE9でページが表示されないという致命的なバグ ごく一般的な条件で発生して、簡単に対応できるので、Webデザイナーやコーダーの方に伝えてあげてください。 私はとある環境のテスト中に発生したので、設定ミスだと思い数時間無駄にしました…。 バグの症状 具体的には 1.「Type1のHelvetica」をインストールしているPC。 2.「css」で「body」にたいして「font-family」で「Helvetica」を先頭に指定。 こんなありふれた環境で画面が真っ白（灰色？）になります。 以下の画像のように「example.com の表示中に問題が発生したため、Internet Explorer は互換表示を使用して Web ページを更新しました。」というメッセージと共に真っ白な画面が表示されます。 以下のWebサイトでバグを体験できます。IE9でアクセスしてみてください。 「バグ発生条件を再
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Snippets - NxWorld
デザイナーこそ覚えておきたいCSS最新事情！ あなたの知らないfont-familyのイマ
opentype.js – JavaScript parser/writer for OpenType and TrueType fonts.
The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art)
ウェブ最大の「フォント問題」を巡ってアップル、グーグル、MS、アドビが団結
Dripicons V2 (Free Iconset)
