跳到主要内容

50个顶级排版教程

+$22. 4 steps to using variable fonts

variable fonts

(形象信用:未来)

+$Variable fonts are the latest and greatest thing in web typography, enabling you to define all manner of type variations within a single font and saving you the performance hit of having to load multiple fonts.本教程+$takes you through the four steps to using variable fonts online.

+$23. Make interactive 3D typography effects

laptop screen

+$Here We'll+$create a type effect+$that uses the shapes of letters as a mask to some fast, free-flowing particles trails that will dynamically swirl and move through the letters. Not only will there be this beautiful animation, but as this will be rendered onto the HTML5 canvas element, this will be transformed in 3D to rotate towards the mouse as it moves around the screen. This is perfect for site headers or just when you need to grab the user’s attention for a call to action.

+$24. Better web typography in 13 simple steps

text

+$Web typography means getting acquainted (or re-acquainted) with the rules of classic typesetting, but there’s more. With the web being a fluid and malleable medium, designers have to be able to predict the end result across different browsers and end users.本教程+$examines the basic dos and don’ts of typography, specifically applied to the web.

+$25. How web typography is just typography, sort of

排版通常被教导为与网页设计完全不同的学科,但Amy Papaelias认为这是一个错误。在这次演讲中,作为TypeCooper West的Letterform系列讲座的一部分,她揭开了网络排版的神秘面纱,并认为它应该被视为学习网页设计的一个组成部分。

+$26. Improve web and mobile app typography

短视频列出了提高网络和移动应用排版质量的五项基本原则。 Paulo Stanley提供此实用指南,帮助您开始创建屏幕设计排版。

+$27. Improve web type with CSS font-size-adjust

type, the letters 't' and 'b'

+$Font-size-adjust in CSS lets you specify your font size based on the height of lowercase letters, and its use can make a big different to the legibility of your web text.本教程+$explains the thinking behind this property and how to use it in your projects.

+$28. The rules of responsive web typography

responsive web typography

+$Responsive web typography is tricky, but it’s become the cornerstone of good web design, so you need to get it right.本教程+$provides the foundation from which to begin, and covers both the design principles behind responsive typography and practical solutions for it.

+$29. Master accessible web typography

accessible web typography

+$The rise of responsive web design has made accessible type selection more important than ever if your web content is to be readability by the maximum number of people.这里+$, Fontsmith presents the results of its work with Mencap on accessible typefaces, and the new best practices that have emerged from it.

+$30. Fluid responsive typography with CSS poly fluid sizing

fluid layouts in type

+$Fluid layouts are now an established part of web design practice, but fluid typography is still relatively new.本教程+$examines how to use established browser features,萨斯和一些简单的代数来创建可扩展的流体类型,可以跨多个断点和预定义的字体大小。

+$31. Responsive font size and fluid typography with vh and vw units

type on different screen sizes

+$Another tutorial on how to create fluid typography,这个+$is almost exactly one year older than the one above, but it’s still worth a read to help you get your head around this discipline within web typography.

+$32. Performance and web typography

选择和实施网络字体时,您必须考虑的众多因素之一是您的选择对网站性能的影响。 Helen Holmes的这次会议演讲解释了优化网络字体文件的最佳方法。

下一页:如何设计自己的字体,以及测试类型知识的游戏



翻译字数超限