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...
Before we dive into Type selection we'll do a few things: clear terminology and setup some common definitions to work from. The first one is the difference between typeface and font and then we'll dive into a short and incomplete glossary of typographical terms Font versus Typeface I've been guilty of this: use font and type face interchangeably. They are most definitely not the same thing and should not be used as if they are. Typeface refers to the design of the font. Fonts is the media that contains typefaces and allows you to use them in your projects. The...
This is the first of a series of articles on Typography and the potential of text on the web Over the past few months I've rekindled my interest in typography; how it works in print and how it works online. I'm also working through two typography books that are very relevant to both typographic work and overall front end design and development. Responsive Typographyhttp://oreil.ly/1QuoKut by Jason Pamental, On web typographyhttp://abookapart.com/products/on-web-typography by Jason Santa Maria and Professional Web Typographyhttps://prowebtype.com/ by Donny Truong. But it wasn't until fluent that I got a better idea of why typography is important.I got the chance...
One of the most intriguing things I've learned about SVG over the last few months is that we can run CSS, including media queries, inside the SVG file itself so the queries will modify the internal content of the files will change based on the queries inside the svg. Getting started \codepen\embed height="564" theme\id="2039" slug\hash="MwrgJp" default\tab="html" user="caraya"\See the Pen SVG basic examplehttp://codepen.io/caraya/pen/MwrgJp/ by Carlos Araya @carayahttp://codepen.io/caraya on CodePenhttp://codepen.io.\/codepen\embed\ The CSS for the SVG graphic is embedded in the SVG file itself. We copied the SVG file's XML content directly in the pen, but there's no reason why the content cannot...
What would it take to make our books in to applications for the web? In this article we'll explore what is an application, what is a web application, why it now makes sense to turn our books in to web applications. What is an application? What is a web application? > Application software an application is a set of one or more programs designed to permit the user to perform a group of coordinated functions, tasks, or activities. Application software cannot run on itself but is dependent on system software to execute. Examples of an application include a word processor,...
We'll borrow a play from the SVG playbook for this post. We'll use clip path to generate masks around an image to control what the user gets to see and what shapes the image takes without changing the image itself. We'll look at the process and then we'll build an e-book with examples to test if this works with iBooks and whatever other reader you want to test with and how can we better leverage the feature in our reflowable projects. CSS clip-path CSS clip-path attribute is the star of the show either in CSS, via SVG or a mix...
