Layout Experiments

Examples, Demos and Projects

Top

Index: This page. First experiment placing content in a grid.
Demo 1: Ichi-Go Ichi-E: The basic document I'll be working with.
Demo 2: Text in masthead: This is my version of the text covering part of the masthead image.; I chose not to brek the content into multiple sections but chose to change the background color of the content div to match that of the document background.
Demo 3: Vertical Title: Take the title content and use writing modes to place it verically in browsers that support the CSS rules. I've used feature queries to check that the browser supports writing-modes.; We use feature queries (@supports) to test if the browser supports writing modes. If it doesn't then we leave the title on top of the image and switch the color to white.; This demo currently only works in Firefox (tested with Firefox Nightly).
Houdini Gradients: Gradient demos using Houdini APIs. The example gradients uses CSS.registerProperty() to define a --stop-color property that is used in the stylesheet to create a gradient. We then create a hover state for each gradient and animate that.; Currently only works in Chrome 67+
CSS Filters: Creating effects with CSS is not as complex as it used to be (they don't require SVG) and they are fairly easy to set up. Set an initial filter (grayscale in this case) and then set an effect that will work on hover (remove the grayscale effect to reveal the original color).; One further area of exploration is combining different filters to test the results.; CSS only solution hover only works on desktop machines. Mobile devices don't have a hover state and require Javascript or Pointer Events to work consistently accross devices.
Do weight, width and line height affect readability?: Using Roboto VF implementation I've configured a quick experiment to prove the hipothesis. There are 4 blocks of text at different widths and one with multiple columns and 3 variables you can adjust (font weight, font width and line height).; The idea is that we can take the values and plug them in to our production stylesheets as a starting point for further experiments.; Also, please forgive the code... I know it's messy but it's the first time I do sliders to control CSS from Javascript.; This currently doesn't work in mobile. Researching the reasons and suspecting Mobile Safari and iOS stack for it. It did not work on iPhone X.
Blending Colors Example: The web allows you to create many of the graphical effects that we see in magazines and other printed media. Based on the pen Vertical split layout text effect by Mandy Michael. I started playing with the idea of using the effect for headings or other highlighted elements.
Blending Text and Images: Code adapted from the article on The New Code by Dudley Storey about creating text masks using blend modes.; This may not work in older browsers that don't support blend modes. This example prioritizes text over the image.
CSS Houdini Image Place Holders: Using a demo from Will BoydI built a mock of a Wikipedia page using his placeholder boxes to mock the placement of the images.; Yes, I know I could use SVG to do so and it may be a good idea when working with Service Workers to provide a good offline fallback but this way I can play with the dimensions of the place holder and see how it looks at different dimensions before deciding on the final image.
Bibliotype 2: A prototype of a long-form web reader. Based on Craig Mod's original Bibliotype project, this new version attempt to use modern technologies such as variable fonts, CSS variables and ES2015 to create a customizable reading experience.
Does vertical text affect Grid Layout?: When using writing modes to layout text, does it affect the way Grid layout works? I've prepared some Japanese Lorem Ipsum text and laid it out using the same grid layout I created for Ichi-go Ichi-e.; I need to do more research to see what looks normal for Japanese readers using vertical layouts as opposed to the rtl horizontal layout that I've seen the most.; Another area to explore will be to search and copy mixed layouts of vertical and horizontal Japanese layouts.
CSS Custom Properties: What I call CSS Variables on Steroids. It allows for much better, error tolerant, CSS variables.
Deep Dive on Variable Fonts: Now that Roboto is an almost official variable font. It's worth taking a look at what it does and how it can make our designs better and provide a better user experience.
Verge-style list: Borrowing the story stream styles from an Avengers 4 article in The Verge I want to test different ways to create list items with more than a single line per item.
Fonts in titles: The idea is to see how different fonts look for headings. I'm also curious as to how text-shadows work with the different fonts.; This is inspired by the title of The machine that won the war — V2.
Rise UP card: Inspired by Hamilton and a t-shirt I saw Lin Manuel Miranda wearing, I thought I may try to copy the design while, at the same time, exploring different uses of color… particularly bright primary colors.; I'm not quite sure that abusing left to right reading mode accomplishes the goal I set out, but it's a good starting point; The font used is Bebas Neue, which I'm starting to like a lot for larger display type work. Depending on the task I may also consider using Marvin.
Example Title with Lettering.js (jQuery version): Based on a section from James Williamson's CSS: Advanced Typographic Techniques course in Lynda.com (now LinkedIn Learning).; It uses: z-index positioning, text shadows, and positioning with margins.; Yes, it uses jQuery and, for this particular demo, I don't reaally care it does. For a production application of this I'd probably use a non-jQuery version of this.
Nested Flexboxes: This layout uses two kinds of flex boxes, an outer one to control vertical alignment and an inner one for each item that lays out the content in rows.; The content is videos of scenes from Aaron Sorkin's The West Wing and The Newsroom alongside textual descriptions of the scenes and why I like them.
CSS-only Parallax: Experimenting with Parallax effects without using Javascript
SVG Sprite Buttons Demo: Code demonstrating my article Creating svg sprites. I originally posted the code in Codepen but links to Instagram and Facebook did not work (both sites refused connection) so I moved it here to make sure it works.

Full Layouts

Top

The projects and demos in this section are more realized and use different CSS and Javascript techniques.

Demo 4: Two column Floater: My attempt at creating a document with a single image on one side and scrolling text on the other. The first attempt is a single column of text using an actual article from eldesconcierto.cl
Book Chapter with Roboto VF — V1: Using a manual transcript of chapter 73 of Rayuela, I built an example of what a page of that book may look online. A next step will be to test is different starting width for the content impact the reading experience.
Book Chapter with Roboto VF — V2: Using a manual transcript of chapter 73 of Rayuela, I built an example of what a page of that book may look online. This version makes the content narrower.
Magazine Interview: Using a web magazine article from a Revista Paula I started formatting it to see if we could make it look good using a single variable font and grid.; I'm discovering some of the problems with stretching images into a grid container. I cannot make it stretch on both ends, so I've had to come up with an alternative while I research the reasoning why this happens.
Lo Secreto — María Luisa Bombal: Experimenting with longer form content and Variable Fonts to see how we can make the text speak in its own voice.; Since we're using Roboto only for headings and accents I've subset it to use only the characters that we use in the page. That dropped the size of the file from almost 1MB (1008KB to be exact) to under 30K! For this site it might not make that much of a difference since the service worker caches the fonts but for larger projects or those that don't use service workers it's an important consideration.; Thanks to Jason Pamental for help in getting the body font working.
Soneto XVII — Pablo Neruda: Typesetting poetry is hard. Grid makes it easier to position the body of the poem (left side in Spanish and the right side in the English translation) but there are a few issues that remain like how to do indented text on lines after the second one and other typographical tricks used in poetry without polluting the page with marup that we shouldn't use.; I'm still exploring possibilities… one of them may be to use preformated text and style it with our default font for copy. I know it breaks the semantic meaning of the pre element but it might be a good time to break the rules… I think.
Multi Column Layout: Inspired by a tweet from Dudley Storey I decided I wanted to see what would a multicolumn layout would look like now.; This layout would greatly benefit from regions or some other kind of fragmentation layout but until the Houdini Page API comes out in browsers we'll have to continue waiting.; Another detail to note is that I broke the text into two different regions using the same class for the multicolumn content. I should be able to do it with a single multicolumn class and an image that spans all columns.
The Crystal Goblet or Printing Should Be Invisible: Typesetting incorporating drop caps for the first paragraph. I'm starting to look for other fonts to play with in addition to Roboto, Avenir and Source Serif.
Profession — Isaac Asimov: Working with a novella-size document presents its own set of challenges. How will people read the content? How will people navigate if the have to take more than one time reading?
Poema 6 and Poema 19 by Pablo Neruda from Veinte Poemas de Amor y una Canción Desesperada: Two experiments using flexbox to center content both vertically and hortizontally using only CSS and without modifying the content.
Flexbox Gallery: The simplest way to create an image gallery using Flexbox.
En ti la tierra — Pablo Neruda: Playing with color and additional fonts. Does color (beyond contrast) affect the way in which we read on the web?
The last question — Isaac Asimov: Using Spectral as the Serif body font and Raleway for headings. I'm still working on getting the right mix for short to medium length, single page readiing experiences.
Franchise — Isaac Asimov: An experiment using Neue Montreal from Pangram Pangram Foundry and Skolar from Roseta as I continue searching for good font pairings.; The experiment uses the font loading API to load the fonts and CSS to manage the display
The Machine That Won the War — Isaac Asimov: An experiment using Neue Montreal from Pangram Pangram Foundry and Skolar from Rosetta Typeas I continue searching for good font pairings.; The experiment uses the Font Face Observer to manage font loading and CSS to control layout and display. Skolar is downloaded via Adobe Typekit/Fonts.
What survives disaster: An article from the Bay Area Now 8 exhibit at the Yerba Buena Center For The Arts it attempts to duplicate the printed version of the catalog. I'm working on details and how to make some printed items work in web layouts.
The machine that won the war — V2: Rework on my original version using different fonts: Marvin Visions for the headings and ITC Stone Humanist for the text; The heading also uses color and text shadows to give it more "punch" than a standard black heading would. Still playing with color/shadow combinations to see what works best. But I think it's a good starting point.
Keeping time — Kinfolk: This article first introduced me to the concept of Ichi-go Ichi-e and Mono no aware. The idea is to see how close I can get it to the print layout without loosing the responsiveness inherent to the web page.; The article was transcribed from Kinfolk Magazine, issue 8.
The Dying Night — Isaac Asimov: A different text using Marvin Visions for the headings and Lekton for the text; I like Lekton as a thiner font and think it's a good starting point for font pairings… and the more I use Marvin the more I like it :D
All The Troubles In The World — Isaac Asimov: This story is set with Cutive, a serif font that reminds me of the IBM typewriters that I learned to type on when I was younger. Again, I'm tyring to figure out how the font speaks and what does it say.
The Machine Stops — E.M. Forster: Another one of my favorite science fiction stories. This one is setup in Futura PT.
A Sound of Thunder — Ray Bradbury: Using Montserratt for headings and Inconsolata for the text. It's a time travel story that changes the present so a monospaced font for a different kind of typewriter effect feels appropriate.
Towards the splendid city — Pablo Neruda — V1: First take on typesetting Neruda's Nobel lecture using Roboto. I'm not sure I like it but it's a good starting point before I review the fonts and the way images are set in the document.
The Feeling Of Power — Isaac Asimov: Story uses Hermann (yes, caved in and bought the font while it was still on sale :)).
The Value of Failure — Middlebury Magazine: Uses a variety of techniques to create as close a clone of the original. Some of the techniques: Nested flexbox layouts, first-line and first-letter and :last-child pseudo classes, and Open Type features. It's also an exercise in creating (S)CSS that is usable multiple times in the same document.; It uses Hermann as the copy and heading font.
Foundation's Triumph — David Brin: Integrating inline SVG text with styled text. The inline SVG uses inline styles and explicit positioning of the different text blocks.
How to Move Spheres and Influence People — Marko Kloos: More font pairing experiments.
La Biblioteca de Babel — Jorge Luis Borges: Borges is one of my favorite Latin American writers. This also uses Stone Humanist for copy.
Academy Leader — William Gibson: I've been interested in Roslindale ever since Jason Pamental used it in Responsive Web Typography. I'm considering getting the variable font for it and use it as the main font for this project.
Hacia la ciudad espléndida — Pablo Neruda: Neruda's 197 Nobel Acceptance Speech in Spanish. Uses Crimson Pro and Hepta Slab variable fonts from Google Fonts using their new API. It also uses grid to make it easier to layout the content.
Foundation’s Conscience — George Zebrowski: The first of four stories from Foundation's Friends that I chose to typeset. Uses Crimson Pro and Hepta Slab variable fonts from Google Fonts using their new API.
Trantor Falls — Harry Turtledove: The second of four stories from Foundation's Friends that I chose to typeset. Uses Literata variable font from Google Fonts using their new API.
The Fourth Law of Robotics — Harry Harrison: The third of four stories from Foundation's Friends that I chose to typeset. Uses Markazi Text and Hepta Slab variable fonts from Google Fonts using their new API.
The Originist — Orson Scott Card: The last story from Foundation's Friends that I chose to typeset. Uses Roboto variable font. I wanted to test the latest changes Chrome and other browsers have made to @font-face declarations to acommodate Variable Fonts.
Words Of Wisdom — Chief Tecumseh: I'm testing to see how handwritten fonts work for web. I picked something I first heard at the end of Act of Valor. The page uses Shadows Into Light from Google Fonts.
El enigma chileno — Mario Vargas Llosa: An article in Spanish to test if the type of text influences how fonts are perceived by the reader. The page uses Shadows Into Light from Google Fonts.
Manifesting Absolute Reality — Dogen: Uses Open Sans and PT Serif to test the combination of Serif and Sans Serif fonts for heading and copy text.
TimeLine for the Robots & Foundations Universe — from Isaac Asimov: Styling a table with CSS is a PITA. This is my first attempt at styling a table using CSS instead of inline attributes.
Asha Tyson Quote: Experimenting with larger display type and quotes.
A nice morning drive — Richard S. Foster: The inspiration for Rush's Red Barchetta, the story was first published in Road and Track in 1973.; In this layout I've played a little with font weight to make the foont a little lighter and easier to read.; In memory of Neil Peart (1952 - 2020)
Girlfriend in a Coma — Emily V. Gordon: Sometimes the worst situatuibs can bring the best in us and the best for us.
Neruda entre nosotros — Julio Cortazar: An interesing essay about Neruda.

Tools

Top

Most of these tools are Javascript based so I may have to start thinking about concatenating scripts and evaluating what are the best ways to deliver scripts and stylesheets when working with Service Workers in an HTTP2 environment.

Font Face Observer: Font Face Observer gives you control over web font loading regardless of where your fonts come from: host them yourself, or use a web font service such as Google Fonts, Typekit, Fonts.com, and Webtype.
Rellax: I'm exploring using Parallax in a few experiments so I've been looking at what may be the best tool for the use cases I want and, so far, Rellax seems to be the best.
The New Defaults: A Sass replacement for the standard CSS keyword color system. Provides more visually appealing hues for many CSS keywords; adds new colors with more relevant and easily remembered names. Inspired by Ingrid Sundberg’s color thesaurus and the work of Adam Morse. The New Defaults GitHub repo. By @dudleystorey.
GSAP JS: While we can do a fair amount of animations with CSS alone there are times when we need the heavy hitter tools. That's where GSAP comes in.
Zenscroll: Since I decided to use navigation links I wanted it to scroll smoothly up and down. I like the way that Zenscroll doesn't require configuration for a basic setup like the one I use here.
T-Writer.js: Typewriter effects are fun and intriguing and worth some this particular library makes for very intriguing effects.
Lettering.js: A jQuery plugin to control individual letters, words and lines for better typographical effects. Only problem (from my perspective) is that it requires jQuery and that's something I'm trying to avoid.
FitText.js: This jQuery plugin makes the associated text fluid. As with Lettering.js, my only problem with the plugin is that it requires jQuery and that's something I'm trying to avoid.
No jQuery Lettering by Jeremy Keith: A small non-jQuery alternative for Lettering.js
No jQuery FitText.js: Non-jQuery alternative for FitText.js
GSAP: Following Sarah Drasner's advice I tried GSAP and fell in love with what it does and how easy it is to work with.

Inspiration and Ideas

Top

Bibliotype: One of the earliest ideas on digital publishing outside closed ebook ecosystems. I've been wondering how much more we can do with web technologies as they exist today as opposed to what was available in 2011.; Demo at http://caraya.github.io/bibliotype/
Variable Font Demos by Jason Pamental: One of the first collections of applications of Variable Fonts.
Variable Font Demos by Mandy Mitchell: Another collection of experiments using Variable Fonts.
The work of Rachel Nabors: I think I fell in love with her web animation work when I heard her speak at SFHTML5.
The work of Sarah Drasner: Starting with her work with SVG animations and her SVG Animations book she has always impressed me with her skills and how she can translate complex animation work to easy to understand concepts.
The experimental layout lab of Jen Simmons: I first saw Jen's work at An Event Apart and have always been intrigued by how they work. This project is, in a way, my take on what she has done.
8 Faces: Collected by Elliot Jay Stocks: Fell in love with the book when I saw the earlier galley proofs. It's a constant source of ideas and layouts.
The New Code by Dudley Storey: Dudley does an awesome work of explaining really coole techniques and processes in a way that people who may not be highly technical can understand and use.
Book Cover Archive: Source of references and ideas for playing with fonts and layouts.

Fonts and Font-related tools

Top

Roboto VF: A variable font implementation of Roboto, the default font for Material Design and other products. This is a completeimplementation and it seeks full parity with the regular Roboto font from Google.
WOFF2 compressor: A tool that will compress TTF or OTF fonts to provide smaller file sizes and faster downloads. When compressing Roboto (see above) it provided better than 50% file size reduction.
Glyphhanger: The best way to reduce a font's size is to remove all characters that we'll not use. This is extra important when working with large fonts that support non-latin languages.
Axis Praxis: Axis Praxis was the first site that showed me what Variable Fonts can do.
Wakamainfondue: This tool works with Variable fonts and it shows you what the font can do, creates special CSS for you to use in your documents when working with the font and gives you the CSS to download for your own projects :).
Variable Fonts: Variable fonts is another playground for Variable fonts. What distinguishes it is the number of fonts available and the ability to play with the custom axes for each font and see the results on the same page.
MDN Variable fonts guide by Jason Pamental: I met Jason a few years ago at Fluent and have followed his typography work since. He does a very good and detailed work of explaining and show what variable fonts are and how they work.
An Exploration of Variable Fonts: More variable fonts
CSS Fonts Module Level 3: The current candidate recommendation for fonts on the web.
CSS Fonts Module Level 4: More recent work on web fonts, including support for variable fonts and font synthesis.

CSS Paged Media

Top

CSS Paged Media provides extensions to CSS 2 and CSS 3 modules that will allow them to work in generating high quality printed PDF or good masters for printers to work with. The best example I've seen is Lea Verou's CSS Secrets that was created as HTML and then printed using CSS Paged Media.

Browser support for Paged Media and Generated content for paged media is slim so we have to use third party tools like PrinceXML, and Vivliostyle neither of which are free :(

CSS Paged Media Module Level 3: The specification that dictates how most of the content will work when we create printable versions of our web pages
CSS Generated Content for Paged Media Module: Handles generated content like page numbers, sequential numbering and others.
PrinceXML: The first and, in my opinion, the best tool to work with CSS Paged Media.
Vivliostyle / Trim-marks Inc.: Another CSS Paged Media conversion tool.

Reference Books and Sites

Top

CSS: The Definitive Guide: The latest version of my favorite CSS book. Eric Meyer and Estelle Weyl do a very thorough and exhaustive analaysis and explanation of CSS and its different components.
The Experimental Layout Lab of Jen Simmons: I love the work Jen has done in teaching, writing and demoing web layout technologies.
The New CSS Layout
Grid By Example: Awesome resource to learn about CSS grid.
The Elements of Typographic Style Applied to the Web and Web Typography, the book it originated: These two projects take Robert Bringhurst’s The Elements of Typographic Style and applies its principles to working in the web and with web content.
Responsive Typography by Jason Pamental: Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography?
Flexible Typesetting by Tim Brown: I've always thought of typography as part of the design proces not as first step in working the content in to your site or app. Reading this book is making me think morre about the text I'm working with and how to provide a good reading experience.
On Web Typography by Jason santa María.: This, to me, is the original typography book. It's a great reference for typography on the web, both the technical and the human side.
Webfont Handbook by Bram Stein: This is a more specific book on using web fonts.
Introducing Variable Fonts: Good technical introduction to Variable Fonts. Not for beginners.
Introduction to variable fonts on the web: This article by Mustafa Kurtuldu (Design Advocate at Google) does a good job of introducting variable fonts without the technical language from the previous article. It also introduces the CSS needed to make variable fonts work on browsers.
One File, Many Options: Using Variable Fonts on the Web: CSS Tricks article on Variable Fonts. It's the gentlest introduction article I've found, so far.
A New Canon: A good design philosophy article.