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
{{#tags}}- {{label}}
{{/tags}}