As I've played more and more with fonts, both in terms of trying to find good pairings and looking at different serif fonts for body copy. Reading issue 61 of Coffee Table Typographyhttps://www.getrevue.co/profile/coffeetabletypography/issues/61-interpunct-for-the-future-145914 brought some display fonts for titles to my attention. It also raised some interesting questions about the voice of a text and how do we convey that voice through typography and other elements specific to the web when crafting type and reading experiences online. !Two covers from Alfred Bester Novels using Serif Gothichttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/alfred-bester-covers There are fonts that call immediate evoke a certain mood or feeling. Look at...
Cutting the mustardhttp://responsivenews.co.uk/post/18948466399/cutting-the-mustard is a term first defined by the BBC to explain how to test if a browser supported the features needed to run a web application. In the example below, we need to make sure that the browser supports query selectors, local storage and event listeners before we can build the app with these features. The traditional code works like this: js if'querySelector' in document && 'localStorage' in window && 'addEventListener' in window { // bootstrap the javascript application } I've also seen it converted to a function for ease of writing. We first define the items that...
I've always been interested in interactive stories. At first, I thought we may be able to use the locations as portals to 3D environments and collaborative experiences. A few days ago as I write this I saw Inside The Silent Historyhttp://contentsmagazine.com/articles/inside-the-silent-history/ and it made me think perhaps there is another way to look at telling stories on the web. Using a combination of Geolocation, multimedia and well-typeset content authors can drastically change the way they tell stories online. In this post, I will explore some ideas of what these stories can look like and what tools we can use to...
I wasn't aware that there is a completely separate standard for ECMAScript internationalization ECMA-402 or the ECMAScript 2019 Internationalization API that goes beyond the core specification and covers internationalization in a lot more detail than the main specification can. I came across this spec through a post from Mathias Bynenshttps://twitter.com/mathias about a new internationalization API available in Chrome 71. The API makes creating relative time strings like '1 week ago' or 'in 2 weeks' easier and faster since it's a part of the proposed internationalization spec. I've used moment.jshttps://momentjs.com/ but it's a beast in terms of file size 16.4K for...
Performance is one of the hottest topics and, in my experience, one of the hardest to get right. There are tools that will help developers measure and improve a site's performance. The idea behind Lighthouse is that by running it against your site, either staging or production periodically you can get a good overview of your site's performance in the categories that lighthouse measures. It will give you a baseline to measure against, find areas to improve on and track any regression that may have snuck by your testing. Lighthouse Lighthouse is an automated tool for improving the quality of...
While at the Chrome Dev Summithttps://developer.chrome.com/devsummit/ I learned several things that made me really happy, one of them is about video: You can play AV1https://aomedia.org/av1-features/get-started/video in browsers currently Chrome, Opera, Firefox, and Edge using the video element. Firefox and Bitmovin have had a demo for AV1 playbackhttps://demo.bitmovin.com/public/firefox/av1/ for a while but it's hardcoded to play in Firefox nightly so it wasn't a good way to test playback capabilities. The supported browsers each come with caveats. - As of this writing, AV1 supports only works in Firefox Nightly - Must enable media.av1.enabled in about:config - Works in Chrome 70 and newer...
During Chrome Dev Summit I learned an interesting trick when working with variable fonts. Rather than use the default values for the font properties you need to specify the boundaries upper and lower for each font property: weight, width, and style. Using Roboto and its values as an example, the @font-face declaration looks like this css @font-face: Roboto; src: url'../../fonts/Roboto-min-VF.woff' format'woff' url'../../fonts/Roboto-min-VF.woff2' format'woff2'; font-weight: 250 900; font-width: 75 100; font-style: -12 0; We can then use the attributes as we would normally do but using the values in the range we defined in the declaration: css .semibold { font-weight: 575.25;...
For most of my web work, I use Font Face Observerhttps://fontfaceobserver.com to handle checking that the fonts have loaded. Using the following @fontface declarations: scss @font-face { font-family: 'Roboto'; src: url'../../fonts/Roboto-min-VF.woff2' format'woff2'; font-weight: normal; font-style: normal; font-display: swap; } I can use the following script to make sure the font loaded and provide a fallback when it doesn't. Assuming that fontfaceobserver.js is already loaded I use the following script to add classes based on whether the font loaded js const roboto = new FontFaceObserver'Roboto'; let html = document.documentElement; html.classList.add'fonts-loading'; Promise.all roboto.load, .then => { html.classList.remove'fonts-loading'; html.classList.add'fonts-loaded'; console.log'All fonts have loaded.';...
Using the default fonts for the operating system saves bandwidth we don't have to download the font since it's already installed in the system and improves performance fewer assets to download but it requires testing in all the platforms you're targetting. These are not the browsers you're targetting, those may have their own issues when working with system fonts particularly Chrome on Mac that needs a special declaration for the system font. The browser looks for each successive font and will use the first font that it finds either on the system or defined in CSS. The font-family declaration looks...
For most of the web's content whitespace is not significant. Browsers will collapse multiple spaces or tabs into a single space and will only insert line breaks when they encounter the element or at the end of a paragraph either with the closing tag or when they encounter a new element. But there are times when whitespace is significant. Take poetry... depending on the type of poem you're typesetting you may find different indentations and characters in different columns and things like that A summary of the ways to handle white space is shown below taken from CSS Trickshttps://css-tricks.com/almanac/properties/w/whitespace/ |...
