尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Montserrat字体使用手记:从布宜诺斯艾利斯街头招牌走出的免费几何无衬线字体

Montserrat字体使用手记:从布宜诺斯艾利斯街头招牌走出的免费几何无衬线字体 Montserrat字体使用手记从布宜诺斯艾利斯街头招牌走出的免费几何无衬线字体【免费下载链接】Montserrat项目地址: https://gitcode.com/gh_mirrors/mo/Montserrat如果你常在设计社区闲逛大概率见过这个名字反复出现Montserrat字体。它被许多人称作现代几何无衬线字体的国民款——免费、开源、可商用从极细到极粗一应俱全。但比起好用的字体这个标签我更愿意先说它的另一个身份一个关于城市记忆的抢救项目。这篇文章不打算按下载—安装—使用的说明书套路来写。我会先带你认识它从街头走进电脑屏幕的全过程再拆开如今的家族结构最后分享我实际测试过的配置方案和踩过的坑帮你直接用得顺手。 从布宜诺斯艾利斯街头的招牌说起2010年设计师Julieta Ulanovsky在布宜诺斯艾利斯大学攻读字体设计研究生时注意到老城区Montserrat街区那些上世纪上半叶的招牌与海报——它们的字形带着手绘的温度与比例却在城市更新中一面面被替换、消失。她在2011年发起Kickstarter众筹把这一整套抢救下来的字形整理成字体公开发布并在项目说明里写道老城区Montserrat的旧海报和招牌启发我设计一款字体去抢救20世纪上半叶城市印刷术的美感。城市更新让这些招牌永远消失而我想把它们的美感留存下来、并以自由开源的方式释放出去。这个抢救的初衷决定了Montserrat的设计气质几何、克制、带一点复古的亲切感——没有花哨的衬线装饰却保留着手绘招牌特有的温度和比例感。这也是它和市面上多数冷冰冰的无衬线字体最不一样的地方。 现在的Montserrat字体家族长什么样经过多轮迭代2015年补全全部字重与斜体、2017年重绘拉丁字形并扩展西里尔字符、直至如今的9.0版本Montserrat早已不是单一字体而是一个三线并行的家族系列所在目录特点常规系列fonts/从Thin到Black共9档字重每档都配斜体替代系列fonts-alternates/字母形态更圆润、更具装饰感适合创意标题下划线系列fonts-underline/内置连续下划线效果的变体视觉冲击力强9.0版本还有个值得关注的变化新增的Montserrat Underline子家族取代了旧版中的Montserrat Subrayada并且与常规、替代系列保持完全同步更新不会再出现想用新字符却发现下划线系列没跟上的尴尬。上面这张官方图展示的正是下划线变体的气质——NEW UNDERLINETHE CITY配着一条贯穿版面的直线几何感与装饰感同时拉满。这种带装饰线的字形放在海报、Banner、视频片头这类一个字就是一幅图的场景里非常出效果。一盒四格式按场景取用Montserrat的每个字重都同时提供四种格式分散在项目不同的目录里otf/印刷与桌面设计软件的首选ttf/跨平台兼容性最好的通用格式webfonts/woff2网页性能最优解体积小、加载快variable/可变字体一个文件覆盖全部字重内容层面从3.1版本起它还内置了四套数字体系等宽衬线体、等宽老式体、比例衬线体、比例老式体。做数据报表、价格表这类需要数字纵向对齐的排版时这一项能省下不少手工调整的功夫。️ 最稳妥的安装与网页引入顺序拿到字体文件的方式很简单克隆整个仓库即可git clone https://gitcode.com/gh_mirrors/mo/Montserrat如果你只想要其中某个格式直接到对应目录下载单个文件就行。系统安装方面Windows在fonts/ttf/里右键安装macOS双击后点安装字体Linux复制到~/.fonts/后执行fc-cache -f -v刷新缓存——三步之内字体就能出现在所有应用里。网页项目里引入一个可变字体文件就足以覆盖全部字重font-face { font-family: Montserrat Variable; src: url(fonts/variable/Montserrat[wght].ttf) format(truetype-variations); font-weight: 100 900; } body { font-family: Montserrat Variable, sans-serif; }如果只想用固定字重把webfonts/目录里对应的woff2逐个声明即可。这里建议至少声明Regular与Bold两档正文标题各取所需浏览器也不用加载多余的文件。 实测三种应用场景的字体配置参考我在自己的项目里分别用Montserrat做过网页、移动端界面和一份简单的印刷稿下面这组配置是我实测后觉得比较稳妥的起点应用场景推荐字重字号与行高参考网页正文Regular 40016px / 行高1.6网页标题Bold 700 或 Black 90024–32px / 行高1.3移动端按钮Medium 50016px移动端导航标题Bold 70020px印刷正文Regular10–12pt印刷标题ExtraBold16–20pt上图是官方放出的字重演示用了很有意思的西班牙语昵称来命名——从flaquita纤瘦到bombón糖果般饱满九档字重一字排开每档还带斜体版本。这意味着你可以靠字重而不是字号来构建信息层级页面视觉会干净很多这也是我偏爱它的主要原因之一。另外两个系列的使用建议品牌标识、Logo、创意标题→ 试试替代系列圆润的字母形态更有亲和力海报、封面、强调装饰→ 下划线系列自带视觉焦点几乎不需要额外设计常规正文与UI界面→ 常规系列耐看且不抢内容 字符集与多语言支持的覆盖范围9.0版本把字符数从1968个扩充到了2731个新增了非洲语言SSA字符、纳瓦霍语等支持同时更新了西里尔字符与各类变音符号。从上面的官方演示图可以看到欧元、美元、分数、箭头、版权与注册商标等符号都与字母保持同一套线条语言。对多语言站点来说这意味着俄语、西班牙语、法语、德语等内容可以用同一款字体保持视觉统一不必为了个别字符再去混搭别的字体字体管理成本会明显下降。⚠️ 使用前值得知道的几个避坑点实测中我遇到了几个问题加上项目文档里明确记录的已知问题一并列在这里Adobe系软件里的可变字体显示异常某些版本的Adobe CC对可变字体支持不稳定做印刷输出时建议直接用静态otf/ttf文件——这是项目官方也推荐的做法亲测有效。粗体档位的个别字形渲染异常这是生成工具fontmake的已知限制项目方仍在处理中。遇到个别字符显示奇怪时换用相邻字重通常就能规避。格式别混用网页优先woff2桌面软件用ttf/otf别图省事把otf直接塞进网页加载体积和兼容性都会吃亏。 写在最后它不只是一款字体Montserrat的完整设计源文件sources/目录下的.glyphs、构建配置config.yaml和Makefile都公开在项目里make build、make test、make proof三条命令就能走完从源码到成品、再到质量检测的完整流程。这意味着它不仅是拿来就用的字体更是一份可以学习、可以改装的开放标本——这正是SIL开源字体许可证项目根目录的OFL.txt的初衷免费商用、自由修改但衍生作品需保留同样的许可与署名。我实测下来最深的感受是好用的无衬线字体很多但能讲出我来自哪条街的很少。下次在字体菜单里看到Montserrat时也许可以想想那些被城市更新替换掉的旧招牌——它们正以另一种方式活在你今天的设计稿里。【免费下载链接】Montserrat项目地址: https://gitcode.com/gh_mirrors/mo/Montserrat创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表