EverWeb
Widgets

Resizing Heading

Text size can respond to changes in the browser/device width by using viewport units instead of pixels for the font size and line height.
If viewing this page on a computer, increase the browser width to more then 1200px and the font size will remain the same. Now, gradually reduce it to the width of a mobile phone to see how the font size responds as the width is reduced.
Viewport Units
Most EverWeb users will be used to working in absolute units - mainly pixels. CSS also has relative units and one of these is the Viewport Unit which can express width (vw) and height (vh).
A value of 1vw is equivalent to 1% of the viewport width and is the unit used here for the font size and line height.
Maximum Width
Oviously it is not sensible to keep on increasing the font size past a certail point as it will be huge when the item is viewed on a device like an iMac 27 with the browser set wide.
A media query is used to set the maximum font size and line-height in pixels at the desired browser/device width. In this case, the maximum width is set to 1200px.
Break Point
This example has padding applied and a text shadow. There are controls for setting different values for these for narrower device screens.
The break point can be selected for tablets in landscape, tablets in portrait, phones in landscape or phones in portrait mode.

Resizing Heading

Text size can respond to changes in the browser/device width by using viewport units instead of pixels for the font size and line height.
If viewing this page on a computer, increase the browser width to more then 1200px and the font size will remain the same. Now, gradually reduce it to the width of a mobile phone to see how the font size responds as the width is reduced.
Viewport Units
Most EverWeb users will be used to working in absolute units - mainly pixels. CSS also has relative units and one of these is the Viewport Unit which can express width (vw) and height (vh).
A value of 1vw is equivalent to 1% of the viewport width and is the unit used here for the font size and line height.
Maximum Width
Oviously it is not sensible to keep on increasing the font size past a certail point as it will be huge when the item is viewed on a device like an iMac 27 with the browser set wide.
A media query is used to set the maximum font size and line-height in pixels at the desired browser/device width. In this case, the maximum width is set to 1200px.
Break Point
This example has padding applied and a text shadow. There are controls for setting different values for these for narrower device screens.
The break point can be selected for tablets in landscape, tablets in portrait, phones in landscape or phones in portrait mode.

Resize Heading 2

Font Size & Media Queries

A different method for changing the font size with browser/device screen width is to use media queries. This widget uses five break points which can be modified by the user and a font size setting for each one.
The default break points or for browser widths wider then 1400px, browser widths less than 1400px, tablets in landscape mode, tablets in portrait mode and mobile phones in portrait mode. The example has font sizes of 54px, 48px, 36px, 24px and 20px respectively.
The example uses the Google hosted Stint Ultra Expanded font with helvetica as the fallback. A 1px text shadow has been added with the letter spacing increased to 1px to make room for it.