Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves - selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters.

We have used Roboto font, the standard font used by Material Design. You'll find the fonts in the font folder of the Propeller kit you download.

Heading Display heading Lead Inline text element Blockquote Address Configuration Options

Heading

All HTML heading tags, <h1> through <h6> are available. .h1 through .h6 are used when you want to match the font styling of a heading but still want your text to be displayed inline.

code 

							  

							  

								  

							  

						  
 
					  
 

					  
					  
 
						  

							  
h1. Propeller heading

							  
h2. Propeller heading

							  
h3. Propeller heading

							  
h4. Propeller heading

							  
h5. Propeller heading

							  
h6. Propeller heading

						  

					  
 

                  	
 
					
					
                    

					
						
						

							code 
						
 
						
						
						

							

								

								
							
	
						  

							  

								  

							  

							  

								  

							  

						  

						
 
						
						
						
 
							

								
Display heading With faded secondary text

							

						

						
Use the included utility class .text-muted to recreate the small secondary heading text from Bootstrap.

                          
                  	
 
					
              	

				
            
 
      
            
            

				
				
            	

               		

                		
Display Heading

              		

                  	
Traditional heading elements are designed to work best for your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. For example: Use .pmd-display4 for a large heading. 

				
 
				
            	

					
					
                	

					
						 	
						

							code
						
 
						
						
						

							

								
 
								
							

							

							  

								  

							  

							  

								  
                                    
							  

							

						
 
						
						
						
 
							

								
Display 4

								
Display 3

								
Display 2

								
Display 1

							

						
 
						
                 	
 
					 
				

					
            
  
            
            
            

				
				
              	

              		

                		
Lead

              		

                  	
Make a paragraph stand out by adding .lead.

              	
 
				
                

					
              		

                         	
						

							code
						
  	
                        
						
						

							

								
 
								
							

							

								

									

								

								

									
                                      
								

							

						
 
                           
						
						
 
							

								

									Propeller is a front-end responsive framework based on Material Design and Bootstrap.
								

							

						
  
	              	
 
				

            

            
            
            

				
				
              	

              		

                		
Inline Text Element

              		

                  	
Style your inline HTML elements with inline tags based on your requirement.

              	

            
              	

					
					
              		

					
                        
						

							code
						
 
                        
                        
                        

                        	

                            	
 
								
	                        

                            

                                

                                    

                                

                                

                                    

                                

                            

                        

                        
						
                        
 
							

								
								
Use mark tag to highlight text.

								
								
This line of text is meant to be treated as deleted text. Use del tag for it.

								
								
This line of text is meant to be treated as no longer accurate. Use s tag for it.

								
								
This line of text is meant to be treated as an addition to the document. Use ins tag for it.

								
								
This line of text will render as underlined. Use u tag for it.

                                
                                
This line of text is meant to be treated as fine print. Use small tag for it.

                                
                                
This line rendered as bold text. Use strong tag for it.

                                
                                
This line rendered as italicized text. Use em tag for it.

							

						
 
						
              		
  
					    
              	


            

            
            
            

				
				
              	

               		

                    	
Blockquote

                    

                  	
For quoting block of content from another source within your document. Wrap <blockquote> around any HTML as the quote. For straight quote, we recommend a <p>.

              	
 

              	


					
              		

						
						

							code
						
 
	
						
						

							

								
 
								
							
	
							

								

									

								

								

									
                    	

							

						
 
						
						
						
 
							

								

									
Propeller is a responsive and ready to use component library to start with. 

								

							

						
 
              		
 
					
					
              		

                       
					    
						

							code
						
 
                        
                        
                        

                        	

                            	
 
                            	
                            

                            

                                
 
                                	

                                

                                

                                	

                                

                            

                        
 
						
						
						
 
							

								

									
Create something simple. Let the market pull you in.

									
Brad Burnham, Co-Founder Union Square Ventures

								

							

						
 
						
Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.
 
						
              		
 
              		
					
              		

                        
						
						

							code
						
 

                        
                        

                        	

                            	
 
								
							 

							

								

									

								

								

									

								

							

                        

                        
						
						
 
							

								

									
Millions of amazing sites across the web are being built with Bootstrap.

									
Someone famous in Source Title

								

							

						

						
Add .blockquote-reverse for a blockquote with right-aligned content.
 
						
              		
  
					
            	

            
  
            
            
            

				
				
              	

              		

                		
Address

              		

                  	
Used to provide contact information. Preserve formatting by ending all lines with tag br.

              	


              	

					
              		

						
						

							code
						
 
                        
                        
                        

                        	

                            	
 
								
                            

                            

                                

                                    

                                

                                

                                    

                                

                            

                        
 

						
						
 
							

								

								Twitter, Inc.

								1355 Market Street, Suite 900

								San Francisco, CA 94103

								P: (123) 456-7890
								

								

								Full Name

								first.last@example.com
								

							
 
						
 
              		
 
              	

            
 
            
            
        	

                

                	

                		
Configuration Options

              		

                    
The Propeller CSS classes apply various predefined visual enhancements to the typography. The table lists the available classes and their effects.

                

            	

                    
                    

						
 
                            

                                
                                    

                                        Propeller Class
                                        Effect
                                        Remark
                                    

                                
                                
                                    

                                        .pmd-display4
                                        Display heading style for largest heading.
                                        Optional
                                    

                                    

                                        .pmd-display3
                                        Display heading style for second largest heading.
                                        Optional
                                    

                                    

                                        .pmd-display2
                                        Display heading style for small heading.
                                        Optional
                                    

                                    

                                        .pmd-display1
                                        Display heading style for smallest heading.
                                        Optional
                                    

                                    

                                        .pmd-caption
                                        Show a caption content.
                                        Optional