Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { background-color: #eee; color: #000; font-size: 1em; font-family: 'Roboto', Helvetica, sans-serif; } hr { margin: 60px 0; } table { table-layout: fixed; padding: .3em; border: 1px solid #ccc; background-color: #f9f9f9; margin-bottom: 1em; } td { padding: 15px; border: 1px solid #eee; } h3 { font-size: 5em; line-height: 1; font-family: sans-serif; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; font-family: 'Roboto', Helvetica, sans-serif; } .optimizeLegibility { text-rendering: optimizeLegibility; } </style> </head> <body> <h2>Text-rendering example</h2> <table> <tr> <td>Text-rendering: auto;</td> <td> <h3 class="uppercase">LOREM</h3> </td> </tr> <tr> <td>Text-rendering: optimizeLegibility;</td> <td> <h3 class="optimizeLegibility uppercase">LOREM</h3> </td> </tr> </table> <table> <tr> <td>Text-rendering: auto;</td> <td> <h3>Ipsum</h3> </td> </tr> <tr> <td>Text-rendering: optimizeLegibility;</td> <td> <h3 class="optimizeLegibility">Ipsum</h3> </td> </tr> </table> <table> <tr> <td>Text-rendering: auto;</td> <td> <h3 class="italic">lorem ipsum</h3> </td> </tr> <tr> <td>Text-rendering: optimizeLegibility;</td> <td> <h3 class="optimizeLegibility italic">lorem ipsum</h3> </td> </tr> </table> </body> </html>