How Frontend Developers Can Make Interfaces More User-Friendly: A Collection of HTML/CSS Lifehacks

Creating attractive and user-friendly interfaces requires careful attention to detail. This collection gathers simple but effective HTML and CSS practices that noticeably improve the user experience.

The Default Font Can Be Beautiful Too

Proper typography is the foundation of a good interface. Traditionally, developers specify a fallback font family (e.g., sans-serif), but this often results in displaying Arial, which looks inelegant.

Solution: Use the system-ui keyword:

body {
  font-family: "Roboto", system-ui;
}

This allows the browser to use the built-in system font, which usually looks much better than standard fallback options.

Improving Heading Display

In typography, there's a phenomenon called "widows" — when the last line of text contains only one word. To fix this, use the text-wrap property with the balance value:

h1 {
  text-wrap: balance;
}

The browser automatically distributes text evenly across lines, creating a more harmonious appearance.

Customizing the Virtual Keyboard Button Label

The enterkeyhint attribute lets you change the label on the Enter key of the mobile keyboard:

<input type="password" id="pw" enterkeyhint="send">

Available values: enter, done, go, next, previous, search, send.

Convenient Numeric Code Input During Authentication

For fields that require only digits, use the inputmode attribute:

<input type="text" inputmode="numeric">

This displays only the numeric keyboard on mobile devices, improving input convenience.

Text Selection Can Be Different

The ::selection pseudo-element lets you style selected text in your brand colors:

::selection {
  background-color: #fce4ec;
}

This is a simple way to make the interface more consistent with your brand.

Adding a Dark Theme Is Very Simple

According to research, 27% of users use dark mode. Implementation via the prefers-color-scheme media feature:

:root {
  --main-mode-color: #fcfcfc;
  --accent-mode-color: #222;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-mode-color: #1e2229;
    --accent-mode-color: #ebecef;
  }
}

body {
  color: var(--accent-mode-color);
  background-color: var(--main-mode-color);
}

Expanding the Clickable Area with Pseudo-Elements

When designers create interactive elements that are too small, you can increase the click area using ::before:

.button {
  width: 16px;
  height: 16px;
  position: relative;
  isolation: isolate;
}

.button::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
}

This expands the clickable area to 36x36 pixels without changing the visual size of the element.

Here is a universal version using CSS custom properties:

.ha-clickable-area {
  --_ha-clickable-area-expandable-ratio: 
    var(--ha-clickable-area-expandable-ratio, 6px);
  position: var(--ha-clickable-area-position, relative);
  isolation: isolate;
}

.ha-clickable-area::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--_ha-clickable-area-expandable-ratio));
  z-index: -1;
}

Summary

The techniques covered include:

• Using system-ui for typography
• text-wrap: balance for headings
• enterkeyhint for adapting the virtual keyboard
• inputmode="numeric" for numeric input
• ::selection for styling text selection
• prefers-color-scheme for dark theme support
• Expanding clickable areas with pseudo-elements

These simple improvements significantly enhance the usability of web interfaces.