Why I’m excited about text-box-trim as a designer
Front-end education for the real world. Since 2018. I’ve been excited by the potential of text-box-trim, text-edge and text-box for a while. They’re in draft status at the moment, but when more browser support is available, this capability will open up some exciting possibilities for improving typesetting in the browser, as well as giving us more control of alignment and internal spacing in our co
OpenType
OpenTypeフォントは、従来のCFF (Compact Font Format) フォント形式と、TrueTypeフォント形式を、TrueTypeの`sfnt'テーブル格納形式に沿った形で融合し、高度な組版に使用するフォントデータの格納方式を両者で共通化させたフォント形式です。 CFFを由来とするフォントは拡張子が ".otf" に、TrueTypeを由来とするフォントは拡張子が ".ttf" となり、これらを複数束ねたフォントは、".ttc" と呼ばれる拡張子になります。 `sfnt' 形式は、ヘッダ (head) テーブル等、４文字のテーブル名を持つ複数のテーブルから構成されます。 OpenTypeのテーブル OpenType仕様には、32種類のテーブルが標準化されています。 ※印があるのは、必須のテーブルです。 種類 OpenType Font AAT Font （参考） 共用
FontBBox Viewer
macOS用デスクトップアプリ フォントのFontBBoxと各種メトリックをグラフィカルに表示する 用途 フォントの目に見えない設定を視覚化して表示します。フォントの細かな設定や特徴を視覚的に確認し、品質管理や問題解決に役立てることができます。 OpenTypeフォントフォーマットのみ対応しています。その他のフォントフォーマット（Type1等）には対応していません。バリアブルフォントは現時点で非対応です。 機能 グリフ検索： 検索フィールドで「GID」「Name」「CID」「コードポイント」「文字」のいずれかを設定してからグリフを検索します。複数検索はスペースまたはカンマで区切ります（「文字」は区切り不要）。「GID」「CID」「コードポイント」はハイフンで範囲指定も可能。 ボディ枠表示： 「Rectangle」をONにすると、advanceHeight（vmtx）があるフォントは矩形のボ
フォントの作り方（13）〜メトリクスの話〜 | フォント × デザイン｜基本の作り方
こんにちは。ANGEL VIBESです。このあたりで、フォント作成ソフトを使う際の「メトリクス」のことについて解説しておこうかと思います。実は、従来からあるレタリングなどにおいての尺度についての呼び名と、フォントデザインソフトにおいての尺度についての呼び名は、同じ名前を用いられながら厳密には意味が異なる場合があります。フォントやタイポグラフィの知識が少しでもある方は、ソフトを使ってフォントをデザインした時に混乱してしまったのではないでしょうか。 もしそんなことになってしまっていたら、基礎知識として読み返してみてください。 メトリクスとは？ 辞書にも載っていますが、「メトリクス」とは要するに尺度や測定情報のことです。フォントをデザインするには、アセンダーライン、ベースライン、ディセンダーラインなど、一定のフォーマットに落とし込むための設計用のラインが必要です。そして、そのラインとラインの間に
Improved font fallbacks | Blog | Chrome for Developers
Summary This article is a deep dive into font fallbacks and the size-adjust, ascent-override, descent-override, and line-gap-override APIs. These APIs make it possible to use local fonts to create fallback font faces that closely or exactly match the dimensions of a web font. This reduces or eliminates layout shifts caused by font swapping. If you’d prefer to skip reading this article, these are s
テキストフレームにおける欧文ベースライン揃え - なんでやねんDTP・新館
先日の記事に続いて、今回は同じく欧文ベースライン揃えであるが、テキストフレームの場合に注意すべき点を書いておく。 「文字揃え」は「欧文ベースライン」としているが、「行送りの基準位置」に「欧文ベースライン」ではなく「仮想ボディの上」など仮想ボディベースのモノを採用した場合…… ※画像バックのグリッドは揃え位置の目安として置いてあります。 「行送りの基準位置」は「仮想ボディの上」 使用書体は前回の記事同様、FOT-筑紫明朝 Pr5-R/FOT-クレー Pro-M/FOT-グレコ Std-M 仮想ボディとの関係を見る限り特に問題はないが、欧文ベースライン位置は当然異なっている 上の例は各行毎に1段落としてあるが、すべてを同一段落としても同じ。 仮想ボディとの関係を見る限り特に問題はないが、欧文ベースライン位置は異なっている 行の先頭文字を同書体とした場合は…… 行頭文字の書体の欧文ベースライン位
Getting to the bottom of line height in Figma | Figma Blog
We’re altering the way we handle text in Figma. Join me on the journey we took to get there — through type history and into the modern times. At Figma, we try to strike a balance between historic design principles, forged through the centuries, and new practices. Today marks another step on that journey: we’re altering the way we handle text. Figma will now distribute extra line height above and b
How Figma uses font metrics – Figma
A description of how Figma calculates font metrics, for font foundries and type designers.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web design: vertical metrics puzzle
Webfont vertical metrics strategies
Font Metrics v1.10, Karsten Lücke
Google Fonts
On vertical metrics (in the context of a biscript, Tamil and Latin font)
Roman Shamin on Twitter: "The vertical metrics of the Martian Grotesk and Mono typeface family are one reason they work great in UIs. In this thread, I explain how “equal” metrics—metrics that lead to equal space above and below the text—can make digital
Bold Monday on Twitter: "@PixelAmbacht Here is a little analysis we made two years ago of what vertical metrics info is used by some browser… https://t.co/5YfAS93b7h"
custom fonts with different vertical metrics between OS's
How to fix inconsistent vertical metrics in web fonts – Max Kohler
GitHub - source-foundry/font-line: OpenType vertical metrics reporting and font line spacing adjustment tool
Welcome to Scanahand 8
Font Development Best Practices: Line Metrics