+

Typography






Typography is all about font style or appearance of text on your website. For website designing, it is necessary that our typography (font-sizes) must be responsive. Now a days, people mostly use your website on mobile. Therefore, PixelzUI gives you fonts that look amazing and readable on all devices such as desktop, tablet and mobile. When we talk about communication in web design context and especially responsive web designing, we tend to typically mean text which is font-sizes in CSS at designing level. Typography plays a significant role during this method. In other words, optimizing your typography additionally optimizes your user interface (UI). In this ui-component, We'll offer a collection of rules (in the form of CSS classes) that assist you improve readability and legibility of your text content on responsive website. PixelzUI provides global settings for font/text size(s) for your web-pages, web-apps, templates, emails and websites. Typography of PixelzUI include thirty-six classes for text formatting and four classes for text styling. These are all cool fonts you can see them in demo section below. These classes start from .ft0 to .ft9 and then .ftA to .ftZ.
However, .ft-b, .ft-i, .ft-u and .ft-l are used for bold, italic font, upper-case and lower-case respectively. Very simple classes to write in your markup or script. You don't need to customize extra css rules for it. Just write the typography class of your own choice. If you want to edit the existing class you just rewrite the alphabets. So much simple to use! For example, If you give .ftS class for your paragraph tag in your markup, and you see it looks bigger or not suitable, you can change it into .ftC. Just by replacing alphabets you will feel responsive font size of your own choice. It is pretty fun now in web designing. PixelzUI caters media queries for all mobile devices. It helps you for web typography i.e., web fonts in a right way.

Types

PixelzUI has rich funky fonts for typography. Having the proper quantity of characters on every line is vital to the readability of your text for responsive designs. Every font size of PixelzUI is adjustable on all devices. You don't need to worry about font design now. PixelzUI provides responsive font designs which will display visible, scalable and stunning on all device like mobiles, tablets and desktops etc. For making responsive web template, it is necessary to use professional fonts. Followings are the two types of typography.

  1. Based on size
  2. Based on styles
=>Other types of typography are based on color classes.

Classes

In modern web design trend, designers use beautiful fonts and font design for your website. PixelzUI have a number of the ways that affects typography for your end users' of your website. PixelzUI is the choice of every font finder and you will see easy font names in css classes. Following are the classes to use typography in your scripts.

  1. .ft0
  2. .ft1
  3. .ft2
  4. .ft3
  5. .ft4
  6. .ft5
  7. .ft6
  8. .ft7
  9. .ft8
  10. .ft9
  11. .ftA
  12. .ftB
  13. .ftC
  14. .ftD
  15. .ftE
  16. .ftF
  17. .ftG
  18. .ftH
  19. .ftI
  20. .ftJ
  21. .ftK
  22. .ftL
  23. .ftM
  24. .ftN
  25. .ftO
  26. .ftP
  27. .ftQ
  28. .ftR
  29. .ftS
  30. .ftT
  31. .ftU
  32. .ftV
  33. .ftW
  34. .ftX
  35. .ftY
  36. .ftZ
  37. .ft-b
  38. .ft-i
  39. .ft-u
  40. .ft-l
.
=>Other classes for typography are based on color classes.

How to use

As you'll see, there are variety of the ways in which you'll change how typography seems on a screen for better web designing. If you'll provides it the proper sense of speed and ease, you'll encourage a lot of users to read through it all. That's why PixelzUI gives you beautiful fonts of every size. Followings are the steps for using typography to your websites fully responsive.

  1. Add .ft* in class attribute of html tags capable for text formating.
  2. <div class="ft*"></div>
  3. Add .ft-# in class attribute of html tags capable for text styling as bold, italic, upper-case and lower-case respectively.
  4. <div class="ft* ft-#"></div>
    =>* means (0 - 9 and A - Z).

    =># means (b, i ,u and l).

Demo

See the demo throughly and you will see the same effect in your designs.
Text Styling

  1. Bold:
    Design Responsive Websites
  2. Italic:
    Design Responsive Websites
  3. Upper-case:
    Design Responsive Websites
  4. Lower-case:
    Design Responsive Websites
  5. Bold and italic:
    Design Responsive Websites
  6. Bold and upper-cased:
    Design Responsive Websites
  7. Bold and lower-cased:
    Design Responsive Websites
  8. Italic and upper-cased:
    Design Responsive Websites
  9. Italic and lower-cased:
    Design Responsive Websites
  10. Bold, Italic and upper-cased:
    Design Responsive Websites
  11. Bold, Italic and lower-cased:
    Design Responsive Websites



Text Sizing

  1. Design Responsive Websites

  2. Design Responsive Websites

  3. Design Responsive Websites

  4. Design Responsive Websites

  5. Design Responsive Websites

  6. Design Responsive Websites

  7. Design Responsive Websites

  8. Design Responsive Websites

  9. Design Responsive Websites

  10. Design Responsive Websites

  11. Design Responsive Websites

  12. Design Responsive Websites

  13. Design Responsive Websites

  14. Design Responsive Websites

  15. Design Responsive Websites

  16. Design Responsive Websites

  17. Design Responsive Websites

  18. Design Responsive Websites

  19. Design Responsive Websites

  20. Design Responsive Websites

  21. Design Responsive Websites

  22. Design Responsive Websites

  23. Design Responsive Websites

  24. Design Responsive Websites

  25. Design Responsive Websites

  26. Design Responsive Websites

  27. Design Responsive Websites

  28. Design Responsive Websites

  29. Design Responsive Websites

  30. Design Responsive Websites

  31. Design Responsive Websites

  32. Design Responsive Websites

  33. Design Responsive Websites

  34. Design Responsive Websites

  35. Design Responsive Websites

  36. Design Responsive Websites

Editing

You can make or modify your typography of your own choice by using this editor.

  1. Select font size from range slider.
  2. Choose font color from color picker.
  3. Select font style either bold, italic or both.
  4. Select font formate either upper-case, lower-case or both.
  5. See the effect in dummy panel and HTML code.
  6. Copy that HTML code and place it in your script.

Font Color

Font Style

Bold Italic
UPPER-CASE lower-case

Font Size

Design Responsive Websites

HTML



Leave a Reply

Your email address will not be published. Required fields are marked.