goodui
Proを入手

無料 · SIL Open Font License

goodui Sans & Display

キット専用の書体。インターフェースにはSans、見出しにはDisplay、それぞれ可変ファイル1つ。どんなプロジェクトでも使えます。

ダウンロード (314 KB)ライセンスwoff2 + ttf、React Native用の静的ttf、300–900

ウォーターフォール

13pxBookings this week: 24 appointments, 1,024 of 1,110 slots filled by 11:00.
14pxBookings this week: 24 appointments, 1,024 of 1,110 slots filled by 11:00.
16pxBookings this week: 24 appointments, 1,024 of 1,110 slots filled by 11:00.
24pxBookings this week: 24 appointments, 1,024 of 1,110 slots filled by 11:00.
48pxBookings this week: 24 appointments, 1,024 of 1,110 slots filled by 11:00.
96pxBookings this week: 24 appointments, 1,024 of 1,110 slots filled by 11:00.
DisplayShip the product, not the plumbing.

特徴的なグリフ

上がFigtree、下がgoodui Sans。 double-storey g · straight y · flat-cut t · open @ · flat Q tail · footed 1 · dotted tabular 0 · geometric & · ui ligature.

Figtree
g y t @ Q 1 0 & R ui
goodui Sans
g y t @ Q 1 0 & R ui
Bold
g y t @ Q 1 0 & R ui
uiリガチャ
dlig or ss01
goodui goodui
ロゴタイプ
1グリフ、U+E000
等幅数字
tnum、ドット付きゼロ
$12,480.00$1,024.50$100.00
スラッシュ付きゼロ
zero
0.00 · 10:00
代替字形
ss02：一階建てのaとg、曲線のR
a g R a g R
Display
より詰まった字間、低いx-height、一階建てのa
Rate & review

Text

Quietly, the booking wizard guides every client through staff, service and time. At 13 to 15 px the apertures, the x-height and the rhythm decide whether a dashboard feels calm. goodui Sans keeps Figtree's open shapes and adds its own signature: a double-storey g, a straight y, flat cuts on t, Q and @, a footed 1 and tabular figures with a dotted zero.

使う

Theme Studioはこのペアから始まり、同じ設定を出力します。

app/layout.tsx (Next.js)
import localFont from "next/font/local"

const gooduiSans = localFont({ src: "./fonts/goodui/GooduiSans-Variable.woff2", weight: "300 900", variable: "--font-goodui-sans", display: "swap" })
const gooduiDisplay = localFont({ src: "./fonts/goodui/GooduiDisplay-Variable.woff2", weight: "300 900", variable: "--font-goodui-display", display: "swap" })

// <html className={`${gooduiSans.variable} ${gooduiDisplay.variable}`}>, then in globals.css:
// :root { --font-sans: var(--font-goodui-sans), system-ui, sans-serif; --font-heading: var(--font-goodui-display), system-ui, sans-serif; }
React Native (goodui Native)
// Expo: copy native/ into components/goodui-native/foundation/fonts, then in app/_layout.tsx
import { useGooduiFonts } from "@/components/goodui-native/foundation/fonts"

const fontsReady = useGooduiFonts() // ThemeProvider switches every Text to goodui Sans once true

ライセンス

SIL Open Font License 1.1。Erik KennedyのFigtreeをベースに、ソースから再構築し、グリフの描き直し、新機能、新しいスペーシングを加えました。gooduiの有無を問わず、何にでも使用・埋め込み・改変できます。ライセンスファイルはフォントと一緒に保管してください。予約フォント名はないので、サブセット化や改名も自由です。