The text will be off! Even though rectangles are perfectly centered.
But even if font can have its metrics unbalanced, it doesn’t mean it does. What happens in reality?
In reality, most of the popular fonts have metrics slightly off. Many have it significantly off:

🎨 Curated collection of 93 free beautiful CSS box-shadow, ready-to-use for your next projects. Click to copy.

Five tips to design a convincing sales page by better using typography.

Visual Focus

Accessibility is for everyone. I like using keyboard navigation to tab through interactive elements. Sadly I’ve lost count of how many clients have asked me to “remove that ugly border” around focused buttons.

Button focus state can be improved with two tricks:

.button {
  &:focus-visible {
    outline: 2px solid magenta;
    outline-offset: 2px;
  }
}

First, I replace the default focus pseudo-class with focus-visible. MDN has a long section on focus vs focus-visible. Basically it’s what the original should have been in hindsight.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#focus_vs_focus-visible

Second, I use outline-offset to give some breathing room between the focus ring and the button itself. If the button has a prominent border style the outline would sit flush against it looking like a double border. Adding an offset makes the focus state more visible.

One thing to note is that ::file-selector-button does not get focus, rather the parent input does, so apply styles there.

Bookmarklet creator tool.

An interactive guide on designing better target sizes on the web.

Unsure how to design and implement user-interface patterns? Use this collection of links to our content about specific patterns.

• A Note on Interface Guidelines
• Input Controls
• Forms and Wizards
• Tooltips, Dialogs, Instructional Overlay
• Icons and Indicators
• Menu Design
• Site Navigation Elements
• In-Page Navigation
• Search
• Errors
• Privacy and Ethics

I've talked a good bit about SVG's around here and using it to build an icon system. The beauty of is that you can reference just a part of some SVG defined

A faster youtube embed. Contribute to paulirish/lite-youtube-embed development by creating an account on GitHub.

An unofficial bonus chapter for the iOS Human Interface Guidelines: Learn how to structure iPhone apps with drill-downs, modals, pyramids, sequences, and more.

In a dark room, lighting a single candle may feel like a drastic change. But in a room already lit by ten candles, adding one more might not feel as significant. Or, while the intensity of sound is determined by the amplitude of the sound wave, doubling the amplitude does not make it feel twice as loud to humans.

This idea can apply to graphic design, for example, typographic scale or making contrast of sizing between visual elements in general.

Compare two type scale examples below. The left increases the font size by 6 points each step, while the right increases the size by the ratio of 1.2x (each step is 20% larger than the previous). You can see the change between each step appear to decrease as the size increases in the left example, while the change feel more consistent in the right example.

$fontsize = b \cdot r^{(step - 1)}$

$\begin{aligned} step = \log_{1.2} \frac{fontsize}{b} + 1\end{aligned}$

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue) - GitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)

How to use the Content Brick Method to create a website structure in an easier and faster way? Why is this Method better for creating visual sitemaps than using mind map tools?

Even before Octopus, we knew from years of developing websites that the best way to prototype a website structure is using stickers or some other kind of paper stickers.

Lifehack

You don’t need to spend too much time thinking which wireframe goes to which content block, we’ve taken care of that for you. There aren’t too many (just 21), but they’re the most widely used. All you need to do is pick the right one for you.

A fun collection of free SVG generators for gradients, patterns, shapes, textures & cool backgrounds. Plus, some more color tools for web designers.

https://fffuel.co/hhhue/

Fontimize: Subset Fonts to Exactly and Only Your Website's Used Characters
A Python library to subset fonts, which cuts ~95% from the size of your site’s font files & downloads/bandwidth. To use: from fontimize import optimise_fonts_for_files and call it with a list of HTML files. See the the full API docs for more info.
Find Fontimize on Github and PyPi.

https://github.com/vintagedave/Fontimize/issues/1

I randomly came across your blog post on this library and thought I'd take a look at the code. I noticed you have an accidental O(n^2) string concatenation. In a few places in your code, you're appending lists of strings. This is a problem as it creates new intermediate strings in each iteration. Here is one such example:

Less typing is always better
Last but not least, my absolute favourite <input> attribute is the autocomplete attribute.

For controlling the available virtual keyboards use inputmode. To control whether an <input> can be updated, but also still read and submitted, choose readonly over disabled. You can trigger the camera on mobile devices using capture. Use the spellcheck attribtue to control whether spellchecking is activated on an input, and remember to set it to "false" on sensitive inputs. Save users time by using autocapitalize to control the capitalisation of text in an input. And finally, use autocomplete to help the browser fill in the contents of an input and save your users typing.

This template is opinionated and intended as a starting point for those who want to define how accessibility is dealt with in their company. It does not matter whether your title is developer, designer, project manager or something else.

The title attribute is not particularly accessible.

The <dl>, or description list, element is underrated.

It's used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile. For instance, you've probably seen these layouts out in the wild…

<dl>
    <dt>Title</dt>
    <dd>Designing with Web Standards</dd>
    <dt>Publisher</dt>
    <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
</dl>