In today’s increasingly visual culture, typography is more important than ever. We are more mindful of the impact that visual design creates than ever before. In large part, this is thanks to such things as Gary Hustwit’s documentary Helvetica (that investigates how fonts affect our everyday lives), frequent campaigns to ‘Ban Comic Sans’, and the recent award of a MacArthur genius grant to type designer Matthew Carter.
在当今越来越多的视觉文化中,排版比以往任何时候都更为重要。 我们比以往更关注视觉设计所产生的影响。 在很大程度上,这要归功于诸如Gary Hustwit的纪录片Helvetica (调查字体如何影响我们的日常生活),对“ Ban Comic Sans”的频繁宣传以及最近MacArthur天才奖授予字体设计师Matthew Carter。
But all too often, particularly in web design, one is met with a blank look as to why anyone would bother about such things. This can be particularly true of WordPress, where themes come ready-to-go with fonts and typography already set. This is not to say that WordPress theme designers and developers have not already considered typography. I’m 100% sure they have. It’s just that they haven’t been able to design theme typography specifically for your content, for your words. And, at the end of the day, that’s exactly what typography is all about. So, I’ve put together some handy plugins and tools that can bring your typography to life, and make your WordPress website stand out for all the right reasons.
但是,尤其是在网页设计中,人们常常无所适从,以至于为什么有人会为这种事情而烦恼。 对于WordPress尤其如此,因为主题已经准备就绪,字体和版式已经设置好。 这并不是说WordPress主题设计师和开发人员尚未考虑排版。 我100%肯定他们有。 只是他们没有能够专门针对您的内容和您的文字设计主题排版。 而且,归根结底,这就是版式的全部意义所在。 因此,我整理了一些方便的插件和工具,这些工具和工具可以使您的版式栩栩如生,并以所有正确的理由使您的WordPress网站脱颖而出。
排版说明 (Typography Explained)
Before I launch straight into typography tools and plugins, I thought it might be worthwhile taking a quick look at common typography terms and definitions.
在我直接介绍印刷工具和插件之前,我认为快速浏览一下常见的印刷术术语和定义可能是值得的。
Here goes:
开始:
- A font is a grouping of typefaces which all have similar characteristics. For instance, Helvetica is a font. 字体是一组具有相似特征的字体。 例如,Helvetica是一种字体。
- A typeface is an individual family member of a font. For instance, Helvetica Bold, Helvetica Light, or Helvetica Oblique. 字体是字体的单个家族成员。 例如,Helvetica Bold,Helvetica Light或Helvetica Oblique。
- Serif: this is a type of font that has small, decorative strokes at the end or bottom of letters. They almost look like (and are often referred to as) ‘little feet’. It is these ‘little feet’ that help the eye flow through the text more easily, explaining why Serif fonts are often used for body text. Examples include Cambria and Times Roman. 衬线:这是一种字体,在字母的末尾或底部具有较小的装饰性笔触。 它们几乎看起来像(通常被称为)“小脚”。 正是这些“小脚”帮助眼睛更轻松地在文本中流动,从而解释了为何衬线字体经常用于正文。 例子包括坎布里亚和时代罗马。
- Sans Serif: these fonts are sans-feet. They do not have the same little feet as serif fonts, and are more often used for headings. Examples include Arial and Calibri, and Century Gothic. Sans Serif:这些字体是sans-feet。 它们没有与衬线字体相同的小脚,并且更经常用于标题。 例如Arial和Calibri,以及Century Gothic。
- Script: these are fluid, elegant fonts that look almost like handwritten text. Examples include Edwardian, Savoye, and Roundhand. These should be used sparingly, particularly in online design. 脚本:这些是流畅,优雅的字体,看起来几乎像手写文本。 例子包括爱德华七世时代,萨伏依和朗德。 这些应谨慎使用,尤其是在在线设计中。
用于排版的WordPress插件 (WordPress Plugins for Typography)
简易Google字体 (Easy Google Fonts)
This is possibly my most favourite WordPress plugin when it comes to typography. It allows you to add Google fonts to your WordPress theme without any kind of HTML coding knowledge required. It actually integrates seamlessly with your WordPress customiser, which means that you can preview Google fonts within your theme, in real time. You can choose from the 600+ Google fonts that are currently on offer, create unlimited custom font controls, and even preview exactly how your new font choice will look within your theme before you save any changes. Effectively, you can change the whole look and feel of your website with just a couple of simple clicks. If you prefer to have a complete understanding of all the coding behind the plugin, then you’ll also be pleased to learn that the team behind Easy Google Fonts at Titanium Themes are currently working on in-depth documentation for theme developers.
在排版方面,这可能是我最喜欢的WordPress插件。 它允许您将Google字体添加到WordPress主题中,而无需任何种类HTML编码知识。 它实际上与WordPress定制程序无缝集成,这意味着您可以实时预览主题中的Google字体。 您可以从当前提供的600多种Google字体中进行选择,创建无限的自定义字体控件,甚至可以在保存任何更改之前准确预览新字体选择在主题中的外观。 实际上,您只需单击几下即可更改网站的整体外观。 如果您希望对插件背后的所有代码有完整的了解,那么您也将很高兴得知Titanium Themes的 Easy Google Fonts背后的团队目前正在为主题开发人员编写深入的文档。
The Stats: Easy Google Fonts has a stellar 4.9 star review, from more than 185,000 downloads. It is compatible with WordPress version 4.1.1 and higher, and was last updated only a few days ago.
统计: Easy Google Fonts获得4.9星好评,下载量超过185,000。 它与WordPress 4.1.1及更高版本兼容,并且最近才更新于几天前。
简单拉报价 (Simple Pull Quote)
This plugin is a super-simple way for you to insert pull quotes into the posts and pages of your WordPress website. Once installed, it adds an easy-to-use ‘Pull Quote’ button to both your HTML and TinyMCE editors. Basically, with this plugin installed on your site, you can use typography as a design element; pull quotes become another graphical feature, adding colour and movement to your site in a way that grey slabs of text could never possibly hope to.
该插件是一种非常简单的方法,可用于将拉引号插入WordPress网站的帖子和页面中。 安装后,它将为HTML和TinyMCE编辑器添加一个易于使用的“拉引号”按钮。 基本上,在您的网站上安装了此插件之后,您可以将版式用作设计元素; 引号成为另一个图形功能,以灰色文本永远不可能希望的方式为您的网站增加颜色和移动性。
The Stats: With more than 40,000 downloads, Simple Pull Quote scores 4.8 stars out of a possible five. It is compatible up to version 4.0.1 only though, and hasn’t been updated since December 2014, which is something to keep in mind.
统计 :下载量超过40,000,Simple Pull Quote获得4.8星(满分5星)的成绩。 不过,它仅兼容4.0.1版,并且自2014年12月以来未进行过更新,因此请牢记。
简单的首字下沉 (Simple Drop Cap)
If, like me, you’re a novel enthusiast from way back, then you’ll love the Simple Drop Cap plugin. Once installed, this plugin will magically transform the first letter of a post or age into a drop cap (basically just a fancy term for an initial that is larger than the rest of the font on the page). It comes with a range of features, so that you can transform initials on a per-post, per-page, or per-post basis. There is a whole range of drop cap styles, and you can even set different styles of drop caps for different pages or posts. The possibilities really are endless! This plugin has both a Pro version (with a one-off fee of $10 for one site, and $25 for five sites) and a free version.
如果像我一样,您是从前的新手爱好者,那么您会喜欢Simple Drop Cap插件。 安装完成后,该插件将神奇地将帖子或年龄的首字母转换为首字下沉(基本上只是一个花哨的名词,它的缩写比页面上其余字体的大)。 它具有一系列功能,因此您可以按每个帖子,每个页面或每个帖子转换首字母缩写。 首字下沉样式齐全,甚至可以为不同的页面或帖子设置不同的首字下沉样式。 可能性真的是无止境的! 这个插件既有Pro版本(一个站点一次性收费10美元,五个站点25美元一次性)和一个免费版本。
The Stats: Simple Drop Cap has had only 3,000 downloads, but has managed to secure a respectable 4 star rating. And, it is compatible up to WordPress version 4.1.1, having been updated just a couple of days ago.
统计:简单首字下限仅下载了3,000次,但设法获得了可观的4星评级。 并且,它与WordPress 4.1.1版本兼容,几天前就已更新。
Lettering.js (Lettering.js)
The Lettering.js WordPress plugin is a lightweight, easy-to-use JavaScript span injector for radical web typography. Confused? I was too when I read that description. But then, I’m not exactly a programmer, so my confusion shouldn’t come as a surprise. Basically, this plugin gives you the power to control individual letters and lines of text on your website. You can alter elements such as wrapping and kerning. You can even split words and lines of text, and set different typography parameters for each. Unfortunately, the Lettering.js page on the WordPress Plugin Directory doesn’t contain too much detail. You can visit the Lettering.js website for further information though.
Lettering.js WordPress插件是一个轻量级,易于使用JavaScript跨度注入器,用于基本的网络排版。 困惑? 当我阅读该描述时,我也是。 但是,那时我并不是一个真正的程序员,所以我的困惑也就不足为奇了。 基本上,此插件使您可以控制网站上的各个字母和文本行。 您可以更改包装和字距调整等元素。 您甚至可以拆分单词和文本行,并为每个单词设置不同的排版参数。 不幸的是,WordPress插件目录上的Lettering.js页面没有包含太多细节。 但是,您可以访问Lettering.js网站以获取更多信息。
The Stats: While it packs a punch in terms of power and features, Lettering.js has only been downloaded 1,400 times, and with just one review, its 5 star rating doesn’t really carry too much weight. It is compatible with WordPress version 4.1.1 and was updated earlier this month.
统计 :虽然在功能和功能方面都颇具优势,但Lettering.js仅被下载了1400次,仅进行一次评论,其5星评级并没有带来太大的价值。 它与WordPress 4.1.1版本兼容,并于本月初进行了更新。
字型 (Fonts)
This plugin gives you the option of adding additional, pre-determined font styles and sizes to your WordPress visual editor. This plugin makes typography much quicker and easier than the default WordPress settings allow. If you are a regular user of the Adobe Creative Suite, it works much the same way as these software platforms when it comes to setting font styles.
该插件使您可以选择向WordPress可视编辑器中添加其他预定的字体样式和大小。 与默认的WordPress设置所允许的相比,此插件使排版更快,更轻松。 如果您是Adobe Creative Suite的普通用户,则在设置字体样式时,它的工作方式与这些软件平台几乎相同。
The Stats: This plugin has scored itself an enviable 4.5 out of 5 stars, and has been downloaded over 40,000 times. It is compatible up to version 4.1.1, and was last updated at the end of January.
统计 :此插件在5颗星中获得了令人羡慕的4.5分,并已下载40,000次。 它与4.1.1版本兼容,最近一次更新是在一月底。
WordPress的Tyepkit字体 (Tyepkit Fonts for WordPress)
This plugin gives the ability to install, and then use, all the Adobe Typekit fonts on your WordPress website, without ever needing to edit the CSS of your website theme. To use this plugin, you will need to have an Adobe Typekit account. Typekit is a subscription font service that has collated thousands of fonts from foundry partners into one library for quick browsing, easy use on the web or on your desktop, and endless typographic inspiration. This plugin is actually quite similar to Easy Google Fonts, but gives you access to Typekit fonts, rather than Google Fonts.
此插件使您能够在WordPress网站上安装然后使用所有Adobe Typekit字体,而无需编辑网站主题CSS。 要使用此插件,您需要具有Adobe Typekit帐户 。 Typekit是一项订阅字体服务,已将代工合作伙伴的数千种字体整理到一个库中,以进行快速浏览,在Web或桌面上轻松使用以及无穷的印刷灵感。 该插件实际上与Easy Google Fonts非常相似,但是可让您访问Typekit字体,而不是Google Fonts。
The Stats: With more than 68,000 downloads, Typekit is compatible up to WordPress version 4.1.1, and was updated earlier this month. Unfortunately though, it has a star rating of just 3.6.
统计: Typekit下载次数超过68,000,与WordPress 4.1.1版本兼容,并于本月初进行了更新。 不幸的是,它的星级仅为3.6。
使用任何字体 (Use Any Font)
As it’s name suggests, this plugin gives you the opportunity to use any font at all on your WordPress website. Unlike the other font embed plugins covered above (like Typekit and Easy Google Fonts) you can use any font you like, as long as you can get your mitts on its official font format (ttf,otf). This means that you aren’t dependent on another server. Best of all, this plugin is quick and easy to setup, and does not require any kind of CSS or programming knowledge. All major browsers are supported through this plugin, and website loading time can actually be improved before your custom fonts are stored on your own server, rather than that of a third party.
顾名思义,此插件使您有机会在WordPress网站上完全使用任何字体。 与上面介绍的其他字体嵌入插件(如Typekit和Easy Google Fonts)不同,您可以使用任何喜欢的字体,只要您能获得其官方字体格式(ttf,otf)的手套即可。 这意味着您不依赖其他服务器。 最重要的是,此插件易于安装,并且不需要任何CSS或编程知识。 该插件支持所有主流浏览器,并且在您将自定义字体存储在您自己的服务器上而不是第三方之前,实际上可以缩短网站加载时间。
The Stats: With over 216,000 downloads this particular plugin has managed to land itself a 4.9 star rating. And, it was updated in early February and is compatible with version 4.1.1.
统计:超过216,000次下载,这个特定的插件成功获得4.9星评级。 并且,它在2月初进行了更新,并且与版本4.1.1兼容。
其他排版工具可以微调您的WordPress网站 (Other Typography Tools to Fine Tune Your WordPress Website)
There is a whole range of other online tools (apart from plugins) that can really help fine-tune the typography of your WordPress website.
除了插件外,还有一系列其他在线工具可以真正帮助您微调WordPress网站的版式。
黄金分割率排版计算器 (The Golden Ratio Typography Calculator)
This marvellous, free online tool can help you pinpoint the perfect typeface and font setting combination. By using this nifty calculator, you can determine whether the words on your website will be both easy-to-read and pleasing on the eye for all your website visitors. It’s really easy to use: simply enter your desired font size, and the width of the area that the text will occupy. That’s it. The calculator will tell you the best typography settings. You can even use it to peruse a whole range of available fonts for a real preview of how your WordPress website will look if you use the suggested settings. And, if you find the perfect combination, then you can just install the Easy Google Fonts plugin mentioned above, and implement all the theme changes required.
这个奇妙的免费在线工具可以帮助您确定完美的字体和字体设置组合。 通过使用这个漂亮的计算器,您可以确定网站上的文字是否对所有网站访问者而言都既易于阅读又令人愉悦。 它真的很容易使用:只需输入所需的字体大小以及文本将占据的区域的宽度。 而已。 计算器会告诉您最佳的排版设置。 如果使用建议的设置,您甚至可以使用它仔细阅读所有可用字体,以真正预览WordPress网站的外观。 而且,如果您找到了完美的组合,则只需安装上述的Easy Google Fonts插件,然后实施所需的所有主题更改即可。
If you’re looking for online typography tools that allow you to compare and contrast different font styles, then why not try:
如果您正在寻找可以比较和对比不同字体样式的在线排版工具,那么为什么不尝试:
These are just a few of the typography tools and plugins on the market at the moment. And, while they are definitely a great starting point, and are sure to get your WordPress typography off to a stellar start, I’m sure there are plenty more typography plugins out there. So, feel free to let me know any that I may have missed below.
这些只是目前市场上的一些印刷工具和插件。 而且,尽管它们绝对是一个很好的起点,并且一定会让您的WordPress排版起一个出色的开端,但我敢肯定还有很多其他的排版插件。 因此,请随时告诉我以下可能错过的信息。
If you’d like to dig deeper into typography, SitePoint has a wealth of previous articles on the topic:
如果您想更深入地研究字体,SitePoint上有很多关于该主题的文章: