Fonts matter more than we may realize; they’re as important a choice in determining the visual impact and informational flow of a web page as the color scheme or the navigation layout.
If we want to make the web better for people then the most important thing that we can do is to learn the basics. Not of technology, but of our fellow humans. Because, as we’ve show earlier, empathy is the most important skill that a developer can have. Our job is 100% about people, about our fellow humans. How can we do an amazing job for them if we don’t understand who we are building for?
COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love
One of the most common questions I receive from beginning UI designers is: what font size should I use for my project? Maybe it’s a website, maybe an Android app, maybe iPhone/iPad. Ever wish someone had compiled all the rules in one place?
The act of choosing two typefaces is probably the first (and often most difficult) task you do when creating a new design. Many people get stuck here, myself included. Recently, I discovered a simple method to pair typefaces effectively and I'd love to share them with you. (Hint: it's a 3×3 grid).
Until now, chances are that if we dropped text onto a web page in a system font at a reasonable size, it was legible. But with many typefaces about to be freed for use on websites, choosing the right ones to complement a site’s design will be far more challenging. Many faces to which we’ll soon have access were never meant for screen use, either because they’re aesthetically unsuitable or because they’re just plain illegible. Jason Santa Maria, a force behind improved type on the web, presents qualities and methods to keep in mind as we venture into the widening world of web type.
With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.
Build website interactions and animations visually — without writing code. Add parallax scrolling effects, mouse based motion, and multi-step animations without learning CSS and JavaScript.
glamorous is React component styling solved with an elegant (inspired) API, small footprint (<5kb gzipped), and great performance (via glamor). It has a very similar API to styled-components and uses similar tools under the hood (glamor).
Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! The CSS Grid Layout Module introduces a native CSS grid...
This April we have prepared for you a wonderful list of web dev resources, including some React libraries, a framework for cross-browser extensions, and a JavaScript physics engine!
Unfortunately Twitter is not ideal for providing context and longer explanation, and I thought this might be a good way to follow up. Given that, a lot of this article describes what led to our…
I recently worked on defining the spacing system for Practice Fusion’s EHR (Electronic Health Record) product, to ensure improved readability and consistency across all pages. I came up with 3 spacin…
By adopting inline styles, we can get all of the programmatic affordances of JavaScript. This gives us the benefits of something like a CSS pre-processor (variables, mixins, and functions). It also…
Today, CSS preprocessors are a standard for web development. One of the main advantages of preprocessors is that they enable you to use variables. This helps you to avoid copying and pasting code, and it simplifies development and refactoring.