Tagged “typography”
Min-Max clamp calculator, by 9elements
Here’s a handy tool from the smart folks at 9elements for making a value – such as a font-size, or margin – fluidly responsive. In their words the tool…
calculates the CSS clamp formula to interpolate between two values in a given viewport range.
Interactive type tutorial, from Erik Kennedy
Here’s a handy interactive tool for learning “the logic of great typography” from Erik Kennedy, the man behind the Learn UI Design course.
Doppler: Type scale with dynamic line-height
line-height on the web is a tricky thing, but this tool offers a clever solution.
How I subset web fonts
On my personal website I currently use three web fonts from the Source Sans 3 group: regular, italic and semibold. I self-host my fonts because that’s a good practice. Additionally I use a variety of special characters to add some typographic life to the text.
When self-hosting it’s important from a performance perspective to minimise the weight of the font files your visitors must download. To achieve this I subset my fonts so as to include only the characters my pages use but no more. Here’s how I do it.
Issues with Source Code Pro in Firefox appear to be fixed
Last time I tried Source Code Pro as my monospaced typeface for code examples in blog posts, it didn’t work out. When viewed in Firefox it would only render in black meaning that I couldn’t display it in white on black for blocks of code. This led to me conceding defeat and using something simpler.
Source Serif 4
Here’s a nice demo page for Source Serif 4 which illustrates its versatility.
Source Serif is an open-source typeface for setting text in many sizes, weights, and languages. The design of Source Serif represents a contemporary interpretation of the transitional typefaces of Pierre-Simon Fournier. Additionally, Source Serif has been conceived as a friendly companion to Paul D. Hunt’s Source Sans.
Complete Guide to Source Sans Pro (on Beautiful Web Type)
At the time of writing, my personal website uses the typeface Source Sans Pro and has done for around two years. I already employ a number of its cool features however this lovely demo page provides further inspiration.
Source Sans Pro is a versatile typeface designed particularly for user interfaces. Its letterforms are slightly condensed allowing them to fit into tight spaces within a UI, and remain well-defined even at small sizes.
Robb Owen - Independent Creative Developer
Definite “personal website goals” here in Robb’s beautiful online portfolio and blog.
From interaction design to scaleable design systems, single-page apps to something more experimental with WebGL. I help awesome people to build ambitious yet accessible web projects - the wilder, the better.
The Atkinson Hyperlegible Font (Braille Institute)
Braille Institute launch a new, free typeface promising greater legibility and readability for low vision readers.
What makes it different from traditional typography design is that it focuses on letterform distinction to increase character recognition, ultimately improving readability.
Jakarta Sans Typeface
Jakarta Sans is a nice-looking Open Source (so free to use) typeface which I reckon I could use at some point.
Bustle
Here’s a beautiful, magazine style website design for digital publication Bustle. The typography, use of whitespace, responsive layout, menu pattern, colour palette and imagery are all on point!
Font Match
A font pairing app that helps you match fonts – useful for pairing a webfont with a suitable fallback. You can place the fonts on top of each other, side by side, or in the same line. You can adjust your fallback font’s size and position to get a great match.
Font style matcher
If you’re using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you’ve chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.
A Modern Typographic Scale (on 24 ways)
Here’s Rob Weychert advocating a combination of CSS custom properties, calc() and Sass to automate the construction of a flexible typographic scale in CSS.
Responsive Type and Zoom (by Adrian Roselli)
When people zoom a page, it is typically because they want the text to be bigger. When we anchor the text to the viewport size, even with a (fractional) multiplier, we can take away their ability to do that. It can be as much a barrier as disabling zoom. If a user cannot get the text to 200% of the original size, you may also be looking at a WCAG 1.4.4 Resize text (AA) problem.
FS Split Sans and FS Split Serif (fontsmith.com)
Although FS Split started out as a project to create a fresh, modern new sans, it has developed into a broad type family that can bring so much variety to everything from magazines and packaging to websites and branding. The conflicting yet harmonising nature of sans and serif should give designers the tools they need to be both bold and subtle, eclectic and ordinary, contemporary and classic.
Resources for special typographic characters
A collection of resources for finding that curly quote or em dash character quickly.
Bram Stein’s personal website
Bram Stein, a software architect at Adobe, wrote the book on Webfonts, so it’s no surprise that his own website showcases some pretty beautiful typography.
W3C HTML Element Sampler
In all my years of spinning up “HTML Typographic Elements” lists or pages as a reference for designers, I didn’t realise that the W3C provide the very thing I needed in their HTML Element Sampler. These pages provide comprehensive dummy content covering all the main typographic elements which is really handy when designing a website’s typographic styles and pattern library.
Definitive web font @font-face syntax
These days, whenever I’m about to use a web font on a new site I generally find myself running a google search for the latest “definitive @font-face syntax” that covers all modern browser/device needs.
I’m just back from a fantastic couple of days in Brighton attending Ampersand – The Web Typography Conference – and also a Responsive Web Typography workshop with Richard Rutter at Clearleft.
See all tags.