HN 日本語サマリー

← 一覧へ戻る
Web開発

Geist Serifの紹介

Geist Serif (vercel.com)

46 pointsby Zm4420 コメント

要約

Vercelは、開発者向けにデザインされたGeistフォントファミリーに、新しいセリフ体フォント「Geist Serif」を追加しました。Geist Serifは、Geist Sansと同じ基盤の上に構築された高コントラストのディスプレイセリフ体で、ファッションやエディトリアルデザイン、雑誌の見出しにインスパイアされています。このフォントは、現代のデバイスの高密度スクリーンや物理的な媒体で力強くメッセージを伝えるために設計されており、変数軸によるドット形状のバリエーションも特徴です。

全文翻訳

Geist Serifの紹介

Geistは、開発者が日々の作業を行うエディタやターミナル向けに作られた、モノスペースフォントとして始まりました。そこから、製品インターフェース向けのGeist Sans、そして初期のコンピュータ画面のグリッドにインスパイアされたGeist Pixelへと発展しました。

本日、ファミリーに新しいメンバーが加わりました:Geist Serif。

[画像: Geist Serif posters][画像: Geist Serif posters]

Geist Serif posters

Geist Serifは、Geist Sans、Geist Mono、Geist Pixelと同じ基盤の上に構築された、高コントラストのディスプレイセリフ体です。細く、鋸歯状のセリフとシャープなヘアラインを持ち、物理的な世界と現代デバイスの高密度スクリーン両方でメッセージを力強く伝えるために描かれました。

同じシステム、新しい声

Vercelでは、製品にはGeist Sansを使用しています。しかし、見出しには、ドロップダウンメニューから選んだ見知らぬものではなく、同じシステムに属する第二の声が欲しかったのです。

多くのテクノロジーブランドは、個性を回復するためにクリーンなサンセリフ体から離れ、ヴィンテージコンピュータ広告から借用するものが増えています。Geist Serifは異なる道を進みます。ファッション、エディトリアルデザイン、雑誌の見出しへと向かいます。これは、Rolling StoneやHarper's Bazaarのアーティストたちへのオマージュです。

当初から、各Geistファミリーはタイポグラフィの歴史の一章から読み取っていました。スイスデザイン運動、初期のターミナルとDOSコンピューティング、そして現在はエディトリアルプリントです。

ディスプレイファースト

Geist Serifは、Evil Rabbitによるスケッチのセットとして始まり、その後Andrés Brigantiが拡張しました。最初の文字はすでに、Victor SerifやStanleyのような書体精神を持つ、表現力豊かなセリフ体を示していました。

[画像: Original Geist Serif drawings][画像: Original Geist Serif drawings]

Original Geist Serif drawings

Mark Davisが描画を引き継いだとき、私たちは最初のリリースを、ファミリー全体の作業が続く間、見出し、ポスター、その他の大きなサイズ向けのディスプレイフェイスとしました。プリントは常に細かいヘアラインやシャープなセリフを保持するのに苦労してきましたが、今日のディスプレイは高いレベルの詳細を処理できます。私たちは新しいフェイスに最新のスクリーンを最大限に活用してほしかったので、すべての縦画を50%細くし、サイドベアリングをタイトにしてコントラストを最大限に引き出しました。

各セリフは片側にウェッジ、もう片側にカーブを持っているため、プロポーションはクラシカルでプリントで美しく見えますが、構造は新しく、デジタルデバイスに最適化されています。

私たちは、今日のためにのみ作られたものを創造しました。10年前のスクリーンにはブロックすぎず、物理的なインクのための機械的な妥協もありません。完璧なポイントのセリフです。

[画像]Mark Davis WORDMARKの創設者兼フォントデザイナー

初期のプロトタイプから今日まで

Geist Serifの最初のプロトタイプは2026年4月1日に共有されました。以下は、そのプロトタイプで表示された同じ単語「Geist」と、本日出荷されるディスプレイ描画との比較です。

[画像: Original prototype shown as dotted lines][画像: Original prototype shown as dotted lines]

Original prototype shown as dotted lines

Geistに歯が生えた

目標は、元の意図を尊重し、文字が互いに重なり合ってもセリフをサンセリフに密接に関連付けることでした。Geist SerifのステムはGeist Sansと一致し、両者は幅と姿勢を共有しています。

鋸歯状のセリフと高コントラストは、Geistにエディトリアルなボイスを与えます。各文字が描かれるにつれて、一つのフレーズが繰り返し出てきました。「Geistに歯が生えた」。

4つのファミリー、1つのxハイト

Geist SerifはGeist Sansと同じキャップハイトとxハイトを使用しているため、1行も動かさずに任意のGeistレイアウトにドロップできます。Sans、Mono、Pixel、Serifを同じ文でミックスしても、すべての単語は同じサイズに見えます。

メトリックGeist SansGeist Serif
UPM10001000
キャップハイト710710
xハイト530530
アセンダー710750
ディセンダー-150-200

4つのバリアント、1つの軸

Geist Pixelと同様に、Geist Serifは、iとjのドットや句読点を含む、フォント内のすべてのドットの形状を切り替える変数軸を備えています。この軸はElement Shape(ELSH)と呼ばれ、4つのバリアントを提供します:丸いドットを持つRegular(デフォルト)、Square、Triangle(Vercelロゴへの敬意)、Heartです。

各バリアントは、独自の静的ファイルとしても出荷されます。変数フォントを使用する場合は、font-variation-settingsでバリアントを選択します。

手作業で作成

7月にはフォントに227グリフがありました。現在は894グリフあり、352のラテン文字言語をカバーしており、スペーシングを正しくするために52,000以上のカーニングペアを処理しました。一部のディテールは非常に小さいです。例えば、gの目は正確に7°傾いています。

仕様概要

Geist Serifは以下を搭載しています:

  • 1つのウェイト(Regular)

  • 4つのバリアント(Regular、Square、Triangle、Heart)

  • 894グリフ

  • 5つのスタイルセット(ss01~ss05)

  • 352のサポート言語

始め方

Geist Serifは、ファミリーの他のフォントと同じパッケージで出荷されます:

npm i geist

エクスポートとCSS変数:

  • GeistSerif(変数、全形状):--font-geist-serif

  • GeistSerifRegular:--font-geist-serif-regular

  • GeistSerifSquare:--font-geist-serif-square

  • GeistSerifTriangle:--font-geist-serif-triangle

  • GeistSerifHeart:--font-geist-serif-heart

それぞれに独自のインポートパスがあるため、使用するフォントファイルのみを出荷します。例えば、layout.tsxでGeistSerifRegularを使用する場合:

import { GeistSerifRegular } from 'geist/font/serif/regular';

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={GeistSerifRegular.variable}>
      <body>{children}</body>
    </html>
  );
}

フォントファイルをダウンロードし、すべてのスタイルセットをテストし、各グリフをvercel.com/fontで確認することもできます。

今後の展望

Regularは最初のリリーススタイルであり、ファミリーの残りはすでに進行中です。このリリースは始まりに過ぎず、開発中に将来のバージョンをテストしています。

ThinからBlackまでのウェイト

変数フォントはThin(100)からBlack(900)まで範囲があります。今週のプルーフでは、Blackのgが私たちが最も注目している文字です。

テキストフェイスに向けて

テキストバージョンを探求するために、ストローク、特にそれらが交差する場所を測定し、ディスプレイのアウトラインを太くするファウンドリツールを構築しました。アウトラインを直接編集するため、実際の単語を設定し、どのストロークに重みが必要かを確認できます。

ルールごとに構築されたイタリック体

Pythonで完全に生成されたイタリック体も開発中です。既存のイタリック体を垂直に戻し、ローマン体と比較しました。角度を取り除くと、残りの違いが明確になり、それらをテストおよび修正できるルールに変換しました。このイタリック体が最終バージョンになるわけではありませんが、コードでグリフを分解することは、限界をより速く見つけるのに役立ちます。

より多くのスクリプトとGoogle Fonts

キリル文字のサポートはGeist SansおよびGeist Monoと一致するように計画されており、Geist Serifはローンチ後にGoogle Fontsにも登場します。

1つのファミリー

Geist Sans、Geist Mono、Geist Pixel、そして新しいGeist Serifにより、ファミリーはUIテキストやコードから表現力豊かなディスプレイタイプまでをカバーし、4つすべてが互いに調和しています。

Geist Serifをダウンロードして、構築を始めましょう。

Geist Serifを可能にしてくれたすべての人に感謝します。

舞台裏で活躍した素晴らしいチームなしでは、これらは何も不可能でした。

この旅を私と一緒に始め、すべてがそこから成長した最初のバージョンを描いてくれたAndrés Briganti、そして拡張されたグリフセットと変数軸から最後のカーニングペアまで、執拗な職人技でそれを完成させたMark Davisに多大な感謝を捧げます。また、ポスターデザインを手がけたPatrick McDonaldとMarijana Pavlinić、モーションと信じられないほどの魔法を担当したLuis Gutierrez Rico、パッケージをリリースし、最小限のディテールまでランディングページを再構築したChristopher Kindl、そしてそれらすべてをまとめた調整と技術サポートを提供してくれたZahra Jabiniにも感謝します。これは真のチームワークであり、皆さんと共にそれを構築できたことに感謝しています。