Editing Responsive Web Design (section)

== Typography ==

=== Viewport tag ===

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

<syntaxhighlight lang="html">
<meta name="viewport" content="width=device-width, initial-scale=1">
</syntaxhighlight>

<blockquote>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.<ref>[https://medium.com/@sikirus81/how-to-scale-fonts-responsively-with-css-for-different-screen-sizes-4107f233988b How to Scale Fonts Responsively with CSS for Different Screen Sizes] - sikiru on Medium.com</ref></blockquote>

=== 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.<ref>[https://matthewjamestaylor.com/responsive-font-size Responsive Font Size (Optimal Text at Every Breakpoint)] - Matthew James Taylor</ref>

<syntaxhighlight lang="css">
body {
    font-size: calc(15px + 0.390625vw);
}
</syntaxhighlight>

=== Responsive website font size guidelines ===

[https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html Guideline for website font sizes] - Learn UI Design<ref>[https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html Guideline for website font sizes] - Learn UI Design</ref>