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 Applying A Hover Effect