Advanced Search

12 Examples of Paragraph Typography

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2. This is how browsers style paragraphs by default:
  3. Flush left, ragged right, one em boundary and line height
  4. */
  5. p {}
  6.  
  7. /* 
  8. Flush left, ragged right
  9. 1.25em basic leading (line height), one lead boundary (vertical margins)
  10. */
  11.  
  12. p {
  13. font-size: 1em;
  14. line-height: 1.25em;
  15. margin: 1.25em 0;
  16. text-align: left;
  17. }
  18.  
  19. /* 
  20. Justified
  21. 1.25em basic leading (line height), one lead boundary (vertical margins)
  22. */
  23.  
  24. p {
  25. font-size: 1em;
  26. line-height: 1.25em;
  27. margin: 1.25em 0;
  28. text-align: justify;
  29. }
  30.  
  31. /* 
  32. First line flush left
  33. Subsequently 1em indent, ragged right, ½ lead boundary
  34. */
  35.  
  36. p {
  37. font-size: 1em;
  38. line-height: 1.25em;
  39. margin: 0.625em;
  40. text-align: left;
  41. }
  42. p + p {
  43. text-indent: 1em;
  44. }
  45.  
  46. /*
  47. First line flush left
  48. Subsequently two lead indent, ragged right, no boundary
  49. */
  50.  
  51. p {
  52. font-size: 1em;
  53. line-height: 1.25em;
  54. margin: 0;
  55. text-align: left;
  56. }
  57. p + p {
  58. text-indent: 2.5em;
  59. }
  60.  
  61. /*
  62. First line flush left
  63. Subsequently two lead indent, no boundary, justified
  64. */
  65.  
  66. p {
  67. font-size: 1em;
  68. line-height: 1.25em;
  69. margin: 0;
  70. text-align: justify;
  71. }
  72. p + p {
  73. text-indent: 2.5em;
  74. }
  75.  
  76. /*
  77. 1em outdent, no boundary
  78. */
  79.  
  80. p {
  81. font-size: 1em;
  82. line-height: 1.25em;
  83. text-indent: -1em;
  84. text-align: left;
  85. }
  86.  
  87. /*
  88. CSS pseudo elements used to prepend the paragraphs with a pilcrow. Not supported by IE.
  89. Continuous text.
  90.  
  91. N.B.
  92. Text cannot be justified using CSS when paragraphs are set to display:inline.
  93.  
  94. */
  95.  
  96. p {
  97. font-size: 1em;
  98. line-height: 1.25em;
  99. display: inline;
  100. text-align: justify;
  101. }
  102. p + p:before {
  103. content: "¶ ";
  104. }
  105.  
  106. /*
  107. Raised initial size is set pragmatically to fit three line size
  108. without causing browsers to break the following line with their 
  109. baseline and line-height rendering.
  110. Paragraphs set with ½ lead boundary, justified
  111.  
  112. N.B. 
  113. :first-letter pseudo element refused with p display:inline
  114. :first-letter pseudo element color property not applied. Requires tests.
  115. */
  116.  
  117. p {
  118. font-size: 1em;
  119. line-height: 1.25em;
  120. margin: 0.625em 0;
  121. text-align: justify;
  122. }
  123. p:first-letter {
  124. font-size: 3.5em;
  125. line-height: 1em;
  126. }
  127. p + p:first-letter {
  128. font-size: 1em;
  129. line-height: 1.25em;
  130. }
  131.  
  132. /*
  133. Drop cap treatment is set without any vertical correction - 
  134. Works OK in FF3, but cross-browser consistency will require further adjustment
  135. Paragraphs set with no boundary, justified
  136. */
  137.  
  138. p {
  139. font-size: 1em;
  140. line-height: 1.25em;
  141. margin: 0;
  142. text-align: left;
  143. }
  144. p + p {
  145. text-indent: 2.5em;
  146. }
  147. p:first-letter {
  148. font-size: 3.5em;
  149. line-height: 1em;
  150. font-weight: 400;
  151. float: left;
  152. margin: 0 0.107em 0 0;
  153. }
  154. p:first-line {
  155. font-weight: 800;
  156. }
  157. p + p:first-letter {
  158. font-size: 1em;
  159. line-height: 1.25em;
  160. float: none;
  161. margin: 0;
  162. }
  163. p + p:first-line {
  164. font-weight: 400;
  165. }
  166.  
  167. /*
  168. Outdent cap treatment is set without any vertical correction - 
  169. Works OK in FF3, but cross-browser consistency will require further adjustment. 
  170. Paragraphs set with ½ lead boundary, justified
  171. */
  172.  
  173. p {
  174. font-size: 1em;
  175. line-height: 1.25em;
  176. margin: 0.625em 0;
  177. padding: 0 0 0 8em;
  178. text-align: justify;
  179. }
  180. p:first-line {
  181. font-weight: 800;
  182. font-variant: small-caps;
  183. }
  184. p:first-letter {
  185. font-size: 8em;
  186. line-height: 1em;
  187. font-weight: 400;
  188. float: left;
  189. margin: 0 0 0 -0.1em;
  190. }
  191. p + p:first-letter {
  192. font-size: 1em;
  193. line-height: 1.25em;
  194. float: none;
  195. margin: 0;
  196. }
  197. p + p:first-line {
  198. font-weight: 400;
  199. font-variant: normal;
  200. }
  201.  
  202. /*
  203. CSS pseudo elements used to prepend the paragraphs 
  204. with a section sign and mid point
  205. Paragraphs set with one lead boundary, justified
  206. */
  207.  
  208. p {
  209. font-size: 1em;
  210. line-height: 1.25em;
  211. margin: 1.25em 0;
  212. padding: 0;
  213. text-align: justify;
  214. }
  215. p:before {
  216. content: "§ ";
  217. }
  218. p + p {
  219. padding: 0 0 0 8em;
  220. }
  221. p + p:before {
  222. content:: "• ";
  223. }

URL: http://jontangerine.com/silo/typography/p/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.