Responsive Web Design: Difference between revisions
Jump to navigation
Jump to search
(Created page with "== Typography == 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...") |
|||
| Line 1: | Line 1: | ||
== Typography == | == Typography == | ||
=== Viewport tag === | |||
The viewport meta tag prevents mobile devices from displaying pages as if they were at desktop resolutions. | The viewport meta tag prevents mobile devices from displaying pages as if they were at desktop resolutions. | ||
| Line 8: | Line 10: | ||
<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> | <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> | |||
== Reference == | == Reference == | ||
Revision as of 14:41, 23 July 2024
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.[1]
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.[2]
body {
font-size: calc(15px + 0.390625vw);
}
Responsive website font size guidelines
Guideline for website font sizes - Learn UI Design[3]
Reference
Sources
- ↑ How to Scale Fonts Responsively with CSS for Different Screen Sizes - sikiru on Medium.com
- ↑ Responsive Font Size (Optimal Text at Every Breakpoint) - Matthew James Taylor
- ↑ Guideline for website font sizes - Learn UI Design