Jump Start Your Web Typography With “Archetype”

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+稿源:Webdesigntuts+ (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 产品设计 » Jump Start Your Web Typography With “Archetype”

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录