产品设计

    今日:58| 主题:15752
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] Intro to Variable Fonts in Web Design

[复制链接]
精神病院VIP病人 发表于 2016-10-5 17:09:38
184 6

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
There’s been talk for years of creating fonts that come with adjustable sizes by default. And for years this was just a pipe dream. But it seems that variable fonts are finally here and they’ll only gain support over the coming years.
    Designers around the world have been discussing the possibilities and excitedly clamoring over the future of webfonts. What do variable fonts means for the future of CSS3 webfonts? And how will font foundries design fonts to suit the needs of web designers?
    In this post I’ll bring you up to speed on variable fonts and what these mean for the web. This is an exciting new technology and even though it may be years before this is commercially viable, that leaves designers plenty of time to prepare.
   What Is A Variable Font?

    The idea of a variable font format has been around for years . But early concepts in the 1990s never gained traction, nor was the web ready for these types of fonts.
    But the official release of variable fonts is a very new thing this time around. And thankfully it’s being done the right way.
   Four big tech companies Adobe, Apple, Microsoft and Google have agreed on a new name for this format: OpenType Font Variations.
    This update comes packaged with the new OpenType 1.8 spec and it’s fully supported in OpenType files. Each .otf file may now contain a variable set of data points for adjusting letter widths, descender lengths, and x-height values(among other similar features).
    A variable font is one font file that contains many different styles or displays of that font .
   
Intro to Variable Fonts in Web Design-1 (adjustable,technology,designers,default,concepts)

    Variable fonts can make distribution easier but they were never intended for the web. Now with the popularity ofresponsive design this topic of variable webfonts has been tossed around much more frequently.
    This new OpenType Font Variation was officially announced at the Warsaw ATypI conference in 2016. The announcement spurred a detailed blog post by pro type designer John Hudson.
   Here’s a quote from his post with more technical details:
   An OpenType variable font contains one or more axes that each provide particular variation between different extremes of a typeface design. The format also allows for the possibility of intermediate designs, for the whole glyph set or for individual glyphs, to provide finer control over the design as it changes across the variations design space.
   If you’re a web/UI designer then you probably won’t be creating many fonts from scratch. So these technical details aren’t as useful if you just want to use variable fonts on commercial projects.
   But let’s delve a bit deeper into how they work before looking at their applications on the web.
   How Do These Work?

   Right now installing a Google font is super easy. You visit the page, select what you want, and copy the import URL. But each Google Font comes with only one weight and glyph set.
    This means that Oswald can be installed as regular, bold, or both. However adding both styles requires more HTTP data since both styles must be loaded individually.
   Variable fonts would contain all of this information together in a single file. But they even go one step further.
   Variable fonts can be adjusted on the fly in a web browser so you can make subtle changes to weight or other features like descender length or x-height. The options for customization are controlled by the font designer so there’s a lot of flexibility.
    Here’s a quote from John Hudson’s post explaining how these work in greater detail:
   A font may contain a set of glyph outlines that correspond to the regular weight and width of a typeface, and the lighter, heavier, narrower, and extended designs will be expressed in the font data as movements of outline nodes relative to that outline.
    In less technical speak this boils down to a malleable grid for shaping letters. Think of interpolation where data points define the “grid” of each letter. The default points are called the master style/master font, and these points can be adjusted to create different font styles.
   You might be asking why this is even necessary. What’s the purpose of manipulating a font style on the fly?
   There are actually many good reasons:
   
       
  • Updating font style based on screen size   
  • Adjusting weight to improve kerning   
  • Adjusting letter width for thicker font families   
  • Changing the baseline or letter height in large text(eg. headers vs paragraphs)   
   In a design program like Photoshop you have controls to directly manipulate font variations. But what about web fonts? How would you customize these on the fly using CSS?
    Right now that hasn’t been officially decided. The W3C has a CSS3 spec for this module and it needs to be updated to support variable settings.
   There is no set timeline so I can’t guarantee anything at the moment. But rest assured the teams at these big four tech companies are hard at work trying to create a standard for OpenType Font Variations.
   Variable Fonts On The Web

   These OpenType variable fonts are basically made for the web because they’re not as valuable in the print world. Yes they can make smoother dynamic fonts and reduce file sizes, and yes this is very handy for print layouts.
   But on the web these variable font files can reduce HTTP requests and offer more variety than the current form of web fonts. They would be a complete game changer.
    The single biggest hurdle at the moment is browser support .
    CSS3 has a custom rule called @font-face which allows developers to import fonts and render them live on the web. This rule supports a variety of formats like TTF, SVG, and of course OTF.
   The problem is modern browsers haven’t agreed on how to implement these variable .otf files.
   The same can be said about the W3C which needs to modify the CSS3 specs to help browsers support these variable fonts.
   And beyond CSS3 support there’s also the problem of rendering engines. Fonts need a rendering engine to display properly, and browsers need to support that rendering engine with consistency.
   In my estimate we’re at least a couple years away from gaining traction for variable webfonts. But having large tech companies advocate for OpenType Font Variations is a huge deal.
   The practical value of variable fonts on the web should be obvious. They’re much smaller, easier to work with, and they offer much more customization without quality loss.
   But the timeline to their viability is still a huge question, and it’s a question I hope we can answer soon.
   The Future Ahead

    You can already create and structure OpenType Font Variations if you know how to use font production software. This post goes over all the terminology including variation tables and adjustment deltas for typefaces.
   But that guide is very detailed and really targets advanced type designers. So what does the future hold for people besides type designers?
   It’s too early to set dates for full browser support, but the future looks good. This spec was developed by four leading tech companies: Adobe, Apple, Google, and Microsoft. All four have major sway in the industry and many font foundries have even agreed to contribute their support.
   And the OpenType v1.8 release is just the beginning.

Intro to Variable Fonts in Web Design-2 (adjustable,technology,designers,default,concepts)

    The free Google Fonts platform is already contemplating how to support variable fonts natively. This includes more font types like TrueType, but also more support from their browser Google Chrome. The FontLab team also plans to fully support OpenType variable fonts as soon as possible.
   For now just understand that variable fonts are an emerging technology and they’re gaining support quickly. Your current web workflow may not change much today or even this year. But in the next 3-5 years you may be designing in a completely different world of web fonts.
   Since this topic is so new and still under development it’s tough to find quality learning resources. But all the links in this post are fantastic resources to get started. And over time as this specification gains support I guarantee there will be a lot more reading material.
   If you’re looking for more technical pointers on variable fonts I recommend starting with these articles:
   
       
  • Introducing OpenType Variable Fonts   
  • OpenType Font Variations Overview   
  • Variable fonts, a new kind of font for flexible design   

友荐云推荐




上一篇:什么都没看见只是听个响,脑袋里负责视觉的部分就激动了
下一篇:Create 3D clothes with realistic creases and folds
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

杜雪 发表于 2016-10-5 20:38:10
做为一只禽兽,我深感压力很大…
回复 支持 反对

使用道具 举报

你穿过的墙 发表于 2016-10-6 02:09:23
打酱油的路过
回复 支持 反对

使用道具 举报

84765005 发表于 2016-10-6 03:03:15
支持楼主,顶
回复 支持 反对

使用道具 举报

無名無姓 发表于 2016-11-12 20:47:43
来,来,干了这杯翔!
回复 支持 反对

使用道具 举报

刘英吉 发表于 2016-11-19 10:33:24
愿得一学霸, 教我数理化
回复 支持 反对

使用道具 举报

国产姑娘不矫情 发表于 2016-11-20 12:29:06
谢谢精神病院VIP病人分享好东西
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表