siggiarni + typography   67

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  typography 
october 2017 by siggiarni
A Five Minutes Guide to Better Typography — Pierrick Calvez
The hyphen ( - ) is used for compound terms:
check-in, money-back, pull-up.

The en dash ( – ) is used to represent range or a connection:
1995–2000, page 1–5, Paris–Stockholm.

the em dash ( — ) can replace commas parentheses, or colons:
One thing’s for sure—he doesn’t want to face the truth.
design  fonts  typography 
october 2017 by siggiarni
The Crystal Goblet by Beatrice Warde
Imagine that you have before you a flagon of wine. You may choose your own favorite vintage for this imaginary demonstration, so that it be a deep shimmering crimson in color. You have two goblets before you. One is of solid gold, wrought in the most exquisite patterns. The other is of crystal-clear glass, thin as a bubble, and as transparent.
april 2017 by siggiarni
Color fonts! WTF? 🌈
A color font file is actually just a regular font file that embeds additional data to display more graphic properties than the contour shapes of a character.
typography  color  fonts 
march 2017 by siggiarni
Techniques for Creating Textured Text
In this article we'll explore all the current techniques for creating image or texture filled text and show you how to apply them.
css  svg  typography 
january 2017 by siggiarni
Precise control over responsive typography · MadebyMike
It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range.
css  typography  webdevelopment  fonts  mobile  responsive 
january 2017 by siggiarni
How to describe typefaces - InVision Blog
Selecting an appropriate font for a project lies in the ability to understand more than what a font looks like.
fonts  typography  reference 
december 2016 by siggiarni
`font-display` for the Masses | CSS-Tricks
font-display is a new CSS property. Using it, we can control how fonts display in much the same way that we can with JavaScript-based solutions, only now through a convenient CSS one-liner!
css  fonts  performance  typography 
september 2016 by siggiarni
Variable Fonts for Responsive Design · An A List Apart Blog Post
Choosing typefaces for use on the web today is a practice of specifying static fonts with fixed designs. But what if the design of a typeface could be as flexible and responsive as the layout it exists within?
fonts  design  typography  responsive 
february 2016 by siggiarni
CSS Font Features | WebKit
Font features are a way to enable advanced text styles and effects as designed by the font author. A font may support a number of features: some examples include different kinds of ligatures, tabular numbers, or small caps. Because the designer explicitly created forms for these variants in the font file, using font features is the highest quality way of achieving these effects.
css  typography  webkit  fonts 
february 2016 by siggiarni
Precise control over responsive typography · MadebyMike
It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range.
css  fonts  responsive  typography 
march 2015 by siggiarni – Combining CSS clip-path and Shapes for New Layout Possibilities
Recently I’ve been thinking about how pages might start to break out of the “boxes inside boxes” trope that’s built up in web design over the past few years. One way to break through limitations is to merge two different creative possibilities: in this case, CSS clip-path and the Shapes module.
css  design  typography 
march 2015 by siggiarni
Typewolf → A Comprehensive Guide to Smart Quotes, Dashes & Other Typographic Characters
A comprehensive guide to using proper typographic characters, including correct grammatical usage.
design  reference  typography 
march 2015 by siggiarni
Web Typography for non-designers - Presslabs
Although a lot of today’s web content is highly interactive and image-based, language–and thus words–is still the basic means of expression on almost every single web page.
design  typography  fonts 
march 2015 by siggiarni
Dev.Opera — The State of Web Type
Typography has a long and rich history, but much has been lost in the transition to the web. While browser support for typography has advanced a lot in the last couple years, we still have a long way to go.
fonts  typography 
march 2015 by siggiarni
State of Web Type
Up-to-date data on support for type and typographic features on the web.
Search or choose from the features below to get started.
css  typography  reference 
march 2015 by siggiarni
Death to typewriters: Technical supplement — Medium
Below are some of the technical (CSS, JavaScript, Closure) details in Medium’s typography and typesetting. Note: we use LESS, so you will see some light LESS features (mostly variables).
css  design  typography  js 
february 2015 by siggiarni
How to Create (Animated) Text Fills | Codrops
A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.
animation  css  svg  fonts  typography 
february 2015 by siggiarni
Frere-Jones Type | Typeface Mechanics: 001
This new series of posts will explore what I call “typeface mechanics”, the behind-the-scenes work that makes typefaces visually functional. It is what placates the stubborn oddities of human perception, helps or hinders the user, and informs long-standing conventions of design.
design  fonts  typography 
february 2015 by siggiarni
Grids, typography, rhythm and improving your page’s flow - Being Limited
Have you ever heard the term vertical rhythm? It refers to the vertical spacing in a design. It’s extremely common in print design actually – in web, not so much. I’m sure you’ve all heard about grids and what not but they rarely deal with vertical alignment, only horizontal. That’s a good start but it’s not good enough; we need to talk about vertical alignment as well.
css  fonts  typography  grid 
january 2015 by siggiarni
Typesettings.css | Minimal Type Boilerplate
Typesettings.css is the typography boilerplate for your minimal website or blog project. All typographic styles are inspired by traditional graphic design fundamentals—the boring stuff that you learn in Typography 101.
bootstrap  css  design  typography 
january 2015 by siggiarni
Typefacts | Die besten Fonts 2014
Ladies & Gentlemen: Typefacts’ Best Fonts of 2014 →
january 2015 by siggiarni
7 Alternatives to Popular Web Typefaces for Better Performance - Cognition: The blog of web design & development firm Happy Cog
Designers may not be always thinking about it, but how a site performs can be as important as choosing the right typeface. The weight of a font kit is arguably more important to a site’s performance versus other heavy hitters (like images), because fonts are loaded on every single page.
design  typography  fonts 
november 2014 by siggiarni
Dev.Opera — Better @font-face with Font Load Events
In this article, I will make the argument that current implementations of @font-face are actually harmful to the performance and usability of the web.
css  performance  typography 
september 2014 by siggiarni
Firefox OS Typeface — Mozilla Style Guide — Mozilla
Designed to integrate with the character of the OS, the Fira Sans typeface also aims to cover the legibility needs for a large range of handsets varying in screen quality and rendering. When working with Fira Sans it is recommended that micro font sizes that fall below our guidelines are avoided.
firefox  mozilla  typography  fonts 
may 2014 by siggiarni
Perhaps a more accurate description would be an incompatibility table. This shows the state of default system fonts across the most popular platforms. I put this together as a way of finding alternatives to certain webfonts when page weight starts to get too heavy.
mobile  typography  reference  webfonts 
february 2014 by siggiarni
The Ten Most Popular Web Fonts of 2013 — Type & Grids
The use of web fonts has continued to explode in 2013 – designers are no longer content with using standard system fonts like Arial and Georgia.
design  fonts  typography  webdesign 
february 2014 by siggiarni
Kerning on the Web | The Typekit Blog
Kerning can refer to one of two things: spacing instructions that type designers put into font files to mitigate awkward character combinations, or spacing adjustments that graphic designers make as they typeset text. In today’s post, we’re talking about the former
css  typography  fonts 
february 2014 by siggiarni
Figuring It Out: OSF, LF, and TF Explained | The FontFeed
Numerals (or figures) can take various forms. The figure style you choose ought to be appropriate to the project you are working on. Readability is key. But which style is best for which purpose? There are two main forms, oldstyle figures (OSF) and lining figures (LF). Each can come in tabular and proportional widths. See some examples above.
design  fonts  reference  typography 
october 2013 by siggiarni
Line Height
A simple, step-by-step presentation on CSS line-height. Covers leading, how to apply various line-height values, as well as line-height and the inline box model. Hope you find it useful!
css  typography 
october 2013 by siggiarni
NewNet-Soft - CSS Typography cheat sheet
Today I want to write about a few small typography enhancing features in CSS.
css  typography 
july 2013 by siggiarni
The Sketchnote Typeface - Rohdesign - Designer Mike Rohde
The Sketchnote Typeface was built for production work. The four fonts in the set were created for The Sketchnote Handbook to represent handwritten text and headline fonts, and they worked wonderfully for that purpose.
fonts  typography 
june 2013 by siggiarni
Detail in typography < Hyphen Press
Jost Hochuli’s concise guide to micro-typography considers everything that can happen within a column of text.
books  typography 
april 2013 by siggiarni
Typeplate » A typographic starter kit encouraging great type on the Web
Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look.
css  fonts  typography 
march 2013 by siggiarni
Interactive Guide to Blog Typography
Have a blog? With small adjustments, you can noticeably improve its typography. Your readers will thank you for it.
blog  design  fonts  typography 
february 2013 by siggiarni
Using OpenType font features with CSS 3: Part 1 | Fontdeck Blog
At the moment there is no support for that or any other font-variant- properties. However there is one property which is supported: font-feature-settings. This one property can be used to access just about all OpenType features.
fonts  typography  webfonts 
february 2012 by siggiarni
Sarcastic Font
For too long e-mails, instant messages, web pages and documents have been unable to fully communicate the subtleties of sarcasm.
design  fonts  typography 
december 2011 by siggiarni
Font Smoothing
See, subpixel rendering is used for a very good reason. Each pixel on the screen isn’t just one little square of light, it’s actually three stripes (sometimes circles or squares) colored red, green and blue. Each of these subpixels can be turned to different intensities, which allows them to be used for extra detail. So instead of using all 3 simultaneously as one pixel, we use these subpixels individually to draw sharper shapes at very small sizes.
css  typography  webkit 
december 2011 by siggiarni
Font smoothing explained –
Attention to detail is essential for good design. That's why designers spend huge amounts of time polishing borders, textures and other visuals. Arguably the most important area of web design is typography. It's also the area where a designer's control over details is surprisingly limited.
fonts  typography  design 
december 2011 by siggiarni
Build better CSS font stacks
The font stack builder will help you build a better font stack from scratch, but what if you need a jump start, inspiration, or want to build on tried and trusted CSS font stacks? Start with this selection of pre-built font stacks and customise with your own preferred fonts.
css  fonts  typography 
december 2011 by siggiarni
What Should I Look For In a UI Typeface?
I’ve touched briefly before on some typefaces that I consider to be particularly good for on-screen reading. But now I wish to delve further into this realm of typography and consider: What makes a typeface good for screens and UI design in particular?
design  fonts  blog  typography 
november 2011 by siggiarni
Figuring Out Numerals – The Sequel
In this addendum, we look at some special cases in the wondrous world of numbers.
typography  fonts  blog 
october 2011 by siggiarni
Figuring Out Numerals
Back in the days when the character sets of digital fonts were still limited to 256 glyphs, there was only room for one numeral set per font. The most common were tabular lining figures, and one had to use separate fonts
fonts  typography  blog 
october 2011 by siggiarni
Type topics: Glossary
This section provides a small glossary of terms frequently used in the type world.
design  fonts  reference  typography 
september 2011 by siggiarni
Typeface Anatomy and Glossary
Here’s a glossary of common type terminology, which along with the FAQs may answer many font related questions. If the information you need isn’t here, call us.
fonts  typography 
august 2011 by siggiarni
Limited edition design and typography products for refined tastes
Ligature, Loop & Stem offers limited edition products created to delight those who love typography and design. Use them for inspiration or reference as you work… or play.
typography  design  todo  shop 
may 2011 by siggiarni
Dingbats – Test for Unicode support in Web browsers
The characters in this range provide Unicode replacements for those in the ITC Zapf Dingbats font.
fonts  reference  typography  unicode  utf8 
may 2011 by siggiarni
An amusing exercise
Hey all. I had this weird thought: If, in some bizarre alternate history, chatspeak abbreviations like "LOL" had become popular long before there were computers and character sets, they might have, over time, become new symbols, like "et" became "&" and "at" became "@". What might they look like?
design  typography 
march 2011 by siggiarni
A Typographic Anatomy Lesson
Do you know what all the parts of the characters in an alphabet are called? To be honest, although I examine, discuss and write about type on an almost daily basis there still are blind spots in my typographic vocabulary.
design  typography  fonts 
january 2011 by siggiarni
Lesson Plan Print – Ligature, Loop & Stem
Think you know your typographic anatomy? Can you tell a dot from a tittle or an aperture from an ascender at seventy-two points?
typography  fonts 
january 2011 by siggiarni

Copy this bookmark: