Jen makes a great point on her presentation. Where are the awesome layouts that we see in print reflected on the web? We are not tied into the "rectangular boxes" wisdom of the web anymore. We have technologies like shapes, clip paths, masks and many other technologies that make square boxes almost obsolete. Don't get me wrong... rectangles have their place and we shouldn't make all out content replicas of printed material but, Rather than taking the challenges and opportunities of print as a source of ideas and inspirations we became stuck in the Holy Grailhttp://alistapart.com/article/holygrail layout and we'll leave...
Compositing and Blending Level 1http://dev.w3.org/fxtf/compositing-1/ candidate recommendation provides a way to composite elements in HTML and SVG using CSS. Think of the way you can create non destructive clips and masks in Photoshop; the idea is the same but rather than use Photoshop we can use CSS in the browser. We'll look at the basics of CSS Blend Modes and some examples of their applications to text. The specification is supported in Firefox, Chrome and Opera with partial support in Safari and, as far as I can tell, without prefixes according to caniuse.comhttp://caniuse.com/feat=css-backgroundblendmode Getting started One of the first examples...
CSS Shapeshttp://dev.w3.org/csswg/css-shapes/ allow designers and content creators to match some magazines layouts where the text wraps around images and other polygonal and irregular shapes. Why do I include shapes in an essay about typography? As you can see in the examples below, shapes change the way the text relates to the surrounding images. Imagine what we can do with irregular shapes or letters thinking of Dropcap applications.It can also be used to create shapes with text inside the shape this is not part of the level 1 specification and deferred to level 2 which is currently a working draft. !Example...
Depending on the context and the type of text you're using animations can be useful. CSS Animation Level 1cssanimations provides a way to animate CSS properties over time. It uses key frames to create the animations. We will work through an example similar to the Mozilla Developer Network basic animation examplehttps://developer.mozilla.org/samples/cssref/animations/cssanim1.html. The same or similar process can be used for other types of animations. The first thing we do is work setting up the animations in the elements we want, in this case, h1. Also note that we have to set up each attribute twice and maybe 3 times: One...
One of the most intriguing things we can do with text is change its position and the way it looks on the screen with nothing but CSS in browsers that support it. The good news is that all browsers except IE8 and Opera Mini support transformationshttp://caniuse.com/feat=transforms2d so we won't have to do workarounds. !An example of what is possible with CSS shapes and transformations taken from A List Apart's article CSS Shapes 101http://alistapart.com/article/css-shapes-101 by Sara Soueidanhttp://sarasoueidan.com/.https://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/rhombic We'll start with rotating the header of our content 90 degrees and move it down the column. See the Pen CSS Content Rotation -...
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...
