欢迎光临
我们一直在努力

50个超好用的字体设计工具与资源

漂亮的字体设计总是招人喜欢的,感谢那些创造这些神奇设计技巧和工具的大神们,还有那些乐于分享他们所知的设计师。我们不断地寻找优秀的资源,进行编辑,并精心挑选其中最好的呈现给大家。接下来就为大家展示一些新鲜出炉的与字体设计相关的资源。

为了帮助大家改善字体在设计作品中的运用,我们在这里提供一些与字体设计相关的文章、工具以及资源。在这里可以学到字体设计的一些基本原则,学到如何将不同的字体结合起来,以及在选择字体的时候需要注意的事项。我们也会展示与字体设计相关的幻灯片、相关术语、排版设计以及一些实验。

 

字体设计:参考与资源

字体的分类—— The Taxonomy of Type

这篇文章的目的在于帮助设计师们识别不同字体的基本属性。它解释了不同字体的分类并且给出具体例子。是一篇简短实用的文章。

Useful Typography Resources - The Taxonomy of Type

 

 

Typedia: 共享的字体百科——Typedia: A Shared Encyclopedia of Typefaces

Typedia是一个对各种字体进行分类与连接的资源网站,一个帮助人们学习字体与字体分类的社区,是字体设计领域的维基百科与数据库。任何人都可以加入其中,对网站上的页面内容进行编辑与修改。

Useful Typography Resources - Typedia: A Shared Encyclopedia of Typefaces

 

字体解剖与术语——Typeface Anatomy and Glossary

许多字体的名字当中都含有缩写。其中一些缩写与字体的形状以及字体的格式有关,或者与设计特征以及制作有关。在Unzipped的 The Abbreviated Typographer中,你可以找到关于这些缩写解释的汇总列表。

Useful Typography Resources - Typeface Anatomy and Glossary

 

排版符号中的小秘密——Typographic Marks Unknown

很多排版设计中使用到的符号大家都会觉得眼熟却不知道其真正的含义。这些奇妙的小字符在作者们快速潦草的书写中幸存了下来,并发展出一些妙趣横生的进化史。现在这些符号在键盘与软件中重生,却很少被使用,这里就介绍了这些符号的来历与它们的正确用法。

Useful Typography Resources - retinart

 

字体周期表——Periodic Table of Typefaces

一个靠谱的关于字体与字体类别的周期表。

Useful Typography Resources - Periodic Table of Typefaces

 

IPAD&IPhone 字体——Fonts for iPad & iPhone

这里搜集了所有能在iphone, ipod touch 和 ipad上使用的字体。

Useful Typography Resources - Fonts for iPad & iPhone

 

字体解剖学(壁纸)——Font Anatomy (Wallpaper)

关于字体专业术语与小法则的基本介绍。如果你想知道字体不同部位的称呼就来看看吧。

Useful Typography Resources - Wallpaper : Font Anatomy

 

排版规则清单(PDF)——Typographic Rules Checklist

这个清单不仅包含了常用的排版规则与启蒙教学,还可以作为排版设计过程中的要点提示。

 

排版设计注意事项(PDF)——Typography Checklist

由Jason Dewinetzlf编辑的一份关于排版设计的注意事项清单。在你开始新的设计项目或者打印新的出版物的时候可以参考一下。

Type in 45 Incredibly Useful Web Design Checklists and Questionnaires

 

听说你要选个字体(信息图表)——So You Need A Typeface (Infographics)

这个图表会帮助你选择符合你设计需求的字体。来看看如何前往你想要的字体。

Useful Typography Resources - So You Need A Typeface

 

找到最适合的字体

The Right Font for the Job

几年前,当你选择字体时,你可能会想是用TrueType还是PostScript,是Mac还是Windows。而现在,选择就相对简单些了:OpenType是最方便且功能最齐全的字体格式,并且能适用于各种平台或打印流程。PostScript 和 TrueType中的不同规则都可以OpenType中共存。OpenType最大的好处 是它是一个跨平台的字体格式。你不用转换格式就可以在Mac或者Windows上使用它。

Useful Typography Resources - The Right Font for the Job

 

Erik Spiekermann 的排版错误提示——Erik Spiekermann’s Typo Tips

随着桌面排版这个发明的出现,设计师们开始在自己的电脑上进行排版。在那之前,他们都是为排版工人设定好具体的要求然后把工作留给那些专家们。因此,即便是上好的印刷品质,大家还是能看到一些排版的错误。这篇文章中你可以找到Erik Spiekermann(FF Meta的设计师,Meta设计的创始人,‘Stop Stealing Sheep”的作者之一,FontShop创始人)提供的一些防止这些错误的提示。

Useful Typography Resources - Erik Spiekermann's Typo Tips

 

13种看待字体的方式——Thirteen Ways of Looking at a Typeface

在我职业生涯的头十年,我为Massimo Vignelli工作,他是一位能够使用有限数量字体来进行创 作的传奇设计师。从1980年到1990年,我的大部分项目都使用五种字体:Helvetica (naturally), Futura, Garamond No. 3, Century Expanded, 当然还有Bodoni。

Useful Typography Resources - Thirteen Ways of Looking at a Typeface

 

为网页选择字体——Picking Type for Web

对于即将面世的MIX Oline的更新设计,为网页选择字体自然也是视觉设计的过程的一部分。我对
不同的字体都进行了实验。要想找到一种字体既美观又便于阅读是很棘手的。

Useful Typography Resources - Picking Type for Web

 

如何选择字体——How To Choose A Font

你有没有过被不知道选神马字体的问题而困扰?其实大家都遇到过这个问题。这篇文章就是一个指导你如何选择字体的导航。我最推荐的五本关于字体设计的书籍之一就是“The Non-Designers Type Book”(Robin Williams著),而这篇文章中提到的指标便是这本书里总结出来的。在你每次选择字体的时候都可以看看这篇文章。

Useful Typography Resources - How To Choose A Font

 

在字体选择方面——On Choosing Type

字体设计不是一种科学,而是一种艺术。有些人喜欢把这门艺术科学化,他们认为大量的数据分析就可以激发出好的字体创意。但是这种香肠生产模式的心态只能生产出香肠。字体设计与选择字体绝不是一种被公理与规则束缚的科学,而是一种令人喜悦的艺术。

Useful Typography Resources - On Choosing Type

 

字体的结合

基本原理:将Helvetica与其他字体结合——Fundamentals: Combining Type With Helvetica

在FontShop的基础上,我们退出了Guest FontList。在建立这个表单的时候,我们咨询了大家崇拜的专家来回顾一些有相同用法、风格和概念的字体。

Useful Typography Resources - Fundamentals: Combining Type With Helvetica

 

四种混合字体方法——Four Ways to Mix Fonts

有没有一种方式让我们知道某些字体能否共存?建立一个对比模版是最直观的方式,但是将一个字体发展成三个、四个甚至五个形态是很吓人的。这里有4个关于如何在字体的海洋中安全航行的提示,这些提示都是基于H&FJ字体结合的高度科学第一原则:保持一个元素的一致,让一个元素进行变化。

Useful Typography Resources - Four Ways to Mix Fonts

 

我是如何选择字体的——How do I choose paring fonts ?

当我需要为我的项目选择字体时,我总是依赖我的感觉并进行大量的测试,然后等待爱或恨的魔力来为我做决定。这个方法大部分时候是靠运气的,而且很费时间,所以我决定在论坛上求助。

Useful Typography Resources - How do I choose paring fonts ?

 

字体设计

OpenType初学者指导——Beginner’s Guide to OpenType

OpenType(简称OT)是一种跨平台的字体格式,它包括了专业的设计元素,为字体提供了丰富的语言支持和先进的排版管理。使用OT技术你可以使用不同的方式为字体替换字形元素;连字符,大小写,复古图形,分段,上下标,序数,候补,斜体,等等。这篇文章会帮助你描绘一些在OT字体中常见的元素并告诉你它们应该被如何使用。

Useful Typography Resources - Beginner's Guide to OpenType

 

设计几何形字体——Making Geometric Type Work

对于刚刚开始进行字体设计的平面设计师来说,一般都以几何形字体或者模块化字体作为起点。Illustraor以及其他软件都提供一些简单的元素例如圆形、方形、三角形等,这些元素都可以用来创建一些不错的字母。当我对有限的商业字体感到厌烦是我就会用这个方法。我会扭曲每个字体特征,以使它符合一些简单而严谨的框架中。这个方法总是能创造出一些奇特且易于辨认的字形。

Useful Typography Resources - Making Geometric Type Work

 

我所知道的字体设计——A few things I’ve learned about typeface design

一位雷丁大学(UK)字体设计研究生讲师的金玉良言。

Useful Typography Resources - I love typography

 

案例学习:Vesper的制作——Case-Study: The Making of Vesper

这是一个由Vesper原创设计师提供的Vesper的制作过程。“Vesper的创作经历了将近三年的过程。在这篇文章中,我将设计的过程分为2个阶段:1)我在雷丁大学的学习过程中;2)我离开雷丁之后。希望这个经过高度浓缩但任然冗长的文章,能让大家在我的设计过程中学到一些有趣的知识。”

Useful Typography Resources - The Making of Vesper

 

字体与排版工具

Typelt:在线输入方言标记、变音标记、特殊字母——TypeIt: Type accent marks, diacritics and foreign letters online

这网站可以帮助你输入口音符号和一些特殊的标点字符。除了使用点击按钮来添加符号外,你还可以使用预设好的快捷键,例如Ctrl+N:只需要将鼠标指在目标字符上你就可以看到工具提示。

Useful Typography Resources - TypeIt - Type accent marks, diacritics and foreign letters online

 

网络字体标本——Web Font Specimen

由于字体在敏感的CSS上会有些许不同的呈现,在设计师为设计项目购买字体前,看到字体以不同的方式呈现对网页设计师有很大的帮助。

Useful Typography Resources - Web Font Specimen

 

排版设计:比例与韵律——Typograph: Scale & Rhythm

这不仅是一篇论文,同时也是一个工具。在探索两个或多个交织在一起的概念的过程中,又是会有趣,但有时会很棘手,这个网页就可以帮助你使字体更有活力。移动在标尺上的颜色方块来更改这些文字。说到底,这些文字都只是剧本,如何表演还要看你。

Useful Typography Resources - Typograph: Scale & Rhythm

 

TextMod 2.1

不同于一般文本生成器,在TextMod中你可以自由地对文段进行编辑来对字体进行测试,并使它符合你想要的设定。你的TextMod设定会被存储在cookie里面。不过到目前为止,TextMod只适合编辑拉丁语与亚美尼亚语。

Useful Typography Resources - TextMod 2.1

 

Readability

Readability是一个简单的书签小工具。它可以移除网页上一些杂乱的元素,使你在阅读的时候更能享受其中的乐趣。

Useful Typography Resources - Readability - An Arc90 Lab Experiment

 

免费XHTML/CSS字体排版——Free Typographic XHTML/CSS-Layouts For Your Designs

这个网站上发布了一些以(X)HTML/CSS为基础的字体与模版,由一些设计社区创造并发布在这里让大家免费使用。

Useful Typography Resources - Free Typographic XHTML/CSS-Layouts For Your Designs

 

键盘排版工具——Typography Keyboard Layout

这个小工具可以让你轻松输入一般键盘上没有的字符的。希望它可以帮你实现更好的设计作品。

Useful Typography Resources - Typography Keyboard Layout: Download Now!

 

字体家族——{ font-family }

这是一个为网页开发员与设计师们准备的资源。它会为你推荐CSS中适合使用的普通字体的替代品。

Useful Typography Resources - { font-family }

 

EmChart

这个小工具将你的字体的基本尺寸与子元素的比例陈列出来。

EmChart

 

MyFontbook, 一个无浏览器限制的免费字体预览工具——MyFontbook, A Browser-Based Free Font Viewer

MyFontbook是一个免费的工具,可以帮助你通过浏览器来预览、分类、整理那些安装在你电脑系统中的字体。

Useful Typography Resources - MyFontbook, A Browser-Based Free Font Viewer

 

字体搜索器——Font Finder

FontFinder是为设计师、开发员与排版师而生的。它允许用户在任何一个页面上分析任何元素上的字体,复制任何字体信息到剪贴板上,也可以提供替换字体来对新的排版进行测试。

Useful Typography Resources - Font Finder :: Add-ons for Firefox

 

Unicode代码表格——Unicode Codepoint Chart

这个表格根据不同类型的元素与标志(还有语言)进行划分,每个分类下都有视觉参考。在这里,只需要点击你想要的符号或字符就可以进入到关于它细节信息的页面,并且可以在浏览器中进行页面测试,还有轮廓(SVG格式),一系列编码以及字符组合(HTML entity, UTF-8, UTF-16, UTF-32, ISO-8859-8等)。

Useful Typography Resources - Unicode Codepoint Chart

 

@font-face字体生成器——Create Your Own @font-face Kits

这是一个在线生成字体的套装工具。

Useful Typography Resources - Create Your Own @font-face Kits

 

XHTML字符实体参考——XHTML Character Entity Reference

这个网站包含了252个可以在HTML4和XHTML1.0中使用的字符,并概括了24个HTML4的标准规范,由W3C发布。

Useful Typography Resources - XHTML Character Entity Reference

 

HTML字符辞典——HTML Entity Character Lookup

使用HTML字符可以保证你的网页上所有的元素都是有效的。但是想要从250个元素中找到与字符对应的代码却很麻烦。这个辞典可以帮助你通过字符的外形来搜索。

Useful Typography Resources - HTML Entity Character Lookup

 

CopyPasteCharacter.com

你可以在这个网页上复制单个或多个特殊字符,并把他们粘贴到你的应用程序上。

Useful Typography Resources - CopyPasteCharacter.com

 

调查研究

字体设计样板和实践——Typographic Design Patterns and Best Practices

尽管在CSS中的字体选择有限,但在排版的时候还是会出现很多变化。用Serif还是sans-serif,每行的高度,间隔,字体尺寸,等等因素。

Useful Typography Resources - Typographic Design Patterns and Best Practices

 

使用ClearType和普通显示的视觉搜索与阅读——Visual Search and Reading Tasks Using ClearType and Regular Displays

这是一篇将ClearType于普通显示的呈现进行对比的学术论文。结果是:对大部分用户而言,ClearType很大程度上改善了肉眼阅读的质量。

Useful Typography Resources - Visual Search

 

字体术语的调查结果——‘Font’ vs. ‘Typeface’: font terms survey results

在这次的调查中,大部分的观点认为在电子字体中“typeface”的含义是字体设计,其中包括它的风格,但不包括它的形成过程,而“font”的意思是单个字体的形状,例如某个格式的Myriad粗体,斜体等。不过,这也可能不准确。

Useful Typography Resources - Phinney on Fonts

 

Font or Typeface?

这是集合了在FontFeed上的多个作者编辑的一份设计指导。我们认为在谈论排版与字体设计等相关话题时应该使用相同的术语。由于这些专业术语在经过相当长的一段时间并经过了一些技术改革后,已经有了变化,它们有时会被解读为不同的意思。这就导致让大多数人认为这些专业术语难理解或者令人感觉困惑。

Useful Typography Resources - Font or Typeface?

 

漂亮实用字体设计的规则

网页字体设计导航——A Guide to Web Typography

网页字体设计自从1991年Time Berners-Lee开启了个开关后便经历了很漫长的旅程。回想大家还使用IE 1.0的时候,好的网页字体设计简直就是一种奇迹。但是现在就不同了。我们不仅拥有支持图片显示的浏览器,我们还有机会通过惊艳的字体设计为网页赋予生命。

Useful Typography Resources - A Guide to Web Typography

 

 

漂亮字体设计的原则——The Principles of Beautiful Typography

对大部分人来说,字体只是能够组成词语、句子、段落的一些简单而又熟悉的形状。自从能够通过简单的在键盘上敲击来进行输入后,大家都快把字体这种兼具创造性和艺术性的媒介给遗忘了。

showcase of Design Elements - The Principles of Beautiful Typography" src="http://media.smashingmagazine.com/wp-content/uploads/2010/05/elements52.jpg" /></a></p><br /><br /><br /> <p><a href="http://www.freddesign.co.uk/2009/12/archive/rules-for-good-typography/">Simple rules for good typography</a><br />Here are some basic rules to improve your typography across either web or print. Of course, these rules are only to start with, and rules are meant to be broken. But if you want something to look neat, clean and generally well designed they are a good set to follow.</p><br /><br /><br /> <p class="showcase"><a href="http://www.freddesign.co.uk/2009/12/archive/rules-for-good-typography/"><img width="480" height="300" alt="Useful Typography Resources - Simple rules for good typography" src="http://media.smashingmagazine.com/wp-content/uploads/2010/05/typography-135.jpg" /></a></p><br /><br /><br /> <p><a href="http://www.thedesigncubicle.com/2009/11/typography-is-the-backbone-of-good-web-design/">Typography is the backbone of good web design</a><br />An overview of some typographic techniques to keep in mind for your next website design.</p><br /><br /><br /> <p class="showcase"><a href="http://www.thedesigncubicle.com/2009/11/typography-is-the-backbone-of-good-web-design/"><img width="480" height="300" alt="Useful Typography Resources - Typography is the backbone of good web design" src="http://media.smashingmagazine.com/wp-content/uploads/2010/05/typography-136.jpg" /></a></p><br /><br /><br /> <p><a href="http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/">A 20 Minute Intro to Typography Basics</a><br />“Typography plays a big role in graphic design and can be one of the hardest things to get right. My aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.”</p><br /><br /><br /> <p class="showcase"><a href="http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/"><img width="480" height="300" alt="Useful Typography Resources - A 20 Minute Intro to Typography Basics" src="http://media.smashingmagazine.com/wp-content/uploads/2010/05/typography-144.jpg" /></a></p><br /><br /><br /> <p><a href="http://www.spoonfeddesign.com/11-essential-tips-for-good-print-typography">11 Essential Tips for Good Print Typography</a><br />Typography is a huge part of design and design is a huge part of type. You can”t just throw text on a page, it has to be laid out and organized in a clean way that adds to the information being presented. Here are 11 typography tips to help you convey information in print the right way.</p><br /><br /><br /> <p class="showcase"><a href="http://www.spoonfeddesign.com/11-essential-tips-for-good-print-typography"><img width="480" height="300" alt="Useful Typography Resources - 11 Essential Tips for Good Print Typography" src="http://media.smashingmagazine.com/wp-content/uploads/2010/05/typography-151.jpg" /></a></p><br /><br /><br /> <p><a href="http://designr.it/aestheticallywritten/2009/01/its-type-oclock/">It’s Type O’clock!</a><br />“One of the key qualities of a good information designer is attention to details and since typography is the new cool trend we now seem to care more than ever about presenting text online correctly. The following article is based on my personal experience, yet there’s great probability that much of the following has already been said by somebody else. What you’ll find here is a few tricks for setting type on web I’ve learned over the past few months some of which, amazingly enough, I hardly ever see being used.”</p><br /><br /><br /> <p class="showcase"><a href="http://designr.it/aestheticallywritten/2009/01/its-type-oclock/"><img width="480" height="300" alt="Useful Typography Resources - It

 

什么是字体设计?——What is typography today?

大部分人认为字体设计就是画画图,选选字体。如果要这么说的话,那建筑学也不过是画画图和选选家具。实际上字体设计与建筑学都不是一种目的,而是一种到达目的的方式。建筑的目的是让居民们在其中舒适的居住,而字体的目的是放松人们的头脑,让读者轻松的阅读,让观看者舒适的观看,并吸引他们的注意力。

Useful Typography Resources - What is typography today?

 

麻烦的字体锯齿处理——The Ails Of Typographic Anti-Aliasing

当印刷界的字体享受着高DPI的待遇,炫耀地展示着优美的曲线与微妙的细节时,屏幕上的字体还在苦逼的忍受着笨重的像素、烦人的锯齿、扭曲的字型以及削减的衬线。在显示器厂家生产出大家买得起的200或300PPI显示器之前,我们还是要用软件来解决这些问题。

Useful Typography Resources - The Ails Of Typographic Anti-Aliasing

 

由字体启发的界面设计——Type-Inspired Interfaces

在接到新的项目时,最令我感到恐惧的事之一就是如何着手。如何布局内容?该选什么颜色?一旦这些事定下来,之后的设计就变得简单的。但是空白的页面还是花费我最多的时间。最后我都会从选择字体开始入手。

Useful Typography Resources - Type-Inspired Interfaces

 

CSS与字体的植入

修改后的字体堆——Revised Font Stack

大家为了使完善网页设计完善和获得更多优秀字体而做了很大的努力。但是大部分设计师还是愿意选择安全型的字体:Verdana,Georgia,Times New Toman, 还有Arial. 虽然选择有限,但还是可以在这些预装的字体中探索到新的可能。

Useful Typography Resources - Revised Font Stack

 

成为字体嵌入大师——Becoming a Font Embedding Master

我在最近的几天中尝试使用@font-face找出最好的嵌入字体的方式。这门黑暗的艺术必须被征服。这绝不是一个简单的过程。

Useful Typography Resources - Becoming a Font Embedding Master

 

网页字体用户指南——Web Font User Guide

为设计师、开发者与系统管理员准备的参考指南。它揭示了如何使网页字体在你的网页上程序。同时也涵盖了需要更改哪些设定才能成功的使用网站服务器提供网页字体。

Useful Typography Resources - Web Font User Guide

 

灵光一现:展示与博客等

我们爱字体艺术——we love typography

一个关于字体设计、印刷、标志设计的展示。

Useful Typography Resources - we love typography

 

发现——FINDINGS

一个收集漂亮字体的博客。

Useful Typography Resources - FINDINGS

 

字体/平面海报——typo/graphic posters

一个展示字体设计与平面海报的网页。

Useful Typography Resources - typo/graphic posters

 

城市字体设计之旅——The Journal of Urban Typography

TJOUT专注于收集与研究在城市环境里那些有特别用意的标志、字体碎片、字体设计。

Useful Typography Resources - The Journal of Urban Typography

 

压痕印刷:一个让人激动的印刷品集合——Pressing Letters: A Collection of Inspirational Letterpress

这个项目的目的是将已完成的作品进行分类,并以此来激发大家的创造力。任何人都可以上传他们的字体设计作品、参考指南、小建议等。这个网页上有很多不同的小目录,包括,名片、书籍、日历、形象设计、音乐包装、文具与海报。这是一个绝对值得收藏与光顾的博客。

Useful Typography Resources - Pressing Letters: A Collection of Inspirational Letterpress

 

最新字体设计新闻——Alltop: Top Typography News

一个字体排版设计新闻、文章、工具的集合点。

Useful Typography Resources - Alltop - Top Typography News

 

最后点击:字体设计相关的游戏

字体训练师——FontTrainer

一个帮你识别不同字体细微差别的有趣的小工具。

Useful Typography Resources - FontTrainer

 

将你的个性总结在一个字体中——Your Personality, Summarized in a Typeface

如果你曾经与字体设计师一同工作,你会发现他们很少单纯的讨论字体的美观或功能性。他们一般会讨论这个字体是否有魄力,或者是否让人感觉平静,或者是否有亲和力。实际上,他们在讨论字体的个性。这其实是有道理的,你的个性也可以在字体中展现。Pentagram就是这样一个可爱的小网站。想不想测一测你是什么字体?

Useful Typography Resources - Your Personality, Summarized in a Typeface

 

TypePong

TypePong是一个现代化的复古Iphone游戏。用自己喜爱的字体来玩乒乓球,你也可以跟朋友对战或者挑战世界排名。

TypePong

 

深度字体挑战——Deep Font Challenge

你是一个厉害的字体射击大师,还是一个连Futura都拼不出来的小白痴?为了证明的设计知识,射击字体靶子,根据命中率与射击速度来计分,但是提醒你,在游戏当中桌面会旋转,要注意哦~。

Useful Typography Resources - Deep Font Challenge

翻译:翻茄匠,@XuHY_____
原文:smashingmagazine

赞(1)
版权归原作者所有,如有侵权请告知。达维营-前端网 » 50个超好用的字体设计工具与资源

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址