请选择 进入手机版 | 继续访问电脑版

产品设计

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

[其他] The typographic details behind Typewolf’s favorite sites of September

[复制链接]
不忘初心 发表于 2016-10-2 14:10:18
171 2

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

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

x
This is the 32nd installment of my monthly feature on Typewolf where I share my favorite type-driven websites from the previous month and then write a little about the typographic details behind the designs. You can check out last month’s post for August here .
   

The typographic details behind Typewolf’s favorite sites of September

The typographic details behind Typewolf’s favorite sites of September-1-产品设计-designed,previous,details,display,monthly

  Kettle

   FatFrank is a fat, blocky sans-serif from Dutch foundry Regular Bold Italic . Like most heavy faces, it contains tiny counters, so it works best when set at large sizes like it is here.Freight Sans is used for body copy and makes for a much more appropriate text face.Lacrima Senza, a vintage typewriter slab serif from Milieu Grotesque , is used for auxiliary text and contrasts nicely with the other two sans-serifs.
  
       
  •   Where to get FatFrank →   
  •   Where to get Freight Sans →   
  •   Where to get Lacrima →  
   

The typographic details behind Typewolf’s favorite sites of September

The typographic details behind Typewolf’s favorite sites of September-2-产品设计-designed,previous,details,display,monthly

  Christa Laib

   Acta Headline is a display face, which means it was designed to be set at large sizes. It’s used for headlines here but also as a text face on the article pages. At text sizes, the stroke contrast is a little high and the spacing is a little too tight, so it’s not ideal forbody copy. The Acta family does include a text version, however, that would entail loading additional fonts files which would add to the page weight. The body text is still set really well, with a perfect line length and line height, so it reads very nicely despite the fact that it’s using a display face.Pitch, a monospaced font from Klim Type Foundry , makes an appearance for dates and other small UI elements.
  
       
  •   Where to get Acta Headline →   
  •   Where to get Pitch →  
   

The typographic details behind Typewolf’s favorite sites of September

The typographic details behind Typewolf’s favorite sites of September-3-产品设计-designed,previous,details,display,monthly

  Dismissal Help

   This site has a rather unique style for links—the linked text switches toFranklin Gothic in contrast to the surrounding text which is set in the serifLeitura News. Usually changing fonts in mid-sentence doesn’t work, however, in this case the x-heights match up perfectly, so the change feels fluid and seamless. It’s a nice touch that makes the type feel a bit more distinctive.
  
       
  •   Where to get Franklin Gothic →   
  •   Where to get Leitura News →  
   

The typographic details behind Typewolf’s favorite sites of September

The typographic details behind Typewolf’s favorite sites of September-4-产品设计-designed,previous,details,display,monthly

  Maurizio Ilpiac Piacenza

   Work Sans andAlegreya are arguably two of the best fonts on Google Fonts , so it’s nice to see the two coming together on Maurizio’s site. Work Sans has been blowing up lately and seems like it is heading towards overuse, however, Alegreya has been around for years and still feels under the radar. The huge headline type is set in the chunky, black weight of Work Sans and really shows off all the small details and quirks of the typeface.
  
       
  •   Where to get Work Sans →   
  •   Where to get Alegreya →  
   

The typographic details behind Typewolf’s favorite sites of September

The typographic details behind Typewolf’s favorite sites of September-5-产品设计-designed,previous,details,display,monthly

  Linecheck

   Knockout, from Hoefler & Co. , is an eclectic sans-serif family that is available in nine widths and four weights, with each style given a boxing-themed name such as Junior Flyweight . The Linecheck site makes excellent use of the varying widths by jumping between the condensed and extended styles, creating a lively design using only a single typeface family. When set in uppercase, Knockout remains legible down to some pretty tiny sizes—parts of the homepage are set at 10px and still read well. The paragraph type is set justified which produces mixed results—the margins look nice and even but the word spacing can feel a bit erratic at times.
  
       
  •   Where to get Knockout →  
   

The typographic details behind Typewolf’s favorite sites of September

The typographic details behind Typewolf’s favorite sites of September-6-产品设计-designed,previous,details,display,monthly

  Stephanie Gonot

   Stephanie Gonot’s photography features bold, saturated colors and the design of her site follows through with that aesthetic.Trio Grotesk has soft, rounded corners with wide proportions and generous spacing which gives it a sense of playfulness that complements the vibrant colors. The client list runs into a common layout issue—when the list items wrap onto two lines, they appear as separate items. For example, when Bloomberg Businessweek wraps to two lines, Bloomberg and Businessweek look like different clients. The solution to this is to tighten the line height while increasing the padding between items. Although in this situation, that may not be ideal as the list would no longer have vertical spacing that is consistent with the other boxes. This shows there are always compromises in typography.
  
       
  •   Where to get Trio Grotesk →  
  Stay Tuned for Next Month’s Post

  I’ll be publishing a new type-driven design roundup post like this at the beginning of every month. Enter your email below if you want to be notified when it is published.



上一篇:在交互设计中,需要注意的四个小tips
下一篇:7 Trendy Tech Articles from September Every UX Designer Must Read
瑾萱 发表于 2016-10-3 04:28:55
我身在江湖,江湖里却没有我得传说。  
回复 支持 反对

使用道具 举报

scorpion1101 发表于 2016-10-31 19:09:46
幸福毕竟不是曹操,怎能说到就到。
回复 支持 反对

使用道具 举报

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

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

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

返回顶部 返回列表