CSS 3 allows you to create multi column layouts without cheating. According to caniuse.com the feature is supported to some degreehttp://caniuse.com/feat=multicolumn by all browser vendors. We'll explore some of the things you can do with columns and where the limitations are. Please note that these examples use -moz and -webkit prefixes for Chrome. To make sure the column examples work when you make changes you have to change all three values prefixed and unprefixed. This PITA makes columns another great candidate for autoprefixer or a SASS mixin. Finally, because this is still a work in progress, some aspects of the...
Version 3 of SASS introduced the map data type. If you've done work in any other programming type you'll problbly be familiar with maps as associate arrays or hashes; SASS uses the same principle: maps are a collection of key-value pairs. How does this affect typography? Simple: We can build a map to store media query breakpoints and associated font sizes and use those in our code without having to remember what rules we set up and how we SASS Maps Sass script maps are a list of one or more key-value pairs assigned to a variable. We can use...
The orphans CSS property refers to the minimum number of lines of text in a container that must be left at the bottom of the page. This property is normally used to control how page breaks occur. In typography, a widow is the last line of a paragraph appearing alone at the top of a page. The widows CSS property defines how many lines must be left on top of a new page. In browsers that support the properties, widows and orphans allow us to control how content is displayed on multi column layouts and/or printed media. It is a...
Unless you own the typeface or it is licensed through Google Fonts or another free service, you will have to pay for the font and be subject to whatever restrictions the EULA End User License Agreement specifies. This may be a problem when the foundry decides that you don't need a TTF format for the font you just purchased or when you're not allowed to generate an SVG version of your font to use with older iOS devices. I do not mean to say or imply that you should break your license agreement. Quite the opposite; we should be thankful...
Unicodehttp://unicode.org/standard/WhatIsUnicode.html is an ISO international standard ISO/IEC 10646 for the consistent encoding, representation, and handling of text in most of the world's writing systems. It answers the question: How do I combine multiple languages in a single document? In the past we had different encodings for different language codified in the ISO/IEC 8859 series of standards. English, for example, uses ISO/IEC 8859-1 which is mostly ASCII. This is not sufficient to work with eastern European languages that use additional symbols accents and punctuation to fully express the language. See the Wikipedia entry for ISO 8859https://www.wikiwand.com/en/ISO/IEC8859 for more details regarding what...
Open Type fonts have a set of features that make typographical work easier both in print and, where supported, on the web. These features can be enabled. These are a subset of all the Open Type features available. - "c2sc" : small caps from caps: Substitutes capital letters with small caps - "calt" : contextual alternates: Applies a second substitution feature based on a match of a character pattern within a context of surrounding patterns - "clig" : contextual ligatures: Applies a second ligature feature based on a match of a character pattern within a context of surrounding patterns -...
!Kerning from XKCDhttp://xkcd.com/1015/https://imgs.xkcd.com/comics/kerning.png > 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 In this section we will only discuss the second definition of Kerning. We will cover both the built-in CSS kerning features and Lettering.jshttp://letteringjs.com/, a Javascript library that provides enhanced support for kerning and other formatting using CSS. The idea is to adjust the kerning without having to do any refactoring of the content. Automatic kerning in CSS depends on Open, particularly in the kerning...
Given the same font, alignment and hyphenation have a definitive impact on the way we read content and how it appears on-screen \codepen\embed height="691" theme\id="2039" slug\hash="XbabOL" default\tab="result" user="caraya"\See the Pen Text Alignment Possibilities by Carlos Araya @caraya on CodePen.\/codepen\embed\ None of the paragraphs above is hyphenated. Note in particular how the Justified paragraph leaves larger gaps between words to accommodate the justification. It is the same, although not so noticeable, in the other paragraphs. Although CSS support hyphenation using the hyphens rule the support is inconsistent it only works in Firefox. A good alternative is to use libraries such as...
Elliot Jay Stocks presented on Advanced Typography at the Generate 2014 conference in London. It provides a lot of information about this subject. Elliot Jay Stocks -- Generate 2014 conference
Another aspect to consider is the color for your typefaces. This is a very design-dependent step. Were you given a color palette as part of your design brief? Then use those. But if you're planning your own project then you can use the tools below. Adobe Color CSShttps://color.adobe.com/ Formerly known as Adobe Kuler let's you create color sets for your projects. If you use SASS/SCSS you can then turn the colors into variables to use in your CSS. Dudley Storye creataed a color Thesaurushttp://demosthenes.info/blog/927/The-New-Defaults-A-Sass-Color-Thesaurus that makes it easier to see what the colors will look like in the page. We...
