精选 · 开放 · 免费
Hoefler&Co
高端字库，通过编辑式叙事与优雅样本展示呈现字体。
typefoundry
01
设计气质 DNA
字体排印字库编辑设计高端编辑设计
字体的高端设计工坊与编辑展示平台
02
色彩
#4DAFFFAccent
#333333Ink
#86888BInk soft
#232323BG
#F5F5F5BG soft
#A5A7A9Muted
rgba(134, 136, 139, 0.2)Line
深色界面与浅色内容区域形成高对比度，使用亮蓝色作为链接和界面元素的功能性强调色。
03
字体
transitional-serif · humanist-sans · monospace
- display
56px · 400 - heading
21px · 400 - body
15px · 400 - caption
10px · 400
标题与展示字体使用衬线体，以唤起编辑式优雅感 · 正文与界面元素使用人文主义无衬线体，兼顾可读性与现代感 · 展示字体保持紧凑字间距，以呈现精致、考究的外观
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
以 4px 为基础单位，内容区域使用充足内边距，为字体创造呼吸空间
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
极少使用边框；依靠背景对比与间距进行区域分隔
rgba(255, 255, 255, 0.15) 0px 1px 0px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
基于网格的布局，为字体样本提供大面积视觉区域，并建立清晰的内容层级
07
动效与交互
150msmicro
200mssmall
500msmedium
cubic-bezier(0.12, 0.91, 0.65, 1)easing
交互元素的平滑填充过渡 · hover 状态下的颜色过渡 · 内容显示时的透明度渐显
交互元素上的微妙颜色变化与填充过渡 · 即时响应，配合平滑过渡反馈
08
组件
- button 极简样式，以文本为主，配合微妙的 hover 过渡效果
- card 全出血图片区块，搭配叠加文本，或在视觉与内容区域间保持清晰分隔
- chip 未突出呈现；界面依赖清晰的导航链接
- input 极简的下划线输入框，搭配微妙的占位文本
- hero 大型字体样本填满视口，形成强烈的视觉冲击
09
文案语气与禁用清单
- 语气 专业、精致、富有编辑感；以权威口吻探讨字体排印与设计
- 标题风格 大胆、自信的陈述，展示字体样本与设计理念
- 按钮文案 低调而优雅；邀请探索而非激进转化
- 不要在内容区块使用圆角——截图显示所有容器均为利落、清晰的直角
- 不要为卡片或内容区域添加投影——截图显示扁平、无边框设计
- 不要对正文使用粗体——截图显示全文档保持 400 字重
- 不要用装饰元素充斥界面——截图显示克制的风格与充足的留白
- 不要对展示标题使用无衬线体——截图显示主要字体排印使用衬线体
- 不要使用粗重边框分隔区域——截图显示依靠背景颜色对比进行分隔
- 避免: 过于随意或流行的用语
- 避免: 激进的销售信息
- 避免: 缺乏语境的复杂技术术语
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Hoefler&Co (typography.com) 是一家高端字库，通过编辑式叙事与优雅样本展示呈现字体。设计采用深色界面（#232323）搭配浅色内容区域（#F5F5F5），展示字体使用衬线体，正文使用人文主义无衬线体。亮蓝色（#4DAFFF）为链接和界面元素提供功能性高亮。布局强调大型字体样本，辅以充足间距与极简装饰元素。关键约束：保持所有容器为直角，避免投影，正文保持 400 字重，并确保内容区块间有充足呼吸空间。语调应专业精致，以权威口吻探讨字体排印，避免随意用语或激进销售信息。
en · zh-CN · zh-TW · ja · ko