精选 · 开放 · 免费

Typotheque

一个优质的字体铸造厂，以简洁、图文丰富的界面，展示全球字体系统与编辑项目。

01

设计气质 DNA

字体工艺与语言多样性的数字展览

02

色彩

以高对比度的黑白为基础，点缀鲜艳、饱和的强调色块

03

字体

humanist-sans · monospace

• display40px · 700
• headline20px · 400
• body16px · 400

正文使用标准 16px 基础尺寸，行高为 1.0 · 标题使用加粗的 40px 尺寸，行高宽松为 1.1 · UI 标签与次要文本使用略小的 13px 尺寸 · 小型大写字母或标签的字间距略微增加

04

间距

主要区域周围留有充足留白，标准内容块保持一致的 20px 内边距

05

表面 (圆角 / 阴影 / 边线)

使用细微灰色的 1px 细边框，主要用于结构分隔

06

布局

用于浏览字体收藏的多栏网格，上方为全幅主视觉图像，下方为大型、色彩鲜艳的卡片块

07

动效与交互

交互元素上平滑的背景色过渡（0.25s） · hover 状态下细微的透明度与变换变化（0.2s）

背景色过渡与细微的透明度调整 · 立即视觉响应或平滑过渡到链接部分

08

组件

• button 药丸形状，border-radius 为 9999px，包含实心与透明两种样式
• card 大型圆角矩形块（24px 圆角），采用大胆、饱和的背景色
• chip 用于数据可视化网格中的高竖向文本标签
• input 由简单放大镜图标表示的极简搜索界面
• hero 全幅高分辨率摄影风景，底部带有细微的深色渐变叠加层，以增强文字可读性

09

文案语气与禁用清单

• 语气 权威、教育性强，深度聚焦全球包容性
• 标题风格 直接、描述性强且高度易读（例如「全球字体」、「所有字体」）
• 按钮文案 微妙且面向行动，常伴有箭头图标（例如「了解更多 →」）

• 不要使用普通的无衬线字体——截图显示的是具有特定字符特征的人文主义无衬线体
• 不要使用僵化的 8px 网格——截图显示使用 10、20、30 和 80px 等值的灵活间距
• 不要将按钮做成矩形——截图显示始终是 9999px 圆角的药丸形按钮
• 不要使用大面积投影——截图显示完全平面的表面，没有阴影深度
• 不要使用小而密集的文字——截图显示充足的行高（1.0 至 1.3）和清晰的字体尺寸
• 不要仅依赖单一背景色——截图显示纯白、纯黑与鲜艳饱和色块的混合运用
• 避免: 过于激进的营销术语或夸张表述
• 避免: 杂乱或视觉喧闹的 UI 元素
• 避免: 不同区域间不一致的字体排印

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko