Typography is the way the text on your website looks: the font, the size of the letters, and the space between the lines. The J1 Template treats the font as one of the most important parts of your brand — just like a logo or a color scheme.
On a page full of text, the text is more than words. It also works like a picture: readers see the shape of the page before they read a single line. A good font makes your site easy to read and gives it a character that visitors recognise.
Responsive Text
Many templates and frameworks have the same weak point: the text is not responsive. Boxes and images grow and shrink with the browser window, but the letters always keep the same size. On a small phone screen this makes long articles hard to read.
The J1 Template solves this with responsive text. Responsive text changes both the size of the letters and the space between the lines to match the width of the screen, so a page stays comfortable to read on a big monitor and on a phone.
The example below starts with fixed text — the kind you find on many websites. Click the button to switch between fixed text and responsive text, and resize 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. They are named from r-text-100 (the smallest) up to r-text-500 (the biggest). You can use them anywhere on your pages.
The five sizes are also a simple way to help visitors who do not see well or who find small text hard to read. You can offer a larger text size directly on your page, so nobody has to change the settings of their browser first.
Click the button below to switch the text between size r-text-300 and size r-text-500. Then resize your browser window and watch the text grow and shrink with it.
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
As said before, responsive text comes in five sizes. The steps between them are not picked at random. They are based on the Fibonacci numbers — a series of numbers that shows up again and again in nature, and that designers have used for a long time to find pleasant proportions.
The J1 Template turns these numbers into CSS media queries. A media query is a rule that says: "if the screen is this wide, use that font size". This is what makes the text follow the size of the window.
On top of that, each of the five levels has its own factor. Level r-text-500 shows the text at full size (factor 1.0), and the smaller levels shrink it step by step down to half the size (factor 0.5).
The table below shows all five levels with the same example text, so you can compare them side by side.
| 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 working with the text? The J1 template can do even more for your web pages. On the next page, you’ll see examples of how icons can add meaning to your content. J1 Template works with popular icon font sets right away. The MDI and FA icon sets are well-designed and offer a wide variety of icons for many web uses.
With J1 Template, the following icons font sets are available out-of-the-box like:
-
Material Design Icons (MDI)
-
FontAwesome Icons V5 (FA)
-
Iconify Icon Sets
Would you like to learn more about using icons? The next example page focus on what’s possible using Icon Fonts on your pages.