Jump Start Your Web Typography With “Archetype”

产品设计 2018-03-13

Archetype is a typography design tool which can really help standardize and speed up your typography workflow. Let’s explore what it can do for you in this video tutorial!

Introducing Archetype

Working With Archetype

Creating consistent and balanced typographic styles for the web can be awkward, but Archetype aims to help overcome your web typography woes. Getting typography right, from the beginning of your project, will ensure that the rest of the project has a solid foundation.

  • Visit the app at archetypeapp.com
  • Right off the bat you’re presented with default styling suggested by the tool makers. You’ll see styles for headings and paragraphs.
  • You can save your progress at any point, or sign in with Google to retain access to all your projects.
  • In the sidebar to the left you’ll find the controls. This is where you can pick fonts, adjust sizes and spacing, and so on.
  • You can also use to toggle switch to dictate whether you’re designing for mobile or desktop.
  • When selecting fonts you can take inspiration from the pairing suggestions.
  • Select sizes by determining a base font size (1.6em by default) and a scale ratio. From this starting point a scale is built, and you can then assign each element the desired size.
  • Once you’re happy with the chosen styles you can preview a document to see how it all looks together.
  • You can then download your selected fonts to install on your own system.
  • You can also export to Sketch (really cool), by following the instructions, installing a Sketch plugin, and copy/pasting a provided code snippet to build the document in Sketch.
  • Lastly, you can export all your styles as CSS.

Learn More About Web Typography

  • Typography

    How to Establish a Modular Typographic Scale

    Ian Yates

  • Responsive Web Design

    Comprehensive Guide: When to Use Em vs. Rem

    Kezz Bracey

  • Typography

    A Beginner’s Guide to Pairing Fonts

    Ian Yates

  • Typography

    Taking Ems Even Further

    Ian Yates


责编内容来自:Webdesigntuts+ (本文源链)。感谢您的支持!


UI设计资源分享:180 组渐变样式sketch素材下载... UI设计资源分享:180 组渐变样式sketch素材下载 原创文章 分类: 教程 版权: 不使用原创授权 ...
开始自己的建筑笔记 | Sketch Journal 作品展示... 大家是否在网络时常看到精美的建筑师手绘本?是否也准备打造一本属于自己的建筑笔记?今天为大家带来笔者大一阶段的Sketch Journal。笔记虽不算精美,但却是自己一年辛勤努力后的结果,它记录的不只是...
全新组件库 WireframeKit for Sketch – Impart 上架... 不久前与鹅厂老同事合作了一个关于艺术画作与创意灵感的App概念设计项目,“Impart - iOS App Design Concept”,涵盖视觉设计、交互动效、Logo设计等多方面要素,特...
Supposed Galaxy Note 8 Sketch Shows Horizontal Dua... An alleged sketch of the Galaxy Note 8 leaked online on Tuesday, showing a device with a dual camera...
Sketch vs Sketch Sketch vs Sketch The other day, I was enjoying a nice cappuccino on my balcony whil...