The Designer’s Guide to Letter-Spacing

Original Source: https://www.webdesignerdepot.com/2020/07/the-designers-guide-to-letter-spacing/

Most of the information we consume happens through reading, so it makes a lot of sense to pay attention to the words when designing. There are many aspects to typography, but one of the things that helped improve the quality of my design was letter-spacing.

Letter-spacing is about adding and removing space between letters. Some people confuse it with kerning, but these two are different; letter-spacing affects the whole line of text, whereas kerning adjusts the space between two individual letters at the time. Kerning is best left to type designers, besides which, unlike letter-spacing there is currently no way to control kerning in CSS.

I believe that practice and a lot of observation will change the way you treat letter-spacing in your work as well.

The Purpose of Letter-Spacing

The main purpose of letter-spacing is to improve the legibility and readability of the text. Words act differently depending on their size, color, and the background they are on. By adjusting letter-spacing to the environment you are working with you will help readers consume your information faster, and more efficiently. The fun part is that they won’t even notice it — that’s the whole point of the job.

Bear in mind that typographers think about letter-spacing and kerning when designing a typeface. It means you don’t have to apply it to all your text, but in order to have an understanding when it’s necessary, you should know some basic principles, and use good typefaces.

How Letter-Spacing Affects Legibility and Readability

The legibility and readability of your text depend on things like line-height, paragraph length, font size, typeface choice, letter-spacing, and much more. Regarding letter-spacing, if you are just getting into typography, the best thing you can do is not overuse it. What I mean by that is simply don’t make the distance between letters too big or too small; even if you think it looks good, people will struggle reading it, and that will ruin their experience.

Letter-Spacing Capital Letters

Capital letters are designed with the intention that they will appear at the beginning of a sentence or proper noun, in combination with lowercase letters. When capital letters are next to each other, the space between them is too tight. So in order to achieve better readability, space needs to be increased. This applies to both large and small font sizes.

Letter-Spacing Headlines

If you are using well designed fonts, you can be sure that they are calibrated well, and you won’t need to make any major adjustments to them. However, the problem with headlines is that at larger scales the space between letters looks unbalanced. It can be fixed by increasing or decreasing the letter-spacing value.

There are no strict rules for letter-spacing — there are a lot of typefaces and all of them require an individual approach — but if you look at how big companies like Google and Apple treat their typefaces, you can find a lot of valuable information there.

Let’s take a look at the “Roboto” and “San Francisco” typefaces (the first one is used in Material Design and the second one in Apple’s ecosystem). Headlines from 20 to 48 pixels have either a positive letter-spacing value or none. If the font size is bigger, letter-spacing becomes negative. These exact numbers are not going to work that well for other typefaces, but after trying different approaches I can state that it’s a common pattern.

I’ve tested several guidelines for letter-spacing and the one that was published by Bazen Agency works for a lot of popular typefaces. It will be a good starting point for you, but you can always apply additional adjustments:

H1 — 96px — -1.5%
H2 — 60px — -0.5%
H3 — 48px — 0%
H4 — 34px — 0.25%
H5 — 24px — 0%
H6 — 20px — 0.15%
Subtitle — 16px — 0.15%

If you happen to design a lot of apps or you’re planning to do that, one thing that helps me is using the default Material Design and Apple guidelines for their typefaces. They are well balanced and it saves a lot of time.

Letter-Spacing Body Text

If you ever read anything about letter-spacing, you’ve probably have seen this popular wisdom from typographer Frederic Goudy: “Anyone who would letter-space lowercase would steal sheep”. (There’s an argument that he was only referring to blackletter fonts.) Some designers took it as a hard rule and now never adjust the letter-spacing of lowercase text.

Based on my practice and by looking at the work of designers I can’t agree with Goudy, because sometimes small changes can make a big difference in how your text performs. Let’s take, for example, condensed fonts. At a small size, the letters are too close to each other, which leads to poor legibility. By increasing letter-spacing by 1.5% you will see that the text is now easier to read.

If we look at my previous example, in the guidelines for “Roboto” and “San Francisco” typefaces, letter-spacing is applied to body text; even though San Francisco has a dedicated “SF Pro Display” for headlines and “SF Pro Text” for body text, letter-spacing is still used to refine them.

There are a lot of different typefaces and a single rule doesn’t apply to all of them. Experiment with letter-spacing and do what seems right to you. There are some simple guidelines that will lead you in the right direction, especially when working with body text:

Keep in Mind Line-Height

If you have a line-height greater than 120%, most likely negative letter-spacing will lead to an unbalanced look to the paragraph. To refine it you would need to either keep it at 0% or only slightly increase it.

Light Text on Dark Background

On a dark background, white text looks overexposed and therefore letters appear too tight. To make it more legible, I would suggest you increasing letter-spacing a small amount.

General Values for Body Text

You can use the following guidelines for body text, which I have tested with several typefaces:

Body 1 — 16px — 0.5%
Body 2 — 14px — 0.25%

Letter-Spacing Captions

Unlike headlines and body text, smaller font sizes don’t have many variations in letter-spacing. It’s a common practice when a font size is lower than 13px to increase the space between letters to make it legible. But there are always exceptions (“SF Pro Text” guidelines suggest using positive letter-spacing only when a font size is 11px or below). Make sure you experiment with settings.

You can use the following values as a starting point and then edit them to what seems right to the typeface of your choice:

Caption — 12px — 0.5%
Overline — 10px — 1.5%

Final Tip

One of the things that helped me improve my skills in typography was looking at other designers and especially type foundries. By decoding their work you might notice some nuances of how they treat typography and it will help you in future projects.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Collective #613

Original Source: http://feedproxy.google.com/~r/tympanus/~3/GPg4O2tdytc/

Inspirational Website of the Week: makemepulse

Makemepulse challenges the laws of physics by being razor sharp and smooth as a feather at the same time. Our pick this week.

Get inspired

Our Sponsor
Be: 500+ pre-built websites for ANY kind of project

Now comes with Elementor and dedicated Elementor pre-built websites.

Discover more

Ten modern layouts in one line of CSS

A post by Una Kravets that highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.

Check it out

Lights and Shadows

Bartosz Ciechanowski’s interactive journey into the world of light and how it interacts with different objects.

Read it

The Cicada Principle, revisited with CSS variables

Lea Verou shows some amazing examples of the Cicada Principle with CSS variables.

Check it out

Accordion Rows in CSS Grid

Eric Meyer shares the way he’s using CSS Grid rows to for more layout flexibility.

Read it

viewBox

A newsletter with tips, demos, articles and a monthly challenge all about the magical world of SVG! By Cassie Evans and Louis Hoebregts.

Check it out

WebGL with Three.js Program

Bruno Simon has started working on a Three.js course and the outline looks very promising.

Check it out

CSS News July 2020

In this article, Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now.

Read it

Rubik’s Cube

A Rubik’s cube made with Three.js. By Aaron Bird.

Check it out

Knopf.css

A modern, modular, extensible button system designed for both rapid prototyping and production-ready applications.

Check it out

Favicon in Dark Mode

A great CodyHouse video that shows how to change the colors of your favicon when dark mode is enabled.

Check it out

The Comeback of Fun in Visual Design

Michael Flarup writes about the long awaited “swing of the pendulum” in visual design.

Read it

Uncommon CSS Properties

In this article, Ahmad Shadeed goes through some different interesting CSS properties.

Check it out

Lemon.io

Find a perfect freelance match for your project in just 24 hours.

Check it out

CSS collector’s cabinet

Lynn Fisher’s beautiful CSS creation.

Check it out

Always bet on HTML – being misunderstood

Christian Heilmann takes a look at the reasons why people might be less enthused about HTML.

Check it out

Goodbye Squarespace. Hello Eleventy, Tailwind CSS and Netlify!

Sahil Parikh shares his experience with transitioning his blog to a static site generator.

Read it

Bubbles Lamp

A beautiful demo by ilithya.

Check it out

Arched 3D panel

Watch a modern take on an older component Ana Tudor coded some year ago.

Watch it

WordPress Static Site: Benefits, Limits & Tools

A complete guide to getting started with WordPress static site generators.

Read it

Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation

A live demo and tips on building an accessible hamburger menu that’s keyboard-friendly and toggles a slide-out navigation panel.

Check it out

From Our Blog
Exploring Animations for Menu Hover Effects

A couple of ideas for creative menu hover animations with images.

Check it out

The post Collective #613 appeared first on Codrops.

Can you spot the hidden image in the Tostitos logo?

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/HAfgVBF1SX0/tostitos-logo

There are few things more satisfying than a well-made logo, and especially when that logo contains a clever surprise that conveys a brand's story. Coming to our attention most recently is the Tostitos logo, which contains a brilliant piece of chip-themed imagery.

Tostitos may be more well known in the US, while across the pond in the UK, the brand's sibling Doritos (which comes with its own clever logo) is more familiar. But we wonder how many chip-consumers in either country have noticed the hidden-in-plain-sight image in the Tostitos logo. It's a neat piece of design we can't believe we haven't yet noticed, and a contender for our pick of the best logos.

Take a second to have a good look (below) before we dive in.

Tostitos logo

What can you see?

The two capital Ts and the i nestled between tell the story – can you see it now? We clocked the chip and then the dip being used to dot the i almost immediately, but it took another few seconds to realise the Ts also double as people. 

It's not only that the design plays with the wordmark to create a visually-witty image, but the brand message being delivered is smart too. The image conveys Tostitos as a party brand – sociable and warm in its two pals' chip-sharing nature.

Logo

The design sure brings the party

Tostitos is certainly in good company with its use of hidden imagery, symbolism and meaning in its logo, as this bumper infographic displaying a whopping 50 examples backs up. It's a smart tactic that enables a brand to use its logo to its full effect, and we love spotting them. 

Read more:

This logo contains a delightful hidden surprise6 magnificently minimal logosWhere to find logo design inspiration

30 (Really) Cool Iron Man Merchandise You Can Buy

Original Source: https://www.hongkiat.com/blog/iron-man-merchandise/

Though every superhero has its own fandom, however, Iron Man enjoys the biggest share of fans all around the world. The charisma of Robert Downey Jr. combined with that of Tony Stark’s and you…

Visit hongkiat.com for full content.

Never Forget a TODO Comment with tickgit, Your Repo’s Project Manager

Original Source: https://www.sitepoint.com/never-forget-a-todo-comment-with-tickgit-your-repos-project-manager/?utm_source=rss

How Tickgit Helps to Manage To-Do Comments in Git Projects

tickgit is a command-line tool and web application that helps developers do project management in their code, through the use of TODO comments and other plain-text markers. It’s a low-overhead way of managing your backlog without switching contexts.

tickgit scans source code for TODO markers (and HACK, FIXME, XXX, etc.) and presents those code comments as tickets, with a fuller context derived from Git history (who added it, when, where etc.).

I am a solo developer building tickgit and tickgit.com to help software engineers be more productive in their code. I hope you find this project interesting and useful!

the tickgit interface

Why?

Project management is an essential part of software development, even for solo developers building a side-project. Plenty of existing ticketing and task management systems help teams and individuals track pending work really thoroughly. Sometimes, though, using TODO comments and other markers within a codebase ends up being a more efficient way of keeping tabs on what needs to get done.

Why // TODO Comments?

TODO comments (or FIXME, HACK, OPTIMIZE, XXX, etc.) are a common way developers indicate that an area of code is worth addressing and returning to. The Linux codebase has 4k+ of these types of comments, Kubernetes has 2k+.

If this sort of thing is a familiar sight, you’ve no doubt seen or used them before:

// TODO: Get rid of this condition somehow. Perhaps with a dynamic version
// of the @gate pragma.

TODOs Are Easy

To-dos are easy to add and remove. You don’t need to leave your editor. They’re plaintext. You can include links to additional information. They’re flexible. You can even use emojis 😀✏️. You’re not constrained by the field requirements of an external ticketing system. You can be as thorough or succinct as you’d like in describing why you’re annotating an area of code.

No Context Switching

To-dos are right next to the code they’re describing, which means you don’t lose the context of the codebase: the surrounding classes, functions, variables, etc. Using an external ticketing system requires you to either switch focus when trying to understand a ticket and the relevant pieces of code, or do a great deal of context-copying to help clarify your task.

To-dos allow you to maintain your flow when writing code, and are often a lower mental burden than switching to and from tickets in an external system. To-dos, of course, can link back to an existing ticket for additional information if necessary.

Trackable with Your Code

Since TODO comments are part of your code, they’re stored in version control. They can undergo code-review in your PRs. They have a history and can be attributed to authors, versions, and commits. This can enable project management aware reports about burndown, team responsibilities, tech debt, development efficiency, etc.

The Command-line Tool

The tickgit command-line tool is an open-source project that scans a Git codebase for TODO comments. It runs a Git blame and outputs results with references to file paths and line numbers.

It can be used to query ad-hoc for open TODO comments, and supports CSV output for consumption by other tools (spreadsheets, text processors, etc.).

Here’s an example output:

example output

The CLI is currently pretty simple, but with plans to improve to enable more use cases, including:

Customization of phrases to match (don’t match XXX but match @TODO in comments)
Querying and filtering (show me all to-dos added this week, show me only mine, etc.)
Aggregation queries count by author, average age by author, etc.
A CI mode to fail with an error if certain criteria are met (no to-dos in certain branches, max 5 to-dos per author, etc.)
Extract links and customized parsing of comments (extract an assignee, a due date, etc.)

Continue reading
Never Forget a TODO Comment with tickgit, Your Repo’s Project Manager
on SitePoint.

Collective #614

Original Source: http://feedproxy.google.com/~r/tympanus/~3/KVq6Uq4Sg7U/

Inspirational Website of the Week: Anastasiia Afanasieva

So many engaging details, fantastic motion and superb typography! Without a doubt, our pick for you this week.

Get inspired

Our Sponsor
Instant websites for your clients with Divi Layout Packs

With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.

Check it out

The WET Codebase

Dan Abramov shares his talk where he shows “why strict adherence to writing code that is free of duplication inevitably leads to software we can’t understand”.

Check it out

Style Stage from Modern CSS Solutions

A modern CSS showcase styled by community contributions. Maintained by Stephanie Eckles of ModernCSS.dev.

Check it out

30 Great Websites with Parallax Scrolling

A great collection of websites with interesting parallax effects.

Check it out

How To Create A GitHub Profile README

Learn how to access GitHub’s new profile level README feature.

Read it

Awesome Github Profile README

A curated list of awesome Github Profile READMEs.

Check it out

zerodivs.com

An experimental UI editor for creating illustrations with single-element CSS. By Joan Perals.

Check it out

Tabler Icons

In case you missed it: 550+ customizable free SVG icons.

Check it out

Super Expressive

Super Expressive is a lightweight JavaScript library that allows you to build regular expressions in almost natural language.

Check it out

Webwaste

An excerpt from Chapter 9 of Gerry McGovern’s Book World Wide Waste, from Silver Beach.

Check it out

Grids Part 1: To grid or not to grid

Sarah Higley’s first article in a series on interactive grid accessibility.

Read it

Zettlr

Zettlr is an open source Markdown editor with many advanced features.

Check it out

The State Of Pixel Perfection

An interesting article on pixel perfection and why the modern web should overcome the concept.

Read it

Scrollable sidebar with sticky footer using Flexbox

Learn how to use Flexbox to create a scrollable sidebar with a sticky footer in this great video by CodyHouse.

Watch it

Foam

Foam is a personal knowledge management and sharing system for VSCode.

Check it out

What is CSS Specificity?

Sarah Chima explains CSS specificity, an important topic to understand if you want to get better at CSS.

Read it

Clipped Image Reveal on Hover

A very nice clipped hover effect by Katherine Kato.

Check it out

3D Radio

An interactive 3D radio made by Ricardo Oliva Alonso.

Check it out

GUI Sites

Simone Marzulli’s curated list of sites that look like desktop graphical user interfaces.

Check it out

127 design websites

An extensive list of websites to show off your design. Made by the content team at lemon.io.

Check it out

AudioMass

In case you missed it: AudioMass is a free full-featured web-based audio and waveform editing tool in just 65kb of vanilla JavaScript.

Check it out

form-validation.js

The most customizable validation framework for JavaScript.

Check it out

Button state and accessibility

Chris Fernandi looks at button state and the [aria-pressed] attribute.

Read it

The post Collective #614 appeared first on Codrops.

Popular Design News of the Week: July 13, 2020 – July 19, 2020

Original Source: https://www.webdesignerdepot.com/2020/07/popular-design-news-of-the-week-july-13-2020-july-19-2020/

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Squircley – All You Need to Start Creating Beautiful Squircles

 

Tabler Icons – 550+ Highly Customizable Free SVG Icons

 

Puppertino – A CSS Framework Based on Apple’s Design and Human Guidelines

 

We are Going to Need Bigger Screens

 

Coronavirus Changed Everything Including these Logo Designs

 

This Technique was Supposed to Replace Passwords. Turns Out it’s Surprisingly Easy to Hack

 

The Web Design Hack Hall of Fame

 

61 UI/UX Resources for Web Designers

 

Don’t Quit, Create

 

BF Tiny Hand: A Free Donald Trump’s Handwriting Font

 

Dunder Mifflin Identity

 

16 Examples of Large Typography in Web Design

 

Style Stage

 

Spaceboard – Pinterest for Markdown Notes

 

Flowyak – High-converting Webflow Templates for Bootstrapped Startups

 

The State of Pixel Perfection

 

The Best Tools for Checking your Website’s Speed

 

12 Screen Reader Facts for Accessible Web Design

 

Why You Should Build your Blog on WordPress Vs. Squarespace

 

127 Websites to Show Off your Design

 

Modern Web Development on an 8 Year Old Mac – Music, Design and Stories by Nigel Bunner

 

Website Best Practices Checklist: 9 Web Design Best Practices

 

Design Ethnography

 

Minimum Viable UX: A Guide for SaaS Design

 

How to Think Smart About your Downtime

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

20 Creative Uses of Lego You Need To See

Original Source: https://www.hongkiat.com/blog/creative-uses-lego/

The world will probably never get tired of the wonders of Lego, even if it definitely hurts when you step on one. Painful feet massage aside, the popular brick toy continues to astound us with the…

Visit hongkiat.com for full content.

Bringing You The Best Of Smashing

Original Source: https://www.smashingmagazine.com/2020/07/monthly-roundup-07-2020/

Bringing You The Best Of Smashing

Bringing You The Best Of Smashing

Iris Lješnjanin

2020-07-17T11:00:00+00:00
2020-07-17T20:34:15+00:00

Well, I guess we can all agree that this year has been quite something. We’ve all been challenged in one way or the other, and the new normal is not quite the old normal. Still, the overriding emphasis remains on safety and everyone’s wellbeing, as well as the importance on sharing thoughts and feelings on creative wellness within the community.

Unfortunately, the effects of COVID-19 are still so wide-reaching throughout the world, so that the Smashing team has had to make big changes to our plans this year. As Rachel Andrew, editor-of-chief of Smashing Magazine, nicely puts it:

“The pandemic has made life unpredictable and scary for many people. At Smashing, we’ve had to very quickly figure out new ways of delivering great content — in a way that supports the business but also our speakers and workshop leaders. We have been encouraged by the enthusiasm from the community, the messages of support, and the willingness to try these new formats.”

On that note, we have decided to take all 2020 dates online. We hope to see you there!

August 20–21
SmashingConf Live
Tell me more →

September 7–8
SmashingConf Freiburg
Tell me more →

October 13–14
SmashingConf Austin
Tell me more →

November 10–11
SmashingConf San Francisco
Tell me more →

We’re able to do these all these wonderful things because of your support, and we truly and sincerely appreciate it.

Interactive Workshops To Help You Boost Your Skills

With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop, without needing to leave your desk. So you can learn at your own pace, in your own time, and follow interactive exercises along the way.

We’ve done our best to provide you with a mix of both design- and frontend-related workshops:

July 28–29
Designing For Emotion
Aarron Walter
Design

August 6–14
Web Application Security
Scott Helme
Front-end

August 17–31
Behavioral Design
Susan and Guthrie Weinschenk
Design

Aug. 19 – Sept. 3
Front-End Testing
Umar Hansa
Front-end

Aug. 20 – Sept. 4
Designing For A Global Audience
Yiying Lu
Design

September 1–16
Jamstack!
Jason Lengstorf
Front-end

September 10–11
The CSS Layout Masterclass
Rachel Andrew
Front-end

Sept. 17 – Oct. 2
Vue.js: The Practical Guide
Natalia Tepluhina
Front-end

Sept. 22 – Oct. 6
Smart Interface Design Patterns, 2020 Edition
Vitaly Friedman
Design & UX

Attending a Smashing online event means that you’ll be taking part in live sessions, Q&As, discussion zones, challenges, and so much more! See all schedules and events →

Sit Back, Relax, And Tune In!

The Smashing Podcast is the perfect way to take a little bit of Smashing along with you on your morning commute, when working out at the gym, or just washing the dishes. Every two weeks, Drew McLellan talks to design and development experts about their work on the web. You can subscribe in your favorite app to get new episodes as soon as they’re ready.

1. What Is Art Direction?
2. What’s So Great About Freelancing?

3. What Are Design Tokens?
4. What Are Inclusive Components?

5. What Are Variable Fonts?
6. What Are Micro-Frontends?

7. What Is A Government Design System?
8. What’s New In Microsoft Edge?

9. How Can I Work With UI Frameworks?
10. What Is Ethical Design?

11. What Is Sourcebit?
12. What Is Conversion Optimization?

13. What Is Online Privacy?
14. How Can I Run Online Workshops?

15. How Can I Build An App In 10 Days?
16. How Can I Optimize My Home Workspace?

17. What’s New In Drupal 9?
18. How Can I Learn React?

19. What Is CUBE CSS?
20. What Is Gatsby?

Is there a topic that you’d love to hear and learn more about? Or perhaps you or someone you know would like to talk about a web- and design-related topic that is dear to your hearts? We’d love to hear from you! Feel free to reach out to us on Twitter and we’ll do our best to get back to you as soon as possible.

Catching up with what’s new in the web industry doesn’t mean you have to be tied up to a chair and desk! Do as Topple the Cat does it: grab your headphones and stretch those legs! You can subscribe and tune in anytime with any of your favorite apps.

Our Most Recent Addition To The Smashing Bookshelf

We shipped the first copies of Click! How to Encourage Clicks Without Shady Tricks a few weeks ago, and if you pre-ordered a copy of the book, you must have received a personal note from the author himself, Paul Boag. It was fun to follow the reactions pop up on social media — Ari Stiles shared some tweets in her recent post.

Click! comes along at a time when many of us need a creative “nudge.” The book inspires us to think differently about our routines for building online sites and services—what works, and what doesn’t. You can jump to the table of contents, or if you’d like to take a peek first, you can download a free PDF excerpt right away (17.3 MB). Happy reading!

Print + eBook

eBook

Print + eBook

{
“sku”: “click”,
“type”: “Book”,
“price”: “39.00”,

“prices”: [{
“amount”: “39.00”,
“currency”: “USD”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “39.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}
]
}

$
39.00

Get Print + eBook

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

{
“sku”: “click”,
“type”: “E-Book”,
“price”: “19.00”,

“prices”: [{
“amount”: “19.00”,
“currency”: “USD”
}, {
“amount”: “19.00”,
“currency”: “EUR”
}
]
}

$
19.00

Free!

Get the eBook

DRM-free, of course.

ePUB, Kindle, PDF.
Included with Smashing Membership.

Get the eBook

Download PDF, ePUB, Kindle.
Thanks for being smashing! ❤️

Trending Topics On Smashing Magazine

As you may already know, we aim to publish a new article every single day that is dedicated to various topics current in the web industry. Here are some that our readers enjoyed most and have recommended further:

“CSS News July 2020,” Rachel Andrew
“An Introduction To React’s Context API,” Yusuff Faruq
“How To Pass Data Between Components In Vue.js,” Matt Maribojoc
“Setting Height And Width On Images Is Important Again,” Barry Pollard
“Differences Between Static Generated Sites And Server-Side Rendered Apps,” Timi Omoyeni

Best Picks From Our Newsletter

We’ll be honest: Every second week, we struggle with keeping the Smashing Newsletter issues at a moderate length — there are just so many talented folks out there working on brilliant projects! Kudos to everyone involved!

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you right away.

P.S. A huge thank you to Cosima Mielke for writing and preparing these posts!

Free Fonts With Personality

Typography is a powerful communication tool, a way to express ideas, and a trigger for creativity. Based on this understanding, the Argentinian-based type foundry Rostype creates fonts that are free to use for anyone, in personal and commercial projects.

Rostype

There are currently 15 fonts available, and each one of them shines with a unique personality. Some are designed with a special focus on readability, others are the perfect display typefaces, made to stand out, some are retro-inspired, others more futuristic and dynamic. There’s even a typeface inspired by the coronavirus lockdown. A treasure chest if you’re looking for a typeface that is a bit more distinctive.

The Making Of A Typeface

It’s always insightful to sneak a peek behind the scenes of how other design teams work and think. Chris Bettig, Design Director at YouTube, now shares an interesting case study on how he and his team created YouTube Sans, a tailor-made font that doubles as a brand ambassador.

YouTube Sans

Before the new typeface made its appearance, YouTube used the iconic play button and a modified version of Alternate Gothic for the wordmark. However, as Chris Bettig explains, there was no clear typographical guidance. Designed to work across the entire range of YouTube’s products and reflecting the platform’s worldview as well as the community of creators who use it, YouTube Sans changed that. For more insights into how the font came to life and the challenges the design team faced along the way, be sure to check out the case study.

Dealing With Browser Font Rendering Inconsistencies

We all know those moments when a bug literally bugs us but we can’t seem to figure out how to solve it. Stephanie Stimac recently came across such an issue: When she opened her personal website in Safari, she noticed how drastically different the title of her page was rendering compared to other browsers. It appeared much bolder than expected.

Browser Font Rendering Inconsistencies

To find the reason for these rendering inconsistencies, Stephanie started to dissect differences between the user agent style sheet and the computed CSS properties and soon found herself far down the rabbit hole, comparing the confusing behavior with Chrome, Firefox, and Edge. There’s no simple answer to the question which browser is actually handling the styling correctly, but after running a number of tests, Stephanie found out how to prevent the browser from deciding how to bold font-weights: you need to explicitly define the font weight with numerical values. A small detail that makes a significant difference.

Continuous Performance Measurements Made Easy

When launching a website, it’s common to run performance tests to ensure the site is fast and follows best practices. But how do we keep it fast as soon as deploys are happening every day? Speedlify is Zach Leatherman’s answer to this question.

Speedlify

Speedlify is a static site published as an open-source repository that uses Lighthouse and Axe to continuously measure performance and publish the performance statistics — at most once an hour and automatically once a day. You can run it manually, locally on your computer and check in the data to your repo, or, if you’re using Netlify, it can run entirely self-contained. A great way to keep performance always in sight.

The Anatomy Of A Push Notification

Push notifications were first introduced on iOS back in 2009, web push followed five years later. Today, they are supported across a lot of platforms and browsers — from iOS and Android to Amazon Echo, Windows, Chrome, Safari, Firefox, Edge, and more. Each one of these platforms is a bit different, though, making it complicated for designers to wrap their heads around what exactly goes into a push notification.

Design and Anatomy of a Push Notification 2020

A useful reminder comes from Lee Munroe. He summarized how many lines of text you need on which platform, requirements for images, if there are character restrictions, and other details that can be hard to remember. The overview also comes in handy to assess what your notification will look like on operating systems you don’t have access to. One for the bookmarks.

Editing Keyframe Animations Live

When you’re creating animations, it’s always helpful to see the animation in action as you tweak it. Unfortunately, that also involves a lot of switching back and forth between your text editor and the browser. Mitch Samuels was tired of doing that, so he built a tool to save him time: Keyframes.app.

Keyframes.app

The tool lets you create a CSS keyframe animation with a visual timeline editor. You can add steps to a timeline, use the simple UI to adjust the CSS properties you want your target element to have at each step, and the animated preview will update live. Once you’re happy with the result, you can copy the CSS and use it in your project right away. Keyframe.app is also available as a Chrome extension. A real timesaver.

Determining The Best Build Tool For Your Project

Build tools aim to make the lives of developers easier by streamlining workflows and codifying best practices. However, picking the right build tool for a project can be a challenge. To help you make a more informed decision, folks from the Google Chrome developer relations team built Tooling.Report.

Tooling Report

Based on a suite of tests to assess how well a build tool adheres to best practices, Tooling.Report gives you an overview of various bundlers and the features they support. It’s not only a quick way to determine the best tool for a project but also a reference for incorporating best practices into existing codebases — with the long-term goal of improving all build tools and, thus, the health of the web.

Turning A Flat Image Into A Folded Poster

Some coding experiments leave even the most experienced developers in awe. And even if it’s something you won’t be using every day, it’s always inspiring to see fellow developers think outside the box and explore what’s possible with web technologies. The folded poster effect that Lynn Fisher created with pure CSS is such an experiment.

CSS Folded Poster Effect

With a bit of CSS, Lynn makes your average image look like a folded poster. With paper creases running over the image horizontally and vertically and a background shadow that gives the poster a 3D effect. A cool little project that beautifully shows what can be achieved with CSS.

Striking A Balance Between Native And Custom Select Elements

How do you build a styled select element that is not only styled on the outside but on the inside, too? In her article “Striking a Balance Between Native and Custom Select Elements”, Sandrina Pereira shares her attempt to create a good-looking, accessible select that benefits from as many native features as possible.

Striking A Balance Between Native And Custom Select Elements

The idea is to make the select “hybrid”, which means that it’s both a native <select> and a styled alternate select in one design pattern. Users of assistive technology will get a native <select> element, but when a mouse is being used, the approach relies on a styled version that is made to function as a select element. Clever!

Hybrid Positioning With CSS Variables And max()

Some ideas require you to think outside the box and explore new paths to make them happen. Imagine this example: You want to have a page navigation on the side, right under the header when it’s scrolled all the way to the top. It is supposed to scroll with the page when the header is out of view and stay at the top for the rest of the scrolling. That’s exactly what Lea Verou wanted to achieve in a recent project.

Hybrid positioning with CSS variables and max()

You might say, that’s a case of position: sticky, but there’s a more finely-tuned approach to getting the job done, as Lea shows. Without any JavaScript. Her solution relies on CSS variables and the new max() function that lets you apply min/max constraints to CSS properties. A fallback helps in browsers that don’t support max() yet. Clever!

Stories From The Dark Side Of The Web

Hackers, data breaches, shadow government activities, cybercrime, hacktivism — a lot is going on on the dark side of the web. But who are the people behind these activities? And what’s their “mission”? Jack Rhysider dedicated a podcast to the stories that happen on the hidden parts of the network: Darknet Diaries.

Darknet Diaries

No matter if it’s the story of a gambler who finds a bug in a video poker machine that lets him win excessive amounts of money, the story of a penetration tester breaking into buildings, or a nation state hacking into a company within another nation, the Darknet Diaries is full of gripping insights into a secret world. The podcast adheres to journalistic standards by fact-checking and ethical sourcing of information, and while all of this is great entertainment, it also aims at explaining the culture around cybersecurity to make listeners more responsive, informed citizens of their digital lives. Be sure to tune in.

With Smashing Newsletter, it always feels like home. A cat with slippers reading the newsletter edition.

Smashing Newsletter

Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. Subscribe and get Smart Interface Design Checklists PDF in your inbox.

Your (smashing) email

Subscribe →

Front-end, design and UX. Sent 2× a month.
You can always unsubscribe with just one click.

Smashing Editorial
(cm, vf, ra)