Overview:
This article applies to styling your headings, text, buttons, links and any other element that uses text. Let's dig into how we apply our different styles and our approach to maintaining consistency throughout the project.
Before getting started:
Before you start editing all of your text elements, it's important to be mindful that changing typography styling is very much a double edged sword. On one end, you can customize everything for the perfect user experience, and on the other end you're opening up yourself to inconsistencies with many different typography options. I strongly recommend you setup your own brand guide or type style guide first. If you don't want to use your own then you can always use the nintu typography styles which can be found here. You should define what each of your different headings should look like for both light and dark mode as well as three variants of body text (small, base, large).
I made the mistake of not doing this when I first started working on nintu and 2 months down the line found myself with no consistency in my designs. The only solution to then solve this was to go back through every template and update it with a defined type style. Once this had been defined my life was made much easier. Please do as I say and not as I did <3.
Styling:
Text color:
There are couple of ways types of color you might be applying to your text:
- Primary colors: These are applied by using the "text-p-" class with your desired shade. Say you wanted your text to be your primary color you would use "text-p-500" as a class.
- Neutral colors:This will be your main color palette for text and are applied by using the "text-n-" class with your desired shade. In most cases you can follow the following styling rules:
- If styling a text element you will be using "text-n-500" for text on a white background and "text-n-400" for text on a dark background. If you have dark mode live on the site you can have the two auto toggle by using "text-n-500" (the default, for light mode) and "dark:text-n-400" (for when dark mode is switched on)
- If styling a heading element you will be using "text-n-700" for text on a white background and "text-white" for text on a dark background. If you have dark mode live on the site you can have the two auto toggle by using "text-n-700" (the default, for light mode) and "dark:text-white" (for when dark mode is switched on.
- Other colors: You can also use any other color built into tailwind's framework. These colors also each come in 10 shades and use the same naming convention as our primary and neutral colors. You can find a list of all tailwind text color classes here.
