CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
より良いタイポグラフィのための知られざるCSS
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
Gridlover
Gridlover Establish a typographic system with modular scale & vertical rhythm. Try Gridlover No signup, always free Fiddle with the font size, line height and scale factor sliders and watch the typography dance. You'll get it right away, we promise! The app loads faster than a demo video would, so just go ahead and try it. What is vertical rhythm? Read Compose to a vertical rhythm. What is modular
CSS Rhythmic Sizing で Vertical Rhythm | blog.jxck.io
Intro タイポグラフィに関連したデザイン手法の 1 つに Vertical Rhythm がある。 そして、現在 CSS でそれを簡単に実現するための CSS Rhythmic Sizing という仕様が提案されている。 Chrome にフラグ付きで実装されたこの仕様を用いて、本サイトへの適用を行ったので、解説する。 CSS Rhythmic Sizing CSS Rhythmic Sizing 筆者はタイポグラフィやデザインには疎く、 Vertical Rhythm についてもよく知らなかった。 しかし、 Chrome でこの仕様を実装している Koji Ishii さんに API を紹介してもらい、色々学ぶ機会があった。 本仕様はまだブラウザ間でも合意が取りきれていない部分があるらしく、ユースケースやフィードバックを集めている段階とのことだったので、 トライアルとして、本サイトへの
文字詰めできるCSSのfont-feature-settingsプロパティについて検証してみました | briccolog
検証結果詳細 Windows（メイリオ） 見たまんまですが何も変わりません。前述の記事にもあるように、メイリオはOpenTypeフォントではあるものの、プロポーショナルメトリクスを含まないので、font-feature-settingsプロパティの影響を受けません。 Windows（游ゴシック） font-feature-settings:palt; 約物（句読点、かぎ括弧、中黒）を含む和文フォントの文字間がきちんと詰まっています。 行頭がかぎ括弧や中黒になっている場合でも、ツラがそろっています。 全角英数字の文字間も詰まってますが、半角英数字とは異なる文字幅になっています。 font-feature-settings:pkna; 仮名や仮名関連の字形については文字間が詰まってます。 約物の前後についてはデフォルト同様に字詰めが効いていません。 Mac OS X (El Capitan)
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
文字にこだわるなら知っておきたい！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オプションのサイズ
JLREQとCSS（4）
こちらのエントリは、JAGAT XMLパブリッシング準研究会で今期の研究テーマとして、W3C文書「日本語組版処理の要件」（JLREQ）と、これに関連してVivliostyleの村上真雄さんたちが提出したW3Cメンバーサブミッション「Web技術を用いた日本語組版の現状」を取り扱っていることに伴い、会員以外の方の意見を広く求めるとともに、記録を残しておく目的で議事録をベースに補足したものを公開するものです。 間違い、補足などございましたらご意見いただければ幸いです。なお、当ブログはコメント許可制を取っているため、反映に時間がかかります。あらかじめご理解ください。 方針としましてはW3C文書「日本語組版処理の要件」（JLREQ）を先頭から読んでいき、各要素に対応するCSSが存在するのか、存在するとして実用段階なのか、InDesignなどの組版ソフトではどういった形で機能を実現しているのか（いない
ウェブ組版は行間が基準なのではという話 - note
以前見かけたこの記事がきっかけで、実務でもずっと引っかかっていたことがあるので書こうと思う。 ＞ remの基準となる値を行の高さにする | yoshihiko com-blog 行間 ≠ line-height という罠よくある疑問に、日本語で言う「いわゆる行間」と、CSSの「line-height」は違うというのがある。日本語の文章は、仮想ボディが基準の原稿用紙のようなグリッドがあって、それが「いわゆる行間」のピッチで繰り返されて本文ができている。文字の頭（仮想ボディの上）から次の文字の頭までがいわゆる行間とされている。もっと正確に書くと、これは行送りであって、正確な意味での行間は line-gap というものになる。 行送り= line-height、行間= line-gapで、一方ラテン語圏が基本のウェブ（CSS）では、この line-gap のくっつき方が純粋な日本語組版とは異なっ
なぜタイポグラフィにおいてVertical Rhythm（バーティカルリズム）は重要な手法なのか？ | POSTD
Webのタイポグラフィについて少しでも調べたことがあるなら、 Vertical Rhythm という言葉を耳にしたことがあるのではないでしょうか。タイポグラフィを用いて仕事をする場合、最も重要な手法の1つです。このことについて知って以来、私は自分のサイト全てにVertical Rhythmを使っています。 ある日、Vertical Rhythmの重要性について自分が全く理解していないことに突然気付き、愕然としました。そしてその後すぐに2つの疑問が湧き上がってきました。「なぜVertical Rhythmを使うとサイトのデザインが向上するのか？ 」「自分のデザインを良くするために、Vertical Rhythmから何を学べばいいのだろうか？ 」。 私はこの疑問を解明しようと決めました。その考察を綴ります。 記事の最初にあたって認識を共通にするため、まずはコンテキストについて説明します。 Ve
Gutenberg — A Meaningful Web Typography Starter Kit
Gutenberg A Meaningful Web Typography Starter Kit Gutenberg is a work-in-progress project by Matej Latin that brings meaning and craftsmanship to web typography. Gutenberg v1.2 Gutenberg is an open source project licensed under Creative Commons 3.0. Feel free to use, adapt or contribute. What is Gutenberg? Gutenberg is a flexible and simple-to-use web typography starter kit for web designers and d
The New Web Typography
We can trace a nervous path through the links and hearts that occupy our timelines. In search of answers, we’ve peeked under the covers of Material Design and examined hundreds of pattern libraries, since one of them might be secretly withholding the principles of good design within. But why are we obsessed with typographic rules? And if we were to make guidelines for setting text on the web, what
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
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
CSS3での日本語縦中横を考える - ちくちく日記
【問題】 日本語縦組で文字が縦中横されたとき、組まれた文字の文字幅はどうなっているのが正解か A. 1文字の幅（1em）に納める B. 何もせずそのままの幅にしておく ▲（左）A. 1文字の幅（1em）に納める （右）B. 何もせずそのままの幅にしておく 何の話をしているのかというと、これ、、CSS Writing Modes Level3で定義される日本語縦組での縦中横の処理の話である。 先日、村上さん、小形さんお二人の呼びかけで「fantasai（ファンタサイ）さんを囲む夕べ」という飲み会が開催されました。 W3C CSSWG Tokyo F2Fのため来日中のfantasai twitter.com/fantasai/statu… を囲む夕食会を来週に計画してます。興味ある方は私にDMください。— 村上真雄 MURAKAMI Shinyuさん (@MurakamiShinyu) 201
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Snippets - NxWorld
デザイナーこそ覚えておきたいCSS最新事情！ あなたの知らないfont-familyのイマ
Kerning and Ligatures on the Web - Font Technology
Redirecting…
GitHub - kotarok/jQuery.waokon: 和欧文間スペースを自動的にある程度適当にちょっといい感じにします。
