所有设计师都应该知道的15种在线排版工具
对于设计师和开发人员来说, 了解字体的基本原理以创建可读的令人愉悦的设计至关重要。
您选择的排版会影响网站的多个方面,包括可读性,心情和整体用户体验 。
排版是任何设计的基础 ,因为阅读是我们在网络上所做的最基本的事情之一。
之前我们一直在讨论字体配对工具 ,而今天我们将与您分享打字工具,这些工具可以使您在构建和/或设计的网站上获得更好的阅读体验。
这些是插件,在线工具和脚本,可帮助您创建很棒的标题和清晰可读的文本 。
它还可以为您提供有关如何正确设置文本样式样式的提示。
它不会为您做出设计选择,但会为常见的印刷模板定义带有样式的正确标记。
签出 : 演示 |
古腾堡(Gutenberg)是一个开源项目,因此随时可以贡献,修改和修改它。
这将帮助您设置基本类型的大小,行高和最大宽度。
古腾堡(Gutenberg)是面向开发人员和设计师的灵活且易于使用的排版入门套件。
签出 : 演示 |
该网站提供了许多令人惊叹的版式示例,这些示例均由该插件提供灵感。
它使您可以轻松进行编辑设计并管理代码。
Lettering.js是一个jQuery插件,可让您控制字距调整类型。
签出 : 演示 |
它既包含saas版本,又包含较少版本,可以轻松地修改为现代Web项目。
Typebase.css是可自定义的排版样式表。
签出 : 演示 |
它仅用于显示大文本。
换句话说,使您的排版反应灵敏。
它将帮助您获得各种屏幕分辨率的可扩展标题;
FitText是一个插件,可以使您的网站字体大小灵活。
签出 : 演示 |
使用Kerning.js入门很容易。
Kerning.js可帮助您使用CSS自动转换,缩放和修改字体。
签出 : 演示 |
此处使用的所有排版样式均受图形设计基础的启发。
Typesettings.css是您创建简约Web项目或博客的游乐场。
签出 : 演示 |
创建响应式排版非常容易。
有了Rucksack,由于字体大小具有新的响应特性,因此您可以制作出令人惊叹的流畅字体。
签出 : 演示 |
FlowType.JS根据特定元素的宽度更改字体大小,然后更改行高。
最易读的字体每行包含45至75个字符,但要找到平衡的字体对开发人员来说是一项艰巨的任务。
签出 : 演示 |
它还可以匹配自定义表达式和短语。
它包含4个内置定界符:字符,单词,句子和元素。
Blast.js将帮助您分隔文本,以使其更易于操作排版。
签出 : 演示 |
该脚本通过将可用宽度除以像素字体大小来计算每行要设置的理想字符数。
slabText是一个简单的脚本,可将标题分成几行,以完美填充可用的水平空间。
签出 : 演示 |
没有规则-只是尝试使用字体大小,比例和不同的Web字体。
使用“字体比例”,您可以预览和选择适合您项目的字体比例。
签出 : 演示 |
您所要做的只是选择一些字体,设置一些设置,您将获得漂亮的响应式排版。
印刷帮助您使印刷响应。
签出 : 演示 |
另外,Typi具有垂直节奏功能来计算线条高度。
它为HTML和其他元素创建字体大小和行高。
Typi是一种saas混合,可用于轻松进行响应式排版。
Safari,Google Chrome,Opera和Mozilla Firefox等大多数流行的浏览器均支持该功能。
使用Lining.js插件,您将完全控制Web排版。
签出 : 演示 |
奖励:2个更多工具!
您可以使用搜索或类别(例如字距调整,大写空格,CSS字体加载等)来查找所需的确切内容。
Web类型状态是一个网站,提供有关Web类型和功能支持的最新数据。
它还消除了双倍空格,回车,点和其他错字,因此您可以获得清晰漂亮的字体,易于阅读。
Typograph是一个很棒的网络和草图插件,可让您在一个字母的单词后插入不间断空格,并连接数字和单位。