Web fonts are becoming increasingly popular all over the web. Using web fonts allows a site author to include and use specific fonts along with the assets of their websites. Browsers download the fonts with the rest of the site and use them when they finish downloading. Unfortunately, not all web fonts download instantaneously, which […]
In game development there are two methods of rendering text: via bitmap fonts and vector fonts. Bitmap fonts are essentially a sprite sheet image that contains all the characters of a given font. The sprite sheet uses a regular font file (traditionally .ttf). How does this apply to game development on the Web and HTML5 […]
There are so many different situations we can run into here that all require a slightly different approach in styling, so this post will review the typical properties used to tackle such issues and review a couple real-world scenarios that seem to present especially tricky text wrapping/overflow issues.
The Web is a visual medium. The vast majority of that visual landscape is thanks to image files. Whilst plenty can be achieved with CSS, and inline SVG, most sites still need image files. On average, images accounted for more than half of page size last year, and year on year image sizes increase; there […]
Recently I’ve been running into a lot of responsive websites with a lot of performance issues. On most of them, the issues are so evident that they’re almost useless on anything besides the latest generation of smartphones. Considering the fact that responsiveness as a concept is intended to reach a wider audience, this seems rather […]
Tables can be tricky to work with and they aren’t naturally responsive. Chris Coyier has a great write up on CSS-Tricks regarding responsive data tables, and although this addresses most issues, there are a couple that it doesn’t. Primarily, overlapping text on small screens and getting labels to stack vertically when they don’t fit horizontally.
Flexbox and responsive web design go great together, like peanut butter and jelly. Flexbox gives you more control over the things you care about in a responsive layout—like order, alignment, and proportional sizes of your boxes—and lets the browser figure out the rest—the math-y stuff that computers are good at, like the exact dimensions that […]