jayfree + typography   202

Managing Flow and Rhythm with CSS Custom Properties ◆ 24 ways
Uses css properties for a generic spacing utility, which you can override on a component level. Nothing terribly original, but the uses CSS properties to make it more flexible
css  typography  webdesign  webdev 
2 days ago by jayfree
Maelstrom – Font Review Journal
Maelstrom is one of my favorites from this newly-resurgent genre. It takes the concept to its logical extremes, alternating between its massive slab strokes on its ceiling and floors to delicate hairlines in the squishy middle. Each character is full of intricacies and begs to be used at monolithic sizes so the contrast can be properly appreciated. Despite the hilarious heft of its slabs, Maelstrom doesn’t feel bulky or clumsy like an Antique-style slab-serif might. Instead, it feels almost calligraphic, oozing with sassy personality. It is svelte and elegant despite its trappings, and its very existence feels like a middle finger to expectations of legibility.
inspiration  typography  design 
22 days ago by jayfree
Output Font | David Jonathan Ross
Output is an all-purpose sans serif slated for release in early 2018 (finally!). While its cousin Input is tuned for code, Output is quieter and more versatile, with softer curves and tighter spacing, in order to confront the demands of varied reading and interaction.
font  typography  webdesign  inspiration 
august 2018 by jayfree
A Spectre is Haunting Unicode
In 1978 Japan's Ministry of Economy, Trade and Industry established the encoding that would later be known as JIS X 0208, which still serves as an important reference for all Japanese encodings. However, after the JIS standard was released people noticed something strange - several of the added characters had no obvious sources, and nobody could tell what they meant or how they should be pronounced. Nobody was sure where they came from. These are what came to be known as the ghost characters (幽霊文字).
july 2018 by jayfree
Protipo Font | Try, Buy and Download | TypeTogether
Protipo family is ideal in all information design situations: apps, infographics, UI, wayfinding, transport, posters, display, and even internet memes. Make smarter, impactful designs with Protipo’s low contrast, four widths, impressive two-weight icon set, and the advanced variable font format.
font  typography 
june 2018 by jayfree
Cropping Away Negative Impacts of Line Height – EightShapes – Medium
Every web font includes whitespace above and below the text, making it difficult to render space in UI components systematically. I created the Text Crop Tool to empower designers and developers to remove this whitespace and more accurately render their components. This is how I did it.
typography  css  webdev 
march 2018 by jayfree
Variable Fonts
Tool for finding variable fonts.
typography  webdesign  font 
march 2018 by jayfree
Manuel87/NobotoFlex: Experimental typeface exploring capabilities of the variable font format
experiment to test the capabilities of the new variable font-format
work in progress
based on Roboto
typography  webdesign 
december 2017 by jayfree
Web Typography: Numerals · An A List Apart Article
When it comes to numbers we have just ten digits. Throw in a comma and a period and we’ve got grand total of twelve characters. You might not think that would present much of a challenge to a typographer, but to a professional typesetter (that’s you if you’re a designer) numerals require far more nuance and variation than you might think at first glance. Numbers deserve the same care and attention as text - this excerpt reveals the numerical situations you should be looking out for, and how to tackle them to benefit your reader.
css  font  typography 
october 2017 by jayfree
Papyrus - SNL - YouTube
Years after Avatar's release, there's one thing Steven (Ryan Gosling) just can't get over.
humour  video  typography 
october 2017 by jayfree
The Value of Multi-Typeface Design with Bethany Heck on Vimeo
Designers are taught to limit the number of typefaces they use in any given design, but why do these rules exist, and when are you justified in breaking them? When can adding typefaces improve a design? We will break down common conceptions about typeface systems and learn what makes type pairings and systems effective while uncovering the benefits mixing typefaces can bring, from unique aesthetics, showcasing typefaces and improving user experiences.
typography  video  conference 
august 2017 by jayfree
Typekit Practice: Using shades for eye-catching emphasis
Sign painters often include lighting effects too, varying the hue and value of a close shade’s colors depending on where the hypothetical light source is positioned.
tutorial  typography  webdesign 
june 2017 by jayfree
pkamenarsky/leerraum.js: A PDF typesetting library with exact positioning and hyphenated line breaking
leerraum.js is a PDF typesetting / layouting library based on typeset (which provides an implementation of the Knuth and Plass line breaking algorithm) and pdfkit. Its goals are simplicity and perfect control over the positioning of graphic elements.
javascript  typography  webdev  plugin 
may 2017 by jayfree
Top monospaced fonts for coding
A good choice of font for your coding can make a huge difference and improve your productivity, so take a look at the fonts in this post that can make your text editor or terminal emulator look little bit nicer.
font  programming  typography 
november 2016 by jayfree
Implementing baseline rhythm in CSS
In short, the height of a capital letter above the baseline is called the cap height (and that’s what browsers will center out between the grid lines automatically). What we need to do is to shift it by half the difference between line height and cap height.
typography  design  css  webdesign 
october 2016 by jayfree
The scorpion express | Butterick’s Practical Typography
The scorpion express:Thoughts on OpenType Font VariationsHave you heard the story of the scor
webdesign  typography 
september 2016 by jayfree
The math of CSS locks
A CSS lock is a Responsive Web Design technique that lets you transition smoothly between two values, depending on the current viewport size, rather than jump straight from one value to the other.
typography  webdesign 
september 2016 by jayfree
Typography is impossible – Medium Engineering
But even then, creative people figured out ways to make things overlap and cheat the restrictions imposed on them by rectangles made out of lead, via solutions that were, basically, hacks:In
typography  webdesign 
september 2016 by jayfree
Adactio: Journal—Why do pull quotes exist on the web?
I’m genuinely curious to hear the design justification for pull quotes on the web (particularly on mobile), because as a reader, I can give plenty of reasons for their removal.
typography  webdesign 
august 2016 by jayfree
FFFFALLBACK - A simple tool for bulletproof web typography.
Web fonts are here, sparking an exciting new era in web design. FFFFALLBACK makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.
css  design  fonts  typography  webdesign  tool 
july 2016 by jayfree
Please, no more Open Sans for a while – Alphabettes
If you are also tired of seeing the ever same fonts and style on the web, and the rich typefaces getting richer, here is a running shortlist of potential body copy typefaces for alphabettes.org I
webdesign  typography 
may 2016 by jayfree
Our Favorite Typefaces of 2015 – Typographica
Welcome to our tenth annual celebration of what is fresh and interesting in type design. Who
typography  webdesign 
may 2016 by jayfree
Typographic Units in CSS | John D. Jameson
Ex and ch are typographic units, meaning their values depend on an element’s font family.
webdesign  typography 
may 2016 by jayfree
In left-aligned type, each line’s first glyph begins at the same point, but because of their sidebearings, the actual characters don’t. This causes large type to look indented — especially when set above or below smaller type.
typography  webdesign 
may 2016 by jayfree
Managing Typography on Large Apps
Think of sites like GMail, Facebook, YouTube—you can’t really see a tiered heading structure like you could envisage on, say, this site right here. I think that for blog-style sites the h1–h6 pattern does still have semantic and visual merit, but for app-like sites—the kind I’m referring to in this post—I think we need a new approach.
video  css  design  typography 
february 2016 by jayfree
The Ten Most Popular Web Fonts of 2015 (And Fonts You Should Consider Using Instead) → Typewolf
Welcome to the third annual edition of the ten most popular web fonts of the year as featured on Typewolf. Based on font usage data from 365 websites featured over 2015, these are the ten fonts that were used the most often. You can check out the previous year’s lists for 2014 and 2013 as well.
typography  inspiration  list 
january 2016 by jayfree
Typographic Design in the Digital Domain with Erik Spiekermann
Metro, the design paradigm behind Windows Phone is in part, a celebration of typography. In this short film, godfather of modern type, Erik Spiekermann talks with Elliot Jay Stocks about how typography is used in the digital domain and what digital designers can learn from traditional print techniques.
typography  video  inspiration 
november 2015 by jayfree
Tim Brown — Universal Typography (SmashingConf NYC 2014) on Vimeo
The web is universal and, in this renewed talk, Tim Brown shows how to practice typography in a way that is equally universal. Focusing on traditional typographic principles, while also embracing progressive enhancement, Tim explains how fonts, CSS, web-enabled devices, and user contexts coexist. Together, we will reevaluate what it means to successfully set type — and inform our routine decisions about typefaces, font sizes, and white space.
typography  webdesign  inspiration 
november 2015 by jayfree
Sp3 | Multidimensional Font Interpolation
As mentioned in Ampersand 2015 by Nick Sherman, Superolator incrases/decreases font weights, thereby creating more available weights.
typography  tool  app 
november 2015 by jayfree
CSS Font Rendering Controls Module Level 1
Chrome and Firefox have a 3 second timeout after which the text is shown with the fallback font. Eventually, a swap occurs: the text is re-rendered with the intended font once it becomes available.
fonts  typography 
november 2015 by jayfree
Tufte CSS
Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.
typography  inspiration  webdesign 
november 2015 by jayfree
Gallery of Webtype In Use
Better fonts for better websites. Introduction Fonts Tools Blog Gallery Support Your Account
inspiration  typography  webdesign 
july 2015 by jayfree
Universal Typography
Quite a bold claim. Can typography be universal? Can it work for everyone and still look good? How can we practice? What should we study? Which fonts and tools work best? Should designers and developers work together on this?
typography  resource 
june 2015 by jayfree
Klim Typography
Welcome to Klim. Fire up a modern browser to make & share your very own custom specimens with live fonts!
design  typography  inspiration 
june 2015 by jayfree
allows trying fonts for free or renting them by the month for desktop use for just a fraction of the regular price.
app  typography  mac 
may 2015 by jayfree
A Legendary Redesign of Helvetica, Reborn After 30 Years
After languishing in obscurity for decades, the Helvetica successor Unica been rescued and remastered.
typography  design  fonts 
april 2015 by jayfree
A Rare Interview With Graphic Design Legend Massimo Vignelli
Gary Hustwit: Can you talk about the map you designed for the New York subway system in the '70s? Such a controversial thing. It’s funny, but I realized the other day the mistake I made. So…
typography  graphic-design  geography  design 
march 2015 by jayfree
Typographica. Review of typefaces and type books.
Typeface design and distribution is in a state of rapid change. Last year we noted its diffusion around the globe, and that trend persists. The majority of font production is no longer concentrated…
graphic-design  font  publishing  typography 
march 2015 by jayfree
Super Crisp Font Anti-Aliasing In Photoshop With Sub-Pixel Hinting
Working with font in Adobe Photoshop can be incredibly frustrating at times, especially when working with small font using anti-aliasing. Creating consistent letterforms and crisp characters can be a…
adobe-photoshop  typography  graphic-design  computer-graphics 
march 2015 by jayfree
Implementation Set up is simple. Upload type.js to your site, and link it in your HTML, just before the end of the body. <script src="./type.js" type="text/javascript"></script> Next, add…
css  web-design  html  typography 
march 2015 by jayfree
Fonts.com provides the biggest and best selection of high quality desktop and web fonts. Try, buy and download classics like Helvetica, Univers, Frutiger, Trade Gothic and Avenir along with popular new fonts like Soho and Neo. Find your type!
design  fonts  font  typography 
march 2015 by jayfree
A More Modern Scale for Web Typography
A type scale that uses a smaller contrast ratio for smaller viewports. Since there is far less distraction/competing visual elements on smaller viewports, less of a dynamic contrast is required.
css  design  responsive  typography 
march 2015 by jayfree
typogr.js | Better Web Typography
Includes 'widont'. Replaces the space between the last two words in a string with &nbsp; to avoid a final line of text with only one word.
javascript  typography  plugin 
march 2015 by jayfree
Why should I ever use Unicode’s special characters for Roman numerals? - Graphic Design Stack Exchange
TL;DR The Unicode consortium recommends using the latin letter where possible and not the numeral, which where included for compatibility with East-Asian typography. The full story : (with…
ancient-rome  font  typography 
march 2015 by jayfree
Libre Baskerville
is a web font optimized for body text (typically 16px.) It is based on the American Type Founder's Baskerville from 1941, but it has a taller x-height, wider counters and a little less contrast, that allow it to work well for reading on-screen.
march 2015 by jayfree
Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!
As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have…
color  tools  webdesign  accessibility  typography 
march 2015 by jayfree
This calculator makes a set of numbers called a modular scale, which you use like a ruler.
sass  js  typography  resource 
february 2015 by jayfree
Smarter Link Underlines For Every Website - Eager Blog
Smarter link underlines for every website. Typography is incredibly important, arguably the single most important element in a user interface. Most of what we look at every day is type.
javascript  plugin  typography 
december 2014 by jayfree
« earlier      
per page:    204080120160

Copy this bookmark: