相关 - [[UI设计字体系统]] 和界面更相关的知识。 - [[英文排版]] ## 概念 ### 西文字体解剖   ### 西文衬线体 Serif [查看 Figma 来源地址](https://www.figma.com/file/iVYLbuVj4XFs2zIjdUoC4k/RM---Module-1---Typography?type=design&node-id=9-280&mode=design) #### Old Style 老式衬线体 老式衬线字体类似于用墨水书写。它们的特点是笔画粗细对比度低，笔画中存在对角线压力（见红线）。它们被认为是最传统的衬线风格。 老式衬线字体代表着历史和遗产。顾名思义，它们很古老。这就是说，它们中的许多--例如 Garamond--被认为是永恒的。如果你为一个具有悠久历史和传统的公司做设计，它们将是一个完美的选择，但对于专注于创新、进步和当前时代的公司来说，就不是一个好的选择了。 #### Transitional 过渡衬线体 过渡风格的特点是笔画的粗细对比度较高，笔画中的垂直压力较大（见红线）。与旧式风格不同的是，衬线也是有括号的。 过渡性衬线字体是非常通用的。它们是旧式风格和现代衬线之间的中间地带。这一类别的字体对于长篇文字来说是非常好的，例如用于**文章、博客文章甚至是书籍**。它们也代表着**安全、信任和传统**。  #### Neoclassical 新古典衬线字体 新古典衬线字体，也被称为现代字体，其特点是细笔画和粗笔画之间的反差最大。它们的特点**还包括笔画中的垂直压力，以及 "球形 "笔画终端（红圈）。** 新古典衬线字体被许多人认为是**最漂亮**的，原因很明显。它们的高对比度使它们成为希望显得豪华和昂贵的品牌的完美选择，因此，例如**销售设计师服装、昂贵手表或香水**的公司。然而，它们**只适合于标题文字。在较小的尺寸下，它们是难以辨认的。** #### Slab Serif 板式衬线体  ### Sans Serif 无衬线 #### Grotesque 怪异  #### Humanist 人文主义  #### Geometric 几何  ### Other style #### Monospace  #### Handwriting  #### Display  ## 识别字体 - [识字体网-在线图片字体识别扫一扫网站 (likefont.com)](https://www.likefont.com/) 亲测好用 - [Font Finder 🔎 by What Font Is](https://www.whatfontis.com/) 国外版本的 202211  ## 了解字体 ### 预览效果 - [Adobe Fonts | Explore unlimited fonts](https://fonts.adobe.com/) 可以通过上传截图，找到相似的字体非常好用，也可以了解到字体的一些运用。 #Adobe - 使用 Framer 的字体选择，进行预览效果。 - [Browse Fonts - Google Fonts](https://fonts.google.com/?category=Sans+Serif&preview.text=Account%20Level&preview.text_type=custom) - [字由-全部字体](https://www.hellofont.cn/font-list) ### 中文 - [字由-让设计更有价值](https://www.hellofont.cn/home) - [iFonts字体助手-字体管理器-用有趣的字做设计](https://ifonts.com/) ### 英文 - [Browse Fonts - Google Fonts](https://fonts.google.com/) 谷歌官方的，输入名字就可以看大致的效果。Google Fonts，但是只有开源的字体能看到。 - [Font Meme: 字体识别、字体转换、字体免费下载](https://fontmeme.com/zh/) 理想中的字体查询网站，有对应的介绍，和使用案例，但是数量好像不是很多，估计只有一些出名的。 ## 字体选择 ### 常用英文字体 - [[Proxima Nova]] 之前看人人竞品时经常看到 - [[Helvetica Neue]] 品质还不错，但字符间距太紧凑、且用 CSS 没办法调整成好看的效果，而且也并非跨平台可用的字型（用户需要专门安装，比较麻烦）。 - [[Poppins]]，也是很常见，个人蛮喜欢的，就是数字不等宽。 - [[San Francisco]] 授权问题不可用。 ### 常用五种英文字体（一个国外大佬的） - [[Gilroy]] - Meta Serif Pro - [[Robot]] #等宽字体 - [[Georgia]] - Work Sans ### 常用数字字体 - **等宽数字** - Inter - Sf pro display - Din - **网友讨论** - Gaodel：设计很圆润，年轻化，可爱，非常适合一些偏年轻化的产品，同时字重非常适合金融产品的字重效果。 - Montserrat：很优雅的一个字体，用在数字上或者界面中非常的优雅。 - Poppins：比较现代的一个字体设计， #非等宽字体 - 看着很稳重，但由于不是等宽数字，用起来别扭。 - Bitter：字体和英文字体都很好用，是谷歌旗下的一款产品， - Graduate：非常英伦风格和学院风的一款数字字体，用于海报或者一些个人化活动页面效果非常好。 - Futura：这个无论是英文还是数字都非常现代化，非常干净利索的一款字体，做到 ppt 里效果非常好。 - Proxima nova：是一款收费字体，非常的优雅以及现代。 - Gotham：非常适合发布会，极简的网站设计，或者海报，非常现代干净的一款字体 #收费 - **Lato：** 非常现代科技感的一款字体：出自谷歌旗下。 #等宽字体 - 预览 - 有 figma 群友推荐 2021.12.12 - 衬线: playfair dispaly: 古典，现代，优雅与一体的一款设计。 - Oswald 不要钱；马丁老师推荐 #非等宽字体 - [[Din]] 很贵 - Fialla one：算是 din 的一款替代产品。 - [[inter]] 开源 ![[Pasted image 20210326132942.png]] 来自 figma 模板站管理后台组件页面 ### 可爱英文字体 - Nunito #Free开源免费 ![[Pasted image 20210525094250.png]] ## 资源 ### 超找相似字体 - 我在 cubox 中有这个标签，可以去搜。 - [Identifont - Moderat](http://www.identifont.com/similar?5LVW)  ### 下载与可商用字体 - [找字体_ZFont.Cn_找字体_免费字体_免费商用字体，中文字体下载_zfont.cn](https://zfont.cn/) 20231018 看着UI也比较靠谱。 - 下载了一个思源黑体20231116 -  - [字体搬运工 - 免费商用字体下载](https://font.sucai999.com/) Cui 推荐。一个专门收集整理” 免费商用字体的网站 “ - [灰大字体导航](https://www.pslkzs.com/fonts.php) 灰大 - [免费字体下载大全，可免费商用中文字体一览表 1. 猫啃网](https://www.maoken.com/all-fonts) 比较全，实时更新  - [Fontsgeek : Download Thousands Of Cool Free Fonts For Windows And Mac.](https://fontsgeek.com/) 可以下载英文 - [免费商用字体库 – Figma](https://www.figma.com/community/file/1256555346586156735/%E5%85%8D%E8%B4%B9%E5%95%86%E7%94%A8%E5%AD%97%E4%BD%93%E5%BA%93)  - 看这个文件吧 < [https://www.figma.com/community/file/1182263223752982384>](https://www.figma.com/community/file/1182263223752982384>) 就是别人整理的那个 - [51Font -「免费字体发布平台」为您第一时间发布商用免费字体开源字体](https://51font.17font.com/) - [10 种免费且经典的谷歌开源英文字体分享](https://www.zcool.com.cn/article/ZNzM3MTQ0.html) 梁定然 2018 - [12种免费商用的高质量谷歌开源英文字体分享](https://www.zcool.com.cn/article/ZMTE2NTYyOA==.html) 梁定然 2020 - [20款免费字体](https://mp.weixin.qq.com/s?__biz=MzA5ODU4OTczMQ==&mid=2447855989&idx=1&sn=09a50cce06496f1cfa6641f9d5c38ab6&chksm=849cbc39b3eb352fbeb3dc343dd466c4f49dd52eba0cbc8186a7566ab14bef1210c82a1af3ad&scene=21#wechat_redirect) 英文 - [FONTBOOK 分享免费商用中文字体](https://fontbook.wiki/) 收集可商用字体并且附带下载链接  ^3875b1 - [2020年免费商用字体合集！共31款！](https://mp.weixin.qq.com/s/XepUUhA9IuvIcSqDm8mnCA) ^4445bd ### 垂直节奏感 [[字体设计垂直方向的节奏感工具]] ### Better Web Type - [Resources | Better Web Type](https://betterwebtype.com/web-typography-resources/) 相当全的网页设计字体和排版教程，有时间好好看看 - [All you need is 5 fonts | Better Web Type](https://betterwebtype.com/articles/2021/06/07/all-you-need-is-5-fonts/) 一个专注网页字体设计的大师博客 ![[Pasted image 20210814131759.png]] ### 其他 - [Kern Type](https://type.method.ac/#) 练习字体设计排版的小游戏。![CleanShot 2023-11-04 at [email protected]](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-11-04%20at%[email protected]) - [海艺拾贝-选取部分视觉效果较好、使用率较高的字体推荐给大家](https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzUzNjQ5ODkwOA==&action=getalbum&album_id=1337806472557936642&scene=173&from_msgid=2247503909&from_itemidx=1&count=3#wechat_redirect) - [Pretty Fonts | FontSpace](https://www.fontspace.com/category/pretty) 英文字体下载 - [如何提取mac上的苹方字体在并在windows上使用？](https://zhuanlan.zhihu.com/p/341263030) - [Find used fonts on any website with - Fonty.io](https://fonty.io/) 检测出网站都用了哪些找字体。 #2023 -2 - [Shapeless Typography Inspiration](https://shapeless.dev/foundations/typography)  - [Best Sellers | MyFonts](https://www.myfonts.com/bestsellers/) 最畅销的字体都有哪些? 按小时更新 - [设计中标题文字如何处理？会更诱人！](https://mp.weixin.qq.com/s/iLmBPe5lIDIjFhISAMq_Yg) - [Font Squirrel | D-DIN Font Free by datto](https://www.fontsquirrel.com/fonts/d-din) 一款免费的 DIN 风格字体 ### [[字体使用记录]]