Note: This section of the site is under heavy construction, tread carefully.

Bookmarks tagged with “typography”

204 bookmarks by garrettc


Occlusion Grotesque

"Occlusion Grotesque is an experimental typeface that is carved into the bark of a tree. As the tree grows, it deforms the letters and outputs new design variations, that are captured annually. The project explores what it means to design with nature and on nature's terms."

Bookmarked on #


TouchType Tool

Manipulate a typeface through gestures.

Bookmarked on #


Katex math typesetting library

The fastest math typesetting library for the web. Simple API, no dependencies.

Bookmarked on #


Fonts Knowledge - Google Fonts

"Welcome to our library of original guides to the world of typography, which the Google Fonts team is producing in collaboration with typographic experts from around the world. Google Fonts Knowledge enables designers and developers of all skill sets to choose and use type with purpose."

Bookmarked on #




typo/graphic posters

"A platform for inspiration, research and promotion of good design through the poster culture"

Bookmarked on #



Font Joy

Generate font pairings in one click

Bookmarked on #



Additional Mac Symbols

You may be aware that you can see a list of available symbols on your Mac with the Control-Command-Space key combination. By default, you get a nice collection of special characters and emoji. The recent addition of a search bar also helps.

Bookmarked on #


Font Brief

Choose typefaces by personality and feel.

Bookmarked on #


Marvel Superhero Lettering

80s and 90s hand drawn lettering.

Bookmarked on #


Going From Solid to Knockout Text on Scroll

"Here’s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls"

Bookmarked on #



How to avoid layout shifts caused by web fonts

"One of the biggest causes of layout shifts for my clients is late-loading web fonts, let's look at how to optimise them!"

Bookmarked on #



Tiff

A type diff tool that visually contrasts the differences between two fonts.

Bookmarked on #


Creating Noto for Google.

"A typeface five years in the making, Google Noto spans more than 100 writing systems, 800 languages, and hundreds of thousands of characters."

Bookmarked on #


How to Easily Create a Responsive Vertical Rhythm with CSS

"Vertical rhythm is the term that comes to mind when talking about typography on the web, which can be difficult to get right."

Bookmarked on #


Scunthorpe Sans

A s*** font that f***ing censors swearing automatically

Bookmarked on #



Cross-Cultural Design

"How much consideration have you given to how the text of your site is rendered when it’s localized? Do you consider whether your webfonts load in China?"

Bookmarked on #


Utopia

"Utopia emerges when designers and developers share a systematic approach to fluidity in responsive design. Instead of designing for x number of arbitrary breakpoints, we can design a system within which elements scale proportionally and fluidly."

Bookmarked on #




The Secret Law of Page Harmony

"A method to produce the perfect book.” The perfect book. This is how designer-genius Jan Tschichold described this system. Not the ok book, nor the pretty good book, but the perfect book.

Bookmarked on #


Text Rendering Hates You

"Rendering text, how hard could it be? As it turns out, incredibly hard! To my knowledge, literally no system renders text "perfectly". It's all best-effort, although some efforts are more important than others."

Bookmarked on #


Type Terms

The animated typographic cheat sheet.

Bookmarked on #


Baseline Grid

Baseline Grid To celebrate the 100th anniversary of the German design school Bauhaus, we published a story at The New York Times featuring some of its buildings outside Europe. Designed by Rebecca Lieberman, Eden Weingart and I, it featured a small detail for the design-history aficionados: a baseline grid. Baseline grids are horizontal lines evenly spaced where text should align to. Aligning type based on its bottom, or baseline, was a common practice in movable type. Its founding publication, the Gutenber

Bookmarked on #


The Longest Date String

"Given a date format like “Thursday, January 21, 2010” and limited space to drop in this string on a page, what is the maximum width of this string as rendered in Georgia or Helvetica/Arial?"

Bookmarked on #


Wrapping long words with CSS or HTML

How to manage long words when they do not fit to the screen or within a narrow container.

Bookmarked on #



The World’s Writing Systems

"This web site presents one glyph for each of the world’s writing systems. It is the first step of the Missing Scripts Project , a long-term initiative that aims to identify writing systems which are not yet encoded in the Unicode standard. As of today, there are still 146 scripts not yet encoded in Unicode."

Bookmarked on #



Web Typography: Numerals

Richard Rutter offers sage advice on numeral usage in this excerpt from Web Typography.

Bookmarked on #



Create your design system, part 1: Typography

Typography is arguably the essential part of a website. When we think about the content of a web page, we think about words. In this article, we’ll take a look at how to set a typography system in…

Bookmarked on #



Variable Fonts

A simple resource for finding and trying variable fonts.

Bookmarked on #


Responsive And Fluid Typography With vh And vw Units

"Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design."

Bookmarked on #


Text System Mastery with Shared Styles

Creating an accessible and harmonious typography system 2 separate typefaces using Sketch's text style manager.

Bookmarked on #



Fonts for Complex Data

"Retail displays, packaged goods, financial reports and apps all present readers with a dizzying array of data. Here are a few ways to make quick work of their long lists, tiny annotations, and mighty stacks of numbers."

Bookmarked on #


Wee People typeface

A typeface of people silhouettes, to make it easy to build web graphics featuring little people instead of dots.

Bookmarked on #


How to use variable fonts in the real world

There are plenty of sites demoing the possibilities of variable fonts, but very few using them in a real-world context. In fact the new Ampersand website may be the first. Learn how we did it.

Bookmarked on #


Axis-Praxis: OpenType variable fonts in the browser

Axis-Praxis is a website for playing with OpenType variable fonts. Use Chrome on any platform or Safari on macOS 10.13+

Bookmarked on #


Long read: What's so bad about Comic Sans, anyway?

"Comic Sans still dominates classrooms with teachers believing it is better for dyslexic students, "Comic Sans still dominates classrooms with teachers believing it is better for dyslexic students, for reading and for modelling handwriting. Jon Severs finds that those benefits are dubious and that so much else we think we know about fonts and readability - even reading itself - is highly problematic . for reading and for modelling handwriting"

Bookmarked on #


23 Minutes of Work for Better Font Loading—zachleat.com

A post by Zach Leatherman (zachleat), a Front End Engineer.

Bookmarked on #