gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): simplify directory structure

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
guide/english/typography/alignment/index.md Normal file
View File

@@ -0,0 +1,63 @@
---
title: Alignment
---
## Alignment
Typographic alignment alters the flow of text in a document. Designers can use this powerful tool to subtly enhance the presentation of text by giving it visual form and context.
Experiment with alignment to find exciting new visual combinations that make your content stand out. Be sure to test for alignment errors on different devices and browsers.
Use CSS to align text whenever possible. You may encounter HTML alignment tags (e.g., `<p align="right"></p>` or `<center></center>`), but they are deprecated in HTML 5.
### Left-justified Text
Default, `text-align: left;`
When in doubt, the default kind of text justification is usually the best choice. Especially for articles or long blocks of text, left-justified text is easiest to read, as the ragged edges on the right provide visual context to help readers keep their place as their eyes shift from line to line.
Use for:
* Body text
* Most everything else
### Right-justified Text
`text-align: right;`
Right-justified, left-ragged text can be useful as a visual spice but is more difficult to read in long stretches than left-justified text.
Can be used for:
* Captions
* Navigation
* Sidebars
* Quotations
### Centered Text
`text-align: center;`
Use centered text to pull readers' eyes to points of emphasis (e.g., headings, page titles, footers). Do not use centered text for long blocks of text, as it is extremely exhausting to read.
Can be used for:
* Headings
* Page title
* Navigation
* Sidebars
* Captions
* Quotations
* Footers
### Justified Text
`text-align: justify;`
Full-justified text is tricky to recommend for body text, as large gaps can appear between words in some lines. However, skilled desgigners can make beautiful use of it.
Can be used for:
* Captions
* Sidenotes
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
* [Wikipedia Article](https://en.wikipedia.org/wiki/Typographic_alignment)
* [Web Style guide](https://webstyleguide.com/wsg2/type/align.html)
* <a href="http://www.webpagemistakes.ca/text-alignment-on-the-web/" rel='noopener noreferrer'>Text Alignment on the Web</a>

119
guide/english/typography/anatomy-of-letterforms/index.md Normal file
View File

@@ -0,0 +1,119 @@
---
title: Anatomy of Letterforms
---
## Anatomy of Letterforms
The anatomy of Letterforms describes the different elements that make up printed letters in a typeface. The figure below shows the different parts of the letters in a typeface.
![alt text][logo]
[logo]: https://upload.wikimedia.org/wikipedia/commons/a/a3/Typographia.svg
>Parts of a glyph: 1) x-height; 2) ascender line; 3) apex; 4) baseline; 5) ascender; 6) crossbar; 7) stem; 8) serif; 9) leg; 10) bowl; 11) counter; 12) collar; 13) loop; 14) ear; 15) tie; 16) horizontal bar; 17) arm; 18) vertical bar; 19) cap height; 20) descender line.
A typeface broadly consist of 3 different parts 1) **Strokes** 2) **Terminals** 3) **Space**
#### Strokes
Stroke refers to the main body of the letterform. They may be straight, as in letters like _l_, _z_, _k_, _v_ or curved like in _c_ or _o_. The different parts of the stroke are given below
* The imaginary line on which most characters sit is known as the **Baseline** (4).
* The capheight or **capline** (19) is another imaginary line depicting the height of all the uppercase alphabets.
* The imaginary horizontal line that marks the top edge of the lowercase letters is the **Meanline**.
* The **x-height** (1) is the height of the lowercase x. In other words it is the distance between the baseline and the meanline.
* The main vertical or diagonal stroke in a letterform is known as the **Stem** (7).
* The strokes that connect two lines in the capital letterforms of *A* and *H* or cross strokes in *t* is known as **Crossbar** (6).
* When the stroke of a lowercase letter rises above the meanline like in _l_ it is called an **ascender** (5). The **Ascender line** (2) is the imaginary line depicting the distance between the baseline and the top of the ascender.
* When the stroke of a lowercase letter falls below the baseline like in _g_ it is called a **descender**. The **Descender line** (20) is the imaginary line depicting the distance between the baseline and the bottom of the descender.
* An arching stroke as in the top of an _R_ is called a **Shoulder** or sometimes just an _arch_, as in _h_, _n_, _m_.
* A closed curved stroke is called a **Bowl** (10).
* The inferior diagonal stroke seen in _K_ and _R_ is called **Leg** (9).
* A short horizontal stroke seen in the center of _e_, _f_ and in the middle stroke of _E_ and _F_, is called a **Bar**.
* The longer horizontal Stroke on the top or bottom as seen in _E_ and _F_ is called the **Arm** (17).
* The dot above the lowercase _j_ and _i_ is called the **Tittle** or dot or a jot.
* The bottom part of the two-story _g_ is called a **Loop** (13).
#### Terminals
Terminals are the end of the strokes. They are of two types **Serif** and **Sans-Serif**. A seriffed terminal has proftusions on the edges which can be described as a wedge, bulbous, teardrop, slab, etc. Sans-Serif on the other hand does not have these extending features at the end of strokes. Sans-Serif is used often on digital displays these days since they have better legibility on lower resolution displays where serifs are hard to display.
#### Space
Space refers to the white space that is found between the letters and also inside letters like _o_ and _p_ with closed loops.
Below are some basic definitions to help you understand how type is described and measured.
## Typeface
A typeface refers to a group of characters, such as letters, numbers, and punctuation, that share a common design or style. Times New Roman, Arial, Helvetica and Courier are all typefaces.
## Font
Fonts refer to the means by which typefaces are displayed or presented. Helvetica in movable type is a font, as is a TrueType font file.
![The Anatomy of Typography](https://designschool.canva.com/wp-content/uploads/sites/2/2015/07/typography-terms-infographic-tb-1324x0.png)
## Type Families
The different options available within a font make up a type family. Many fonts are at a minimum available in roman, bold and italic. Other families are much larger, such as Helvetica Neue, which is available in options such Condensed Bold, Condensed Black, UltraLight, UltraLight Italic, Light, Light Italic, Regular, etc.
## Serif Fonts
Serif fonts are recognizable by the small lines at the ends of the various strokes of a character. As these lines make a typeface easier to read by guiding the eye from letter to letter and word to word, serif fonts are often used for large blocks of text, such as in a book. Times New Roman is an example of a common serif font.
## Sans Serif Fonts
Serifs are small lines at the ends of character strokes. Sans serif, or without serif, refers to typefaces without these lines. Sans serif fonts are often used when a large typeface is necessary, such as in a magazine headline. Helvetica is a popular sans serif typeface. Sans serif fonts are also common for website text, as they can be easier to read on screen. Arial is a sans serif typeface that was designed specifically for on-screen use.
## Point Sizes
The point is used to measure the size of a font. One point is equal to 1/72 of an inch. When a character is referred to as 12pt, the full height of the text block (such as a block of movable type), and not just the character itself, is being described. Because of this, two typefaces at the same point size may appear as different sizes, based on the position of the character in the block and how much of the block the character fills.
## Pica
The pica is generally used to measure lines of text. One pica is equal to 12 points, and six picas are equal to one inch.
## Baseline
The baseline is the invisible line on which characters sit. While the baseline may differ from typeface to typeface, it is consistent within a typeface. Rounded letters such as "e" will extend slightly below the baseline.
## X-height
The x-height is the distance between the meanline and the baseline. It is referred to as the x-height because it is the height of a lowercase "x." This height can vary greatly between typefaces.
## Tracking, Kerning and Letterspacing
The distance between characters is controlled by tracking, kerning and letterspacing. Tracking is adjusted to change the space between characters consistently across a block of text. This may be used to increase legibility for an entire magazine article. Kerning is the reduction of space between characters, and letterspacing is the addition of space between characters. These smaller, precise adjustments may be used to tweak a specific word, such as in a logo design, or a large headline of a story in a newspaper. All of the settings may be experimented with to create artistic text effects.
## Leading
Leading refers to the distance between lines of text. This distance, measured in points, is measured from one baseline to the next. A block of text may be referred to as being 12pt with 6pts of extra leading, also known as 12/18. This means there is 12pt type on 18pts of total height (12 plus the 6pts of extra leading).
Baseline: The imaginary horizontal line that a majority of letters rest on.
Cap height: The imaginary horizontal line that marks there all capital letters end at the highest point.
Crossbar: The horizontal line that connects two other lines in a letter such as "A" or "H".
Counter: The negative space inside a letter. The counter can be fully enclosed like letters "O" or "A", or partially enclosed like letters "C" or "U".
Descender: The imaginary horizontal line that marks the lowest point of special lowerclase letters such as "g", "j", "p", "q", and "y".
Leg: The lower angled stroke in letters such as "K", "R", and "Q".
Mean line: The imaginary horizontal line that marks the top point of lowercase letters.
Serif: The finishing stroke at the end of the text that creates a "foot" appearance.
Stem: The main vertical stroke in a letterform. This can also be diagonal like in letters "W" or "N".
Tittle: The dot above the lowercase letters such as "i" and "j".
Letterform broadly refers to a letters shape and includes typography. Typography is the apperance of printed letters. In order to understand typography requires a certain vocabulary. By learning the terms of typography, you can also become more critical viewer of printed type.
#### More Information:
* [Wikipedia](https://en.wikipedia.org/wiki/Typeface_anatomy)
* [Sitepoint](https://www.sitepoint.com/the-anatomy-of-a-letterform/)
* [Typomil](http://typomil.com/anatomy/index.html)

51
guide/english/typography/choosing-a-typeface/index.md Normal file
View File

@@ -0,0 +1,51 @@
---
title: Choosing a Typeface
---
## Choosing a Typeface
Form follows function: work from general principles, don't choose typefaces at random.
### When You Can't Choose
When choosing a different typeface is out of the question, you can often still add visual spice to a project by tweaking font sizes, weights, and styles. Furthermore, it is always better to try hit-and-miss strategy, trying a few different fonts before you give up on choosing another typeface. This way, maybe you won't get your desired typeface but you'll have an idea of various other typefaces you could then use in another cases.
### When You Can
#### Appropriate Application
You don't want to stand out in a bad way. The needs of your project often constrain your creative choices: company branding guidelines, download and rendering time, Operating System defaults, accessibility, browser support, etc.
Search for real-life examples of projects like yours to get an idea what typefaces or styles are typical. Designers honed those norms through years of testing and careful consideration.
#### Working Together
Carefully choose contrasting fonts (e.g., Minion and Myriad) and weights (e.g., bold and regular). Avoid using too many or too-similar fonts. More than three typefaces on a single page should give you pause - often either the content is too complex for a single page or the design is noncohesive.
Learn the most common font types (Geometric Sans, Humanist Sans, Oldstyle, Transitional and Modern, Slab Serifs)<sup>1</sup> and how they interact, and you will be able to more knowledgeably manipulate multiple typefaces together.
#### Break the Rules
In the end, guidelines can only take you so far. Creativity and surprise are important components of design work. As much as you pay attention to standards and convention, pay attention to outliers. Study how and why they break the rules to inform your own rule-breaking.
## Tips for quickly choosing a Typeface
* Plan Your Hierarchy
* Consider What Others Have Done Already
* Experiment the Easy Way
* Avoid Anachronisms
* Avoid Trite Correlations
* Consider an Extended Type Family
* Stick With the Classic Combinations
* Use a Limited Palette
#### Sources
1. Dan Meyer, [What Font Should I Use? 5 Principles for Choosing and Using Typefaces](https://www.smashingmagazine.com/2010/12/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/), smashingmagazine.com, 2010.
#### More Information:
[20 Perfect Type Pairings](http://www.creativebloq.com/typography/20-perfect-type-pairings-3132120)
[Choosing the Right Font - A concise article for reference](https://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web--webdesign-15?_ga=2.210603089.55465761.1538586153-769794395.1538586153)
#### More Information:
* [Smashing Magazine article - How to choose a typeface](https://www.smashingmagazine.com/2011/03/how-to-choose-a-typeface/)

23
guide/english/typography/color-and-tonal-value/index.md Normal file
View File

@@ -0,0 +1,23 @@
---
title: Color and Tonal Value
---
## Color and Tonal Value
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/typography/color-and-tonal-value/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
In color theory, a tonal value is produced by adding white, grey, or black to a selected color. This does not change the hue but does alter the colorfullness, also known as saturation. When discussing tonal value, there are three main terms that must be discussed: Tint, Tone, and Shade.
Tint is the addition of white to a color. Tint can be used to highlight an area as well as begin to create the illusion of depth on an object.
Tone is the addition of grey to a color. The tonal color creates a more muted and less saturated color.
Shade is the addition of black to a color. Shade can be used to darken and area to create the illusion of depth on an object.
By altering a colors tonal value, you can create the illusion of depth in images as well as alter the saturation level to better apply color for a desired emotion or mood.

36
guide/english/typography/color-and-value/index.md Normal file
View File

@@ -0,0 +1,36 @@
---
title: Color and Value
---
## Color and Value
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/typography/color-and-value/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
Value is the element that refers to lightness and darkness. Where you can add light or dark pigments to color to give off a different hue.
Hue is a term where to add black or white pigments would result in a shade of said color.
Color is what the eye is stimulated by the reflection of light on a given object or image.
Color is the elment of
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
When discussing visual concepts such as "color" and "value" through written text some missunderstandings can occur. First, color should be undertood as the various hues such as red, orange, yellow, green, blue, violet, and any cobmination they make. The some of the most basic color wheels show these 6 colors. Color wheels can quickly become more complex. Rather than showing one color (hue) of purple, a color wheel can show various combinations such as purple with more of a red hue or blue hue. Color wheels can be designed for many purposes. The selection and placements of various colors can help artists and designers view colors differently, and in turn, make more informed color selections. Color can be a powerful tool to influence the viewer emotionally so learning how to speak and view color beyond different hue labels is important.
Value is the lightness or darkness of a color. When a color is selected, such as red, the hue can be changed by the addition of black or white. By positioning a light color next to a dark color creates contrast. The human eye is naturally drawn to contrast. Learning how to use value to create contrast is a valuabel skill to to either directly or indirectly draw the viewers eye to an area on the page.
Denman Ross, created a nine step value scale that ranges from 1 - White, to 9 - Black. The Ross scale is listed below:
1 - White
2 - High light
3 - Light
4 - Low light
5 - Mid value (the original hue)
6 - High dark
7 - Dark
8 - Low dark
9 - Black
When selecting color, be mindful of value to direct the attention of the viewer by creating contrast.

15
guide/english/typography/column-width-and-leading/index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Column Width and Leading
---
## Column Width and Leading
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/typography/column-width-and-leading/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

41
guide/english/typography/combining-typefaces/index.md Normal file
View File

@@ -0,0 +1,41 @@
---
title: Combining Typefaces
---
## Combining Typefaces
#### Font Pairing Basics
Which fonts look good together and which ones don't? If you've ever struggled with this question, you're not alone. Learn how to pair different fonts and styles by getting familiar with these clever combos!
#### Try these steps one by one
* Pair a regular and bold font to create a subtle contrast
* Balance a script font with a bold font
* Pair a tall and short font to create visual interest
* Pair fonts with different weights to create a strong contrast
* Pair a regular and italic font to create emphasis
There are no hard and fast rules for choosing typefaces, but you can often avoid having to choose new typefaces by styling an existing typeface to create a visual hierarchy. When in doubt, keep it simple.
Designers follow different philosophies to determine when and how to combine typefaces.
### Anchor<sup>1</sup> or Role Typeface
If your project involves large amounts of text, choose an anchor typeface for the body text. This anchor typeface will guide the rest of your design choices as you make continuous tests and refinements for different combinations of typefaces against your anchor.
### Contrasting Typefaces
For text-light projects, having clear hierarchical roles for a font is not as great a concern as visual impact. Pair contrasting typefaces such as serif plus sans-serif. Designers often share their favorite typeface pairs, so search and experiment until you create a pleasing result.
### Typeface Families
Many type foundries create typefaces with extensive extra features like multiple weights and cases, decorative glyphs, serif and sans-serif versions, etc. You can use a single type family like this to ensure consistent design while creatively using those extra features to provide extra emphasis or decoration that might otherwise require another typeface. Typeface families are often a great compromise of visual consistency and typographic flexibility.
#### Sources
1. Tim Brown, [Combining Typefaces: A Pocket Guide](https://blog.typekit.com/2016/04/29/combining-typefaces-free-guide-to-great-typography/), PDF.
#### More Information:
* Shaun Pagin, [The Art Of Mixing Typefaces Google Fonts Edition](http://www.fastprint.co.uk/blog/the-art-of-mixing-typefaces.html).

36
guide/english/typography/ems-and-ens/index.md Normal file
View File

@@ -0,0 +1,36 @@
---
title: Ems and Ens
---
## Ems and Ens
Ems and Ens are a form of the punctuation mark called 'dash'. Although similar in appearance to a hyphen, they serve different purposes.
### Em Dash
Use an Em dash to denote a break in the sentence. Substitute it for a comma or to denote a pause in a sentence. They are also used to attribute a quote to a speaker.
An Em dash is one em wide&mdash;the width of a point size of a typeface. Don't put any spaces before and after an em dash.
<br>
For example: The noise from the neighbor's house&mdash;it's killing me.
* Command for an Em dash on a mac : Shift-Option-Hyphen
* Command for an Em dash on Microsoft Word : Alt + Ctrl + (minus)
* Em dash in HTML : `&mdash;` or `&#8212;`
### En Dash
Use an En dash as a replacement for the word 'to' or to denote a range of numbers. An En dash is half the width of an Em dash. Don't put any spaces before and after an en dash.
<br>
For example: The first world war lasted from 1914&ndash;1918.
* Command for an En dash on a mac : Option-Hyphen
* Command for an En dash on Microsoft Word : Ctrl + (minus)
* En dash in HTML : `&ndash;` or `&#8211;`
#### More Information:
Dash - <a href='https://en.wikipedia.org/wiki/Dash#Em_dash' target='_blank' rel='nofollow'>Wikipedia</a>
Thinking With Type by Ellen Lupton - <a href='http://thinkingwithtype.com' target='_blank' rel='nofollow'>Thinking With Type</a>
Modularscale - <a href='http://www.modularscale.com/' target='_blank' rel='nofollow'>http://www.modularscale.com/</a>

39
guide/english/typography/font-weight-and-style/index.md Normal file
View File

@@ -0,0 +1,39 @@
---
title: Font Weight and Style
---
## Font Weight and Style
Font-weight can be written as text values:
```
font-weight: normal;
font-weight: bold;
```
Or as a numerical value from `100` to `900` (in multiples of 100):
```
font-weight: 400; /* equal to 'normal' above */
font-weight: 700; /* equal to 'bold' above */
```
Numerical value and their common description
| Value | Common Description |
| ----- | ---------------------------- |
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
Not all weights are available for all fonts. Some specialised fonts may only be available in one weight (generally `normal` `400`).
Font-weight can also be specified relative to an element's parent (if a font has more than one weight):
```
font-weight: lighter;
font-weight: bolder;
```

10
guide/english/typography/index.md Normal file
View File

@@ -0,0 +1,10 @@
---
title: Typography
---
## Typography
Typography is a field that deals with the written word and how letters and characters are presented.
The same letters can be styled in different ways to convey different emotions. And there are all kinds of tradeoffs around style versus readability.
In this section, we'll have guides to a variety of typography concepts.

19
guide/english/typography/kerning-and-tracking/index.md Normal file
View File

@@ -0,0 +1,19 @@
---
title: Kerning and Tracking
---
## Kerning and Tracking
Kerning refers to the spacing between two individual characters within a word.
Tracking refers to the spacing between words.
Some typefaces are not designed to be kerned or tracked too loosely and vice versa. If one kerns or tracks too tightly or too loosely, they risk sacrificing readability and legibility.
When deciding how tight or loose to kern or track your text, it is advisable to first consider the scale at which the text will be interacted with. If it is to be printed, how far away from the printed text will the viewer be? Will they be driving by? Will it be on read on a backlit screen?
One should also consider the positive and negative ground when tracking and kerning. Tracking too tightly or too loosely can result in awkward figure/ground relations that will distract the user.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

41
guide/english/typography/legibility-and-readability/index.md Normal file
View File

@@ -0,0 +1,41 @@
---
title: Legibility and Readability
---
## Legibility and Readability
### Legibility
**Legibility** means being able to differentiate different characters in a text. Legible text implies it can be easily interpreted.
Look at the unique characteristics of a typeface when considering legibility. Some of the considerations are as follows:
* You should use each typeface according to it's *context and intended usage*. Look into it's history and it's best use case scenarios. For example : Garamond is best used for large bodies of text on print whereas Georgia for screen.
* Keep in mind whether the typeface is for *display text or body text*.
* The x-height of a typeface is the size of the lowercase 'x' in a typeface. A typeface with *medium to high x-height* results in a text legible at even small sizes.
* Conventionally, **serif** typefaces are more legible for body text than their sans-serif counterparts.
### Readability
**Readability** means arranging group of words or a blocks of text in such a way to make the text more accessible. The idea is to reduce the amount of effort required to read a body of text.
Stephen Coles remarks that readability, not only begs the question of "Can you read it?" but whether **" do you want to read it?"**.
Jason Santa Maria points out in his book *On Web Typography* that reading is not a linear activity. We read in a back and forth motion called **saccades**, which is our eyes hopping from one point to another. Also, text with familiar words makes it easier for us to read. Some basic points to remember when considering readability are as follows:
* **Contrast** refers to the change in thickness of the stroke in different parts of the letter. Higher the contrast, higher the change in stroke. Use medium to low contrast typefaces for long bodies of text.
* **Line Height** refers to the distance between two lines of text. You do not want to make the block of text neither too tight nor too loose. You can control line height in CSS by the property 'line-height'. For most texts, you can set it between 1.2 to 1.5 (without any units).
* **Line length** (measure) refers to the average number of characters in a line of text. A large line length hampers readability by making it difficult for our eyes to scan the text. Usually about 45-75 characters per line is optimal for a body of text. If you plan on increase the line length beyond that, then also take care to increase the line height so that there is enough space between two lines of text. In CSS, you can set the width of the container, and by using the em unit, you can get close to a set number of characters, depending on the width-to-height ratio of the font. Example: width: 35em;
* **Tracking** refers to adjusting the space between characters in a text. Adding tracking means adding white space between characters and vice versa. At small font sizes i.e. less than 10pts, adding tracking helps in improving readability. Similarly, for large headings, use negative tracking to bring the letters closer. You can control tracking in CSS via 'letter-spacing' property. For example : letter-spacing: 0.05em;
* **Font size** refers to the size of the font used in a text. For mobile display, use sizes of at least 12px. You can control font-size in CSS via 'font-size' property. Example: font-size: 48px;
As you can see, you need to take into account a lot of factors to ensure optimal legibility and readability. Remember, there are no hard and fast rules for any of the above described factors. They are mere guidelines which might help you to train your typographic eye better.
### Additional Links:
* [Practical-typography](https://practicaltypography.com) for basics of Typography.
* [Tutsplus Web Design](https://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211) - An Article on Legibility and Readability
* [On Web Typography](https://abookapart.com/products/on-web-typography) - A book about typography on Web.

20
guide/english/typography/measuring-type/index.md Normal file
View File

@@ -0,0 +1,20 @@
---
title: Measuring Type
---
## Measuring Type
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/typography/measuring-type/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
There are two units of meausurement to meausure font points and picas
A Point is 1/72 of an inch. Point is also abbreviated as "pt"
A Pica contains 12 points, its a bit less than 1/6 of an inch.

15
guide/english/typography/optical-alignment/index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Optical Alignment
---
## Optical Alignment
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/typography/optical-alignment/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

26
guide/english/typography/page-layout/index.md Normal file
View File

@@ -0,0 +1,26 @@
---
title: Page Layout
---
## Page Layout
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/typography/page-layout/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### Page Layout:
Page layout is the term used to describe how each page of your document will appear when it is printed. In any Word processor (Microsoft Word, LibreOffice Writer etc), page layout includes elements such as the margins, the number of columns, how headers and footers appear, and a host of other considerations. As you design your pages, you can use the tools that any Word processor puts at your disposal in this regard. We have many features under page layout like:
#### Page Orientation:
Word processors offers two (2) page orientation options: Landscape and Portrait. Landscape means the page is oriented horizontally, while portrait means the page is oriented vertically.
#### Page Size:
By default, the page size of a new document is 8.5" by 11". Word processors have variety of pre-defined page sizes to choose from: Letter (8.5" by 11"), Legal (8.5" by 14"), Executive (7.25" by 10.5"), A3 (11.7" by 16.5"), A4 (8.27" by 11.69"), A5 (5.83" by 8.27"), A6 (4.13" by 5.83") and other page size.
#### Page Margins:
A margin is the space between the text and the edge of your document. By default, a new document's margins are set to Normal, which means it has a one-ince space between the text and each edge (Top, Bottom, Left, Right). Other page margins setting include: Narrow (Top: 0.5" Bottom: 0.5" Left: 0.5" Right: 0.5"), Wide (Top: 1" Bottom: 1" Left: 2" Right: 2"), Moderate (Top: 1" Bottom: 1" Left: 0.75" Right: 0.75") and others.
#### Page Numbering:
Word processors allow us to do page numbering in our document either at the top position or at the bottom position.It can also be aligned at the left, center or right.
#### Header and Footer:
This is a feature of the page layout that allow us to insert some text either at the head or foot of our document.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

15
guide/english/typography/paragraph-indications/index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Paragraph Indications
---
## Paragraph Indications
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/typography/paragraph-indications/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

15
guide/english/typography/placement/index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Placement
---
## Placement
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/typography/placement/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

38
guide/english/typography/point-size/index.md Normal file
View File

@@ -0,0 +1,38 @@
---
title: Point Size
---
## Point Size
The point size is a way to introduce standardization to typography. The point size is the smallest unit of measurement.
In metal type, point size refers to the height of the metal body on which a typeface's character is cast. In digital typefaces, the metal body is replaced by an invisible box known as the *em square*. Each character fits inside that em square or em box. The **em size of a font is equal to it's point size.**
```css
html{
font-size:16px;
}
body{
font-size:1em; // 1em is equal to 16px
}
```
The point size is also used to measure leading (line-height), line length and other elements, apart from font size.
In digital typefaces, **one point is equal to 1/72 of an inch**. Twelve points make one pica. Six picas make one inch. A common way of representing picas and points is as follows:
- 1 pica = 1p
- 1 point = 1 pts or p1
- 6 picas and 3 points = 6p3
- 7-point Open Sans with 9 points of leading = 7/9 Open Sans
The optimal point size for print is usually between 10-12 points while that for web, the optimal point size is between 15-25 points.
In CSS, you should set font-size in ems or rems than pixels as the former are scalable in nature. Recently, there has been much talk about fluid typography using the newly introduced units vw and vh. Learn more about it here : [Fluid Typography](https://www.smashingmagazine.com/2016/05/fluid-typography/)
Remember, different fonts set at the same point size will not appear to be of the same size due to their individual characteristics, namely&mdash;x-height, stroke modulation or contrast and character-width.
#### More Information:
* [Point Size](https://practicaltypography.com/point-size.html) Practical Typography
* [Point Size](https://en.wikipedia.org/wiki/Point_(typography)) Wikipedia
* [Thinking with Type](http://amzn.to/2yDqGNR) Thinking With Type

30
guide/english/typography/type-classifications/index.md Normal file
View File

@@ -0,0 +1,30 @@
---
title: Type Classifications
---
## Type Classifications
Almost all typefaces fall into one group or another. This system of classifying typefaces developed in the nineteenth century. Each typeface has it's own visual structure, influences, intent and historical significance.
The basic classification of typefaces is as follows:
* **Serifs**: These typefaces have small extensions, which embellish the basic structure of a typeface. Serif typefaces have existed since the beginning of type. They are visible in Old style and Humanist type serifs like Garamond. Baskerville, another serif typeface belongs to the transitional era. Bodoni and Rockwell are part of Modern and Slab serif(Egyptian) styled typefaces.
* **Sans-serif** : Sans means without. These typefaces are devoid of those small extensions, hence without serif. Examples include Gill sans which has Humanist connotations, Helvetica with it's transitional characteristics and so on.
* **Script**: Letter forms developed in close relation to human handwriting are script typefaces. They are flexible in nature with varying stroke widths. Example : Bistro Script, Shelly, Minstral etc.
* **Blackletter** : A bold script style of calligraphy used heavily during the renaissance. Example: Fraktur
* **Decorative**: Typefaces which do not fit in other categories are decorative in nature. Built for specific use cases which largely consist of headlines, posters etc.
In addition, three main groups to classify type corresponding to different time periods in art and literature are as follows:
* **Humanist** letter forms belong to the renaissance period of around 15th & 16th century. They closely mimic calligraphy and human hand movement. Old serifs followed humanist letter forms. Examples of humanist type are : Sabon, Centaur, Adobd Jenson, Gill Sans etc.
* **Transitional** letter forms are part of the baroque era. They represent a transition from old style humanist typefaces to modern typefaces. Examples are : Baskerville, Times Roman, Helvetica etc.
* **Modern** letter forms, are part of the enlightenment period of around 18th-19th century. They depict a radical shift from traditional typography to a more abstract design. Examples are : Bodoni, Futura etc.
![Image of Type Classification](http://thinkingwithtype.com/images/Thinking_with_Type_Letter_12.gif) <br>
> Image taken from the online version of the book Thinking with Type by Ellen Lupton
#### More Information:
* [Type Classification](http://www.designishistory.com/1450/type-classification/) Design History
* [Vox-Atypl Classification](https://en.wikipedia.org/wiki/Vox-ATypI_classification) Wikipedia
* [Thinking with Type](http://thinkingwithtype.com/letter/#type-classification)
* [Type Classification - 6 part series](http://ilovetypography.com/2007/11/06/type-terminology-humanist-2/) I love Typography

28
guide/english/typography/type-families/index.md Normal file
View File

@@ -0,0 +1,28 @@
---
title: Type Families
---
## Type Families
### General Information
Type families are ranges of typeface designs. Each family is a variation of a basic style of alphabet. There are hundreds or maybe even thousands of typeface families.
Reference-style:
![Helvetica Neue Type Family](https://upload.wikimedia.org/wikipedia/commons/0/00/Helvetica_Neue_typeface_weights.svg)
### History
The concept families of type hadn't formed when typefaces were first invented, and all fonts were roman designs. During the early years of the 16th century, cursive type was introduced. Cursive was also called italic, named after Italy, where the idea was popularized. Romans were one style of type and italics were another, like serif and sans serif, and there were still no typeface families.
### Punctuation
Punctuation gives type emotion, and gives indications on when to stop, slow down, and much more.
### There are seven types of font families
- Old Style
- Transitional
- Modern
- Slab Serif
- Sans Serif
- Decorative
- Script-Cursive
#### More Information:

15
guide/english/typography/type-styles/index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Type Styles
---
## Type Styles
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/typography/type-styles/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

28
guide/english/typography/typeface/index.md Normal file
View File

@@ -0,0 +1,28 @@
---
title: Typeface
---
## Typeface
In modernday web-design the word "font" came to define what is actually called "typeface" in professional design world. In fact, typeface means something that we know as distinctive style of font-family: a specific shape of letters (professionally known as glyphs), based on which different fonts are generated by means of adding font-weight (bold, semi-bold, etc.) or making the letters italicised and so on.
To give a simple example, all of the different fonts on the image below belong to the same typeface called "Futura" but different styling of the letters with the same shapes (glyphs) produces different visual effect for each font.
![Futura typeface](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/10/Futura.gif)
Image courtesy of [Sitepoint.com](https://www.sitepoint.com/typography-concordant-contrasting-conflicting/)
Most common typeface styles include:
* Serif
* Monospace
* Script
**Beginner-designer tip:** While script fonts, such as brush fonts or calligrahpy and handwritten, might be truly trendy in web-design right now, bad combination of fonts can truly ruin otherwise good aesthetics of the page. Therefore, try to avoid mixing in two many fonts. In fact, do not even go for two! Start with one typeface (i.e. font-family) which offers several styles (fonts). This will guarantee that the fonts you use will blend in well together. Use bold version for main headers and light version for text. When you feel secure with your designer choice of matching font-types, feel free to try and mix your own font pairings.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

29
guide/english/typography/typographic-hierarchy/index.md Normal file
View File

@@ -0,0 +1,29 @@
---
title: Typographic Hierarchy
---
## Typographic Hierarchy
A webpage itself has a hierarchy that not only is read, but contains interaction. The page as a whole must be designed in a way that clearly communicates to the user what actions are available and how to easily access the information they seek, how to purchase an item, etc.
For the purpose of this article, however, we’re talking strictly about hierarchy as it applies to type. Luckily for us, we have our own handy HTML tag that lets us semantically establish typographic hierarchy into the websites we build. Heading tags (H tags) allow us to specify an order of importance into our content: H1 through H6, H1 being most important, H6 being least. Search engines use this data to interpret priority of content on a webpage.The H tag can be styled by using the following attributes.
-Size
This is the easiest and most common method for establishing hierarchy.
-Weight
Simply using a bolder weight of a font can help isolate.
-Color
Color plays a big role in what our eye sees as primary and secondary. Generally speaking; warm colors pop, cooler colors recede.
-Position
Where sections of information are positioned in relationship to each other can establish a hierarchy.
-Type Contrast
A great way to achieve hierarchy is to use contrasting typefaces.
Spacing Matters!
One of the most important concepts in type design is spacing. It’s one of the most difficult concepts to grasp for beginning designers, yet it is also one of the most visually obvious. Proper typographic spacing is critical in establishing hierarchy; it can make the difference between confusion and clarity. It is used in the majority of hierarchical systems, and it is present in all of the examples in this article.
#### More Information:
You can refer-https://webdesign.tutsplus.com/articles/understanding-typographic-hierarchy--webdesign-11636

15
guide/english/typography/typographic-measurements/index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Typographic Measurements
---
## Typographic Measurements
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/typography/typographic-measurements/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

27
guide/english/typography/upper-and-lower-case/index.md Normal file
View File

@@ -0,0 +1,27 @@
---
title: Upper and Lower Case
---
## Upper and Lower Case
Uppercase (UC) is alternatively referred to as caps and capital. It is a typeface of larger characters. Lowercase (LC) is a typeface of small characters. As long as the shift key is not being pressed and the Caps lock is not active, everything typed is in lowercase. The Uppercase and Lowercase is often synonymous with Majuscule and Minuscule.
Many languages have two different written representations of their letters, **upper case** and **lower case**, also known as majuscule and minuscule forms.
Upper case and lower case letters are often mixed in the same piece of text. The use of cases is decided by grammar, but a variety of [case styles](https://en.wikipedia.org/wiki/Letter_case#Case_styles) also exists.
Certain case styles are common in computer programming, referred to as [naming conventions](https://guide.freecodecamp.org/javascript/naming-convention-for-javascript), like CamelCase and snake_case.
## Uppercase:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
## Lowercase:
a b c d e f g h i j k l m n o p q r s t u v w x y z
Capitalization is important for the following reasons:
- Passwords: passwords are case sensitive, so capitalization add an extra level of security.
- Measurements: When dealing with computer measurement, and other measurements, capitalization is important for identifying the exact type of measurement. For example, "Mb" (short for Megabit) and "MB" (short for Megabyte) are two different types of measurements with different values.
- Commands
- File names, directories and paths.
#### More Information:
<a href='https://www.computerhope.com/jargon/u/uppercase.htm'>Computer Hope</a> <br>
<a href='https://www.computerhope.com/jargon/l/lowercas.htm'>Computer Hope</a> <br>
<a href='https://en.m.wikipedia.org/wiki/Letter_case'>Wikipedia</a>

61
guide/english/typography/where-to-get-fonts/index.md Normal file
View File

@@ -0,0 +1,61 @@
---
title: Where to Get Fonts
---
## Where to Get Fonts
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
Online font services like Google Fonts or Font Squirrel provide an easy way to use different fonts on your site without the need to worry about whether or not the person viewing your site will have the font available on their system.
### Downloaded Fonts
Sites like Font Squirrel allow you to download the font files you've chosen. Once it's done, you have to upload them on the server hosting your website. To use them, you then need to declare them in your CSS stylesheet which means telling your CSS to ask the user's browser to display it. Declare a font is usually made using `@font-face` on top of your CSS stylesheet.
```css
@font-face {
font-family: "My Super Awesome Open Sans Font"; /* name that you will use later to apply the font */
src: url("/fontfolder/open-sans.woff"); /* path to the file */
}
body {
font-family: "My Super Awesome Open Sans Font";
}
```
Note that you can also specify the format of the font according to browser compatibility as following.
```css
@font-face {
font-family: "My Super Awesome Open Sans Font";
src: url("/fontfolder/open-sans.woff"); format("woff"),
}
```
### Google Fonts
With Google Fonts, you don't need to upload the font files on your site, you just have to put a certain link on the `head` of your site.
To use Google Fonts, browse the [site](https://fonts.google.com/) to find the font that works best for your project. Once you've chosen, click the plus (+) sign next to the font. A bar will appear at the bottom of the screen. Click on it. You will then be given several lines of code. Copy and paste the line of HTML into the head of your HTML file above the existing <link> element. Then take the CSS and use it where necessary in your stylesheet.
```html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
</head>
<body>
Some text.
</body>
</html>
```
```css
body{
font-family: "Inconsolata", monospace;
}
```
You're done! You successfully have new fonts for your site.
##### Additional Resources:
* [Google Fonts](http://fonts.google.com)
* [FontSpace](http://www.fontspace.com)
* [Font Squirrel](http://fontsquirrel.com)
* [DaFont](http://www.dafont.com)
* [1001 Free Fonts](http://www.1001freefonts.com)
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
* [Web fonts overview from Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts)