惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

A
Arctic Wolf
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
P
Palo Alto Networks Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
I
InfoQ
Recorded Future
Recorded Future
T
Threatpost
P
Privacy International News Feed
Engineering at Meta
Engineering at Meta
F
Full Disclosure
Apple Machine Learning Research
Apple Machine Learning Research
S
SegmentFault 最新的问题
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
G
GRAHAM CLULEY
Know Your Adversary
Know Your Adversary
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Cisco Talos Blog
Cisco Talos Blog
K
Kaspersky official blog
云风的 BLOG
云风的 BLOG
The GitHub Blog
The GitHub Blog
博客园 - 叶小钗
T
Tor Project blog
G
Google Developers Blog
人人都是产品经理
人人都是产品经理
NISL@THU
NISL@THU
T
Threat Research - Cisco Blogs
AWS News Blog
AWS News Blog
C
CERT Recently Published Vulnerability Notes
V
Visual Studio Blog
T
The Exploit Database - CXSecurity.com
P
Proofpoint News Feed
Jina AI
Jina AI
C
CXSECURITY Database RSS Feed - CXSecurity.com
T
The Blog of Author Tim Ferriss
小众软件
小众软件
L
LINUX DO - 热门话题
Scott Helme
Scott Helme
博客园 - 司徒正美
P
Proofpoint News Feed
Security Latest
Security Latest
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Spread Privacy
Spread Privacy
Project Zero
Project Zero
L
Lohrmann on Cybersecurity
J
Java Code Geeks
Vercel News
Vercel News
Security Archives - TechRepublic
Security Archives - TechRepublic
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
博客园 - 三生石上(FineUI控件)
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO

Chip Cullen

The need for importance, and AI: Chip Cullen An updated Colorosetta: Chip Cullen The Return of the Font Combinator!: Chip Cullen Changing the number of an item in an ordered list: Chip Cullen My pizza dough recipe as of May 2025: Chip Cullen Gonna try to be a bit more personal: Chip Cullen How I built dynamic social media images in Eleventy using Cloudinary: Chip Cullen My current approach to AI : Chip Cullen Lessons Learned Surviving a Major Product Launch: Chip Cullen How to Build a Drop Down Menu with Modern CSS: Chip Cullen How to stop page scrolling when you have an open dialog element: Chip Cullen Distraction Driven Development: Chip Cullen How I learned to code: the art of letting go: Chip Cullen In praise of the switch statement: Chip Cullen Project stuck? Think about how you’re breaking it down & question everything: Chip Cullen So how did the onboarding experiment go?: Chip Cullen Ideas for an Onboarding Checklist: Chip Cullen I really like Post Mortems: Chip Cullen Raise Red Flags Early: Chip Cullen How to mock fetch requests in React Testing Librarty tests: Chip Cullen Running a Structured Meeting: Chip Cullen Adding the View Transitions API to my personal site: Chip Cullen A Lightweight Way to Read GraphQL Data: Chip Cullen How to make a color changing favicon: Chip Cullen Using a Pros/Cons list to help navigate technical discussions: Chip Cullen How to use variable fonts from Google Fonts: Chip Cullen A new website: now on Eleventy!: Chip Cullen How to Truncate Type at More Than One Line with Just CSS: Chip Cullen Colorosetta: the VS Code Extension!: Chip Cullen Using CSS Custom Properties and Logical Properties Together: Chip Cullen Browser Dev Tools: Element Inspector Popover: Chip Cullen The Link with rel=preload is a Seperate Thing: Chip Cullen How to have Dark & Light Mode Images that also works with User Choice: Chip Cullen Don’t use Viewport Units for Font Size on their own: Chip Cullen A little known Media Query: Aspect Ratio: Chip Cullen Meta thinking: Managing Decisions: Chip Cullen Give Your To-Do's Context: Chip Cullen Say What the Impact is when Reporting Issues: Chip Cullen Firefighting 101: How to Manage Breakages: Chip Cullen How to Deal With Large Pieces of Technical Debt: Chip Cullen Make Your Request Clear: Chip Cullen Analytics events, HTML classes, and protecting against refactoring: Chip Cullen How We Removed jQuery from a large app: Chip Cullen New tool: ColoRosetta: Chip Cullen What width and height attributes should you use with responsive images?: Chip Cullen Django 3.1 gotcha: Referrer Policy has a new default, and it might break iframes and links: Chip Cullen A Javascript Component Pattern: Chip Cullen CSS min(), max() and clamp() Functions: Chip Cullen Pointer Events and Inline Elements in Chrome: Chip Cullen Resolving a github repo and a new Create React App: Chip Cullen How to POST *Data* with the Fetch API: Chip Cullen The Contrast Triangle: Chip Cullen Advice on interviewing for Junior Developers: Chip Cullen Life Lessons Learned From Running a Marathon: How to do something really hard: Chip Cullen A (Brief) intro to Search Engine Structured Data: Chip Cullen Javascript Fallback Values on Variables and Booleans - a hard lesson: Chip Cullen Alfred Tip: Quickly Access Common URLs: Chip Cullen Responsive Images in Hugo - by Laura Kalbag: Chip Cullen Making a Gatsby Site with Multiple Content Types: Chip Cullen How to Create and Use Fixtures in Cypress Tests: Chip Cullen Fixing the 'Bad Interpreter' Error from AWS and Python 3.7: Chip Cullen Creating a Canonical Tag in a Django Template: Chip Cullen Responsive spacing with viewport and ch units: Chip Cullen Welcome to my New Design - 2019: Chip Cullen Django Templates: Block and If statements don’t work like you might expect: Chip Cullen Books I Read in 2018: Chip Cullen Lifehack: 4 ways to help tame common email noise: Chip Cullen How to make better Pull Requests: Adding Steps to Test: Chip Cullen The unsung develpment tool: Spreadsheets: Chip Cullen Troubleshooting Adding and Removing EventListeners: with Arguments, Debounced, and in a React Class: Chip Cullen How to Fake the Window Object in Jest and Enzyme: Chip Cullen Migrating From Wordpress to Hugo: Chip Cullen Background Repeat and its Possibilities: Chip Cullen Getting Started With Front End Tests: a Mindset: Chip Cullen Migrating a Blog - An Opportunity for a Content Inventory: Chip Cullen Moving to Hugo: Chip Cullen JavaScript events: .target vs .currentTarget: Chip Cullen Things I wish I knew when starting with Python: Chip Cullen Leading Ampersands for modifiers in Sass: An anti-pattern: Chip Cullen How to get rid of the "You have mail" message in your terminal: Chip Cullen Why three typefaces rule the web, and what you can do about it: Chip Cullen You shouldn't worry about Section 508 - it's Section 504: Chip Cullen Looping Video Backgrounds: pointers and pitfalls: Chip Cullen How to “preview” a click event tag in the Google Tag Manager console: Chip Cullen Moving on from a technology, or: life after Drupal: Chip Cullen Don’t be a dumb developer: Chip Cullen Two level breadcrumbs with CSS :only-child: Chip Cullen Simplicity comes with experience: Chip Cullen Do the least amount possible: Chip Cullen SVGs vs. Icon Fonts: Two points in favor of Icon Fonts: Chip Cullen Accessible links without underlines: Chip Cullen The Strategic Job Hunt: Chip Cullen Surviving Getting Laid Off: Chip Cullen How to structure your typography in Sass: Chip Cullen Layer Cake: A Responsive Design Layout Pattern: Chip Cullen Creativity is yet to come in Web Design: Chip Cullen Front End Testing with Wraith: A Step by Step Recipe: Chip Cullen Where to begin? How I start a visual design for the web: Chip Cullen Why SVG is so cool (or: what happens when you're late to the party on something): Chip Cullen How to apply classes to elements with CKEditor 4, in Drupal 7: Chip Cullen
If you could only have five Google Fonts: Chip Cullen
2014-08-21 · via Chip Cullen
Chip Cullen

The late, great graphic designer Massimo Vignelli famously used only five typefaces in his career -

  • Helvetica
  • Futura
  • Garamond
  • Century
  • Bodoni

Source

Why would a designer place such a constraint on himself, especially considering the breadth of his career? Typefaces are a tool to be used in design, and he knew these tools well. He knew how extensive those typefaces were, what their strengths were, and where they were weak. He felt he could address the tone of any project with these five choices.

It's not a bad idea, in this age of widely available digital fonts. You will certainly be moving along with a design a lot faster if you only have to pick from a handful of great fonts, rather than sifting through hundreds of mediocre fonts.

As a popular resource for free web fonts, Google Fonts has a glut of typefaces that, shall we say, have limited use.

The aim of this post is point out five typefaces available on Google Fonts that should serve you well. If you were to be limited to only five typefaces, these would help you address most projects. I'm evaluating these typefaces on:

  • Appropriateness for digital projects - how do they look on screen. Does it work for long running text being read?
  • Completeness of character sets - at it's most basic level, a typeface needs to have all of the characters you need for your project. These fonts all have a healthy amount of characters included.
  • Weights available - most free fonts typically come in one or two weights, but these all have a useful amount of weights
  • Italics available - another drawback of most free fonts is you are lucky if there is a proper set of italics included. These all have at least some set of italics

So, here we go:

  1. Open Sans - as of this writing, Open Sans is the most popular typeface on Google Fonts. And for good reason - it has an extensive set of characters, five weights - all with italics. And that's just the regular version - there is a corresponding condensed version that has three weights - which is perfect for titles. It was commissioned by Google, and is very, very close in design to Droid Sans - however, it's just ever so much wider in proportion, which seems to alleviate some of Droid Sans' awkwardness.
    • Pros: Extensive weights, italics, complete, very versatile
    • Cons: Pervasive (it's popular), can be easily misused
  2. Source Sans Pro - Source Sans Pro is a free typeface that was developed by Paul D. Hunt on behalf of Adobe, and contributed to Google Fonts. What intrigues me about Source Sans Pro is not just it's completeness - (six weights - plus italics for each!) - but it has two sibling typefaces - Source Serif Pro, and Source Code Pro. The serif version is not as extensive as the sans version (only three weights and no italics), but it's a welcome companion nonetheless. As for the mono-spaced Source Code Pro - let's just say that it's what I use in my text editor. I like it that much. If you are writing a technical blog, you could do very well sticking to the "Source __ Pro" family of typefaces.
    • Pros: Very complete, companion typefaces
    • Cons: Serif version not as complete
  3. Merriweather - The first serif on this list is a very attractive one. It comes in four weights, with italics. It has a very generous x-height, so it requires a little more line-height than some of these other typefaces. The serif version of this typeface came out first - but a new sans-serif version - Merriweather Sans - was recently released, and is just as complete.
    • Pros: Extensive weights, is a usable serif font for digital projects
    • Cons: Probably not the best for UI elements
  4. Noto Serif - Noto only has two weights - Regular and Bold (including italics for both). There are sibling Sans and Serif versions, much like Source. What makes Noto so interesting is that Google is adapting it to support more languages than has previously been achieved in a single typeface. If your project has wide-ranging internationalization needs, you'll have a hard time coming up with a more complete option than Noto.
    • Pros: Better international support than you'll likely be able to find in any other typeface
    • Cons: Currently only Regular and Bold weights
  5. Lato - Lato was one of the first fonts on Google Fonts that was really robust in terms of weights available. It has five weights, with italics. It has a hairline weight that you won't find in most fonts, which works very well at large sizes. It has the generous x-height that all good digital text faces seem to have, making for a very readable font.
    • Pros: lots of weights - an especially nice hairline weight
    • Cons: needs slightly more line height than other fonts

Honorable mention: Fira Sans - this gets mentioned purely based on the reputation of its maker - Erik Spiekermann (well, his firm, anyway). This typeface was developed for the Firefox Operating system, and is a good choice for UI elements, while still being a workable running text option. It has five weights, with italics, as well - so, it's very versatile.