Responsive text

Designing responsive text

Text containers should resize as the viewport size changes to prevent text from overflowing the viewport. Avoid static, fixed container sizes.

Good example: Text container resizes with the viewport

In this example, the text container is set with a 75% percentage width value. The text reflows as the user changes the viewport size.

Example begins

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis massa id justo egestas egestas in a urna. Cras et nunc fringilla, feugiat nisl tempus, aliquam nisi. Quisque rhoncus eros sed malesuada tincidunt. In commodo dignissim nulla ac porta. Nunc scelerisque quam sit amet sapien hendrerit sollicitudin. Curabitur tristique, tortor et ultricies dignissim, sem arcu tempor libero, sed aliquet tellus ex non lectus. Vestibulum maximus dolor ante, eget tincidunt mi accumsan a. Fusce euismod mauris neque, vitae sagittis ex faucibus eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Example ends

HTML

Code begins

<div style="width:75%; padding: 1em; border: 1px dotted black">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis massa id justo egestas egestas in a urna. Cras et nunc fringilla, feugiat nisl tempus, aliquam nisi. Quisque rhoncus eros sed malesuada tincidunt. In commodo dignissim nulla ac porta. Nunc scelerisque quam sit amet sapien hendrerit sollicitudin. Curabitur tristique, tortor et ultricies dignissim, sem arcu tempor libero, sed aliquet tellus ex non lectus. Vestibulum maximus dolor ante, eget tincidunt mi accumsan a. Fusce euismod mauris neque, vitae sagittis ex faucibus eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Code ends

Bad example: Text container uses fixed width

In this example, the text container is set with an 800px width value. The text does not reflow as the user changes the viewport size.

Example begins

Example ends

HTML

Code begins

<div style="width:800px; padding: 1em; border: 1px dotted black">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis massa id justo egestas egestas in a urna. Cras et nunc fringilla, feugiat nisl tempus, aliquam nisi. Quisque rhoncus eros sed malesuada tincidunt. In commodo dignissim nulla ac porta. Nunc scelerisque quam sit amet sapien hendrerit sollicitudin. Curabitur tristique, tortor et ultricies dignissim, sem arcu tempor libero, sed aliquet tellus ex non lectus. Vestibulum maximus dolor ante, eget tincidunt mi accumsan a. Fusce euismod mauris neque, vitae sagittis ex faucibus eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>

Code ends