Typography is the way text looks on a web page — the fonts, the sizes, the spacing, and the line height. The J1 Template treats typography as one of the most important branding elements of your website. Good typography makes a page easier to read and gives your site its own visual character, almost like the way a logo or an image does.
Responsive Text
Responsive text is text that changes its size automatically to fit the screen. On a big monitor it looks bigger, on a phone it looks smaller — but it always stays easy to read.
Many website templates do not support responsive text. They resize images and boxes, but the text size stays fixed. The J1 Template fixes this. It adjusts both the font size and the line height so reading stays comfortable on every device.
Below you can see how text behaves with a fixed size — the way most templates show it. Click the Toggle rtext button to switch between fixed text and responsive text, then change the size of your browser window to see the difference.
The Extremes of Good and Evil
Cicero, Paragraph 1.10.32 · Translation by H. Rackham, Issue 1914 - De Finibus
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure.
To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
Text Scaling
Responsive text comes in five sizes (called scale factors), from 100 to 500. With these sizes you can:
-
use responsive text everywhere on your pages, and
-
offer different text sizes to visitors who need a larger or smaller font, without asking them to change their browser settings.
Click the Scale rtext button below to switch the text size from level 300 to level 500 and back. Try resizing your browser window at the same time to see how the text always stays easy to read.
The Extremes of Good and Evil
Cicero, Paragraph 1.10.32 · Translation by H. Rackham, Issue 1914 - De Finibus
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business is will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
Scale factors
Responsive text comes in five sizes, named r-text-100 through r-text-500. The smallest is r-text-100, the largest is r-text-500.
Behind the scenes, the sizes are based on the Fibonacci series — a famous sequence of numbers that often appears in nature and in design. The Fibonacci numbers give pleasing proportions, which is why they are also popular in typography. The J1 Template translates these numbers into CSS rules so the text scales smoothly with the browser size.
The table below shows how each scale factor compares to the base size.
| Property | Factor | Example text |
|---|---|---|
| 0.5 | But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. |
| 0.7 | But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. |
| 0.8 | But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. |
| 0.9 | But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. |
| 1.0 | But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. |
What next
Have you enjoyed trying out the responsive text? The J1 Template can do much more for the look of your pages. The next topic is icons — small visual symbols that can support the meaning of your text.
The J1 Template includes several popular icon sets out-of-the-box:
-
Material Design Icons (MDI)
-
FontAwesome Icons V5 (FA)
-
Iconify Icon Sets (online icon library)
Each set comes with hundreds or thousands of ready-to-use icons covering many topics. Want to know how to use them on your pages? Move on to Icon Fonts.