Responsive Web Design

Typography

Viewport tag

The viewport meta tag prevents mobile devices from displaying pages as if they were at desktop resolutions.

<meta name="viewport" content="width=device-width, initial-scale=1">

Setting the viewport width to the device width and the initial zoom level to 1 allows the page to match the screen’s dimensions and scale the content appropriately. Without this, mobile browsers may render pages at a desktop screen width then shrink it down, leading to an overly small text size.

Responsive text

Set the font size as 15px plus 0.0039065% of the screen width. This should yield optimal font sizes at every breakpoint, e.g. 16px @ 320px width, 20px at 1280px width, etc.

body {
    font-size: calc(15px + 0.390625vw);
}

Responsive website font size guidelines

Guideline for website font sizes - Learn UI Design

Hamburger menu

Best practices

It obfuscates links to main pages, so don't use it unless it's absolutely necessary. Number 1 UX rule: Don't frustrate people.

Take into consideration edge cases, like users who split windows to half their screen.

Consider using the word "menu" instead of the 3 bar hamburger icon for the menu.

Breakpoint values

934 pixels on 1080p screens, or 1154 pixels on 1440p screens.

Controlling hover actions on an SVG sprite

See Changing the Color of an SVG Image