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...
Media queries are a part of the progressive enhancement process. Using Media Queries Specificationhttp://www.w3.org/TR/css3-mediaqueries/ and first public draft of Level 4 extensionshttp://www.w3.org/TR/mediaqueries-4/ you can use a single CSS style sheet to work with multiple devices. At its most basic, a media query tells the browser to change selectors and attributes based on a certain value or to load or not load a specified resource. For example, you can use media queries when loading a stylesheet with a link element: css In this query, The user agen test is the the user agent is 800 pixels wider or narrower and, if...
Headings serve as the visual representation of our content and, as such, they deserve special consideration. We'll discuss whether to use the same font as our body or whether it's better to use a different one, and some things we can do with heading text. I wish I could tell you exactly what fonts to use but, as with many things type-related, it'll depend on many factors. Let's look at what the possibilities are. Same or a different fontface? One of the questions that always baffles me is whether to use the same font for headings as I use for...
Most the time we spend engaged with text is with paragraphs and that's where I put a lot of my research time when working on a new project. You may be asking why put so much work on how the paragraphs look... As you will see in the example below there are many elements that are involved in controlling paragraph appearance. See the Pen Playing with paragraph type by Carlos Araya @caraya on CodePen. With the content above we can now start playing with type. Do the following activities to get a feel for how much type can change: 1....
Now that we have a better idea of what fonts we want to use and the font stack we'll see how to load them into the page. We'll explore 3 ways: local loading using the @font-face syntax, loading fonts using the Google font APIhttps://developers.google.com/fonts/docs/gettingstarted, using Google's Web Font Loaderhttps://github.com/typekit/webfontloader/blob/master/README.md and a new tool called Font Face Observerhttps://github.com/bramstein/fontfaceobserver/blob/master/README.md @font-face We have been able to use fonts on our web content since the days of IE 3 3.5 for Macintosh if I remember correctly but we've always had to contend with font creators and foundries fear of piracy. It's only recently that...
All type shares characteristics. We'll look at some of them before we dive into selecting font stacks and other type related element. As we move along we'll discover that these elements are all interrelated and that changing one of these elements will force changes in others too. !Visual representation of type related terms//publishing-project.rivendellweb.net/wp-content/uploads/2015/06/font-terms.png Visual representation of type related terms X-height When you look at your text what is the size of the lowercase glyphs/letters to uppercase? In different fonts the height of lowercase glyphs measured by the x-height can be different, some of them being barely half the uppercase height...
