Courses/Design & Technique-Essential Web Design/05 - Revision history

Andre at 11:34, 10 October 2018

2018-10-10T11:34:46Z

← Older revision		Revision as of 11:34, 10 October 2018
Line 205:		Line 205:


	~~== Assignment#1 ==~~
	* find a text or several that you consider interesting;
	* place it on a webpage.
	* type-set it with CSS, so that the style either illustrates, contradicts, or is in dialog with the content.

	~~'''Rules:'''~~
	* use at least a custom font
	* make use of CSS [[Courses/Design_%26_Technique-Essential_Web_Design/04#css_for_typography\|essential typography properties]]
	* be bold, be extreme: you can go from a legible and soothing style, to total illegible and cryptic. Most important is that the style responds to the text content. And that you have fun and find out new things while doing it.

	~~'''Example:''' http://publicationstation.wdka.hro.nl/go/Alice.html~~

	==References==		==References==
	* [https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/beautiful fonts with @font-face]		* [https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/beautiful fonts with @font-face]
	* [https://developer.mozilla.org/en/docs/Web/CSS/@font-face Mozilla @fontface]		* [https://developer.mozilla.org/en/docs/Web/CSS/@font-face Mozilla @fontface]

2018-10-03T12:32:50Z

CSS for typography

← Older revision		Revision as of 12:32, 3 October 2018
Line 13:		Line 13:
	* text-shadow		* text-shadow
	* text-indent		* text-indent
			* column-count: the number of text columns
			* column-width
			* text-transform: uppercase, lowercase

	==::first-letter and ::first-line :first-of-type ==		==::first-letter and ::first-line :first-of-type ==

2018-10-03T09:11:55Z

essential typography properties

← Older revision		Revision as of 09:11, 3 October 2018
Line 12:		Line 12:
	* letter-spacing: increases or decreases the space between characters( negative values are allowed)		* letter-spacing: increases or decreases the space between characters( negative values are allowed)
	* text-shadow		* text-shadow
			* text-indent

	==::first-letter and ::first-line :first-of-type ==		==::first-letter and ::first-line :first-of-type ==

2018-10-03T09:00:18Z

CSS for typography

← Older revision		Revision as of 09:00, 3 October 2018
Line 14:		Line 14:


	==::first-letter and ::first-line===		==::first-letter and ::first-line :first-of-type ==
			''':first-of-type''' selector in CSS allows you to target the first occurrence of an element within its container.

	p::first-letter is a CSS pseudo class that applies to the the first letter of an element		<pre>
			p::first-of-type {
			font-size: 14pt;
			font-wieght:bold;
			}
			</pre>


			'''p::first-letter''' is a CSS pseudo class that applies to the the first letter of an element

	<pre>		<pre>
Line 26:		Line 35:


	p::first-line is a CSS pseudo class that applies to the the first line of an element		'''p::first-line''' is a CSS pseudo class that applies to the the first line of an element

	<pre>		<pre>

2018-10-03T08:56:01Z

CSS for typography

@@ Line 12: / Line 12: @@
 * letter-spacing: increases or decreases the space between characters( negative values are allowed)
 * text-shadow
 ==Using fonts==

2018-10-03T08:51:39Z

Ppen fonts libraries

2018-10-03T08:51:24Z

= locally

← Older revision		Revision as of 08:51, 3 October 2018
Line 83:		Line 83:
	To use a custom font, the font file has to be stored somewhere, either '''locally''' (same folder as your site) or remotely.		To use a custom font, the font file has to be stored somewhere, either '''locally''' (same folder as your site) or remotely.

	=== locally ==		=== locally ===
	* download a font from: https://fontlibrary.org/		* download a font from: https://fontlibrary.org/
	* save the font files (.ttf .woff) on your website folder, best in a folder dedicate to fonts		* save the font files (.ttf .woff) on your website folder, best in a folder dedicate to fonts
Line 129:		Line 129:
	</html>		</html>
	</source>		</source>


	==Ppen fonts libraries==		==Ppen fonts libraries==

2017-10-06T07:27:12Z

essential typography properties

← Older revision		Revision as of 07:27, 6 October 2017
Line 5:		Line 5:
	* font-size: ''body in pt, rest of elements in em''		* font-size: ''body in pt, rest of elements in em''
	* font-weight: normal or bold		* font-weight: normal or bold
	* font-style: ~~regular~~ or italic		* font-style: normal or italic
	* font-family		* font-family
	* color		* color

2017-10-06T07:25:38Z

essential typography properties

← Older revision		Revision as of 07:25, 6 October 2017
Line 4:		Line 4:
	==essential typography properties==		==essential typography properties==
	* font-size: ''body in pt, rest of elements in em''		* font-size: ''body in pt, rest of elements in em''
	* font-weight: ~~regular~~ or bold		* font-weight: normal or bold
	* font-style: regular or italic		* font-style: regular or italic
	* font-family		* font-family

2016-10-04T11:23:52Z

essential typography properties

← Older revision		Revision as of 11:23, 4 October 2016
Line 4:		Line 4:
	==essential typography properties==		==essential typography properties==
	* font-size: ''body in pt, rest of elements in em''		* font-size: ''body in pt, rest of elements in em''
	* font-~~height~~: regular or bold		* font-weight: regular or bold
	* font-style		* font-style: regular or italic
	* font-family		* font-family
	* color		* color
Line 12:		Line 12:
	* letter-spacing: increases or decreases the space between characters( negative values are allowed)		* letter-spacing: increases or decreases the space between characters( negative values are allowed)
	* text-shadow		* text-shadow


	==Using fonts==		==Using fonts==