TOPIC 2 Flashcards
It has a huge impact on how the readers experience a website. The right font can create a strong identity for your brand.
Choosing a font
Using a ______ that is easy to read is important. This adds value to your text. It is also important to choose the correct color and text size for the font.
Font
What are the generic font families
Serif fonts
Sans-serif
Monospace
Cursive
Fantasy
have a small stroke at the edges of each letter. They create a sense of formality and elegance.
Serif Fonts
fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
Sans-serif
fonts - here all the letters have the same fixed width. They create a mechanical look.
Monospace
imitate human handwriting
Cursive
are decorative/playful fonts.
Fantasy Fonts
property sets the size of the text.
Font Sizes
Its value can be an absolute, or relative size
Font Sizes
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Always use the proper HTML tags, like like < h1 > - < h6 > for headings and < p > for paragraphs.
Font Sizes
is relative to the font size of the parent element. depends on the nesting of elements and can result in cumulative scaling if nested deeply. is useful for scaling elements relative to their parent.
Em
is relative to the font size of the root element (). remains consistent throughout the document, as it always refers to the root font size. is ideal for designs requiring consistent global scaling.
Rem
What are the similarities of em and rem
- Both are relative units in CSS and are not fixed like pixels (px).
- They support scalable designs, making them ideal for responsive layouts.
- Both are used for styling properties like font size, padding, and margins.
- They allow flexibility and adaptability in designs based on their respective references.
Scaling fonts with em and rem in CSS allows for flexible and responsive design. Both units are relative to the font size of a parent element. However, em is relative to the font size of the nearest parent, while rem is relative to the font size of the root element (html).
Scaling fonts with em and rem
The text size can be set with a vw unit, which means the “viewport width”.
Viewport Units
That way the text size will follow the size of the browser window
Viewport Units
These keywords make the font size larger or smaller relative to the parent element’s font size
Larger and Smaller
These keywords work similarly for font size as they do for other properties. They set the font size to be ________, ________, or ______.
Inherit, initial, annd unset
is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified.
Text align property
When it is set to “justify”, each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers)
Text align property
can be used to change the text direction of an element:
The direction and unicode-bidi properties
Control the indentation of text using ____________
the text-indent property.
Adjust line height to control spacing between lines of text.
Line Height (line-height)
Change letter spacing for character spacing.
Letter Spacing (letter-spacing)
are used to create space around elements, outside of any defined borders.
Margin
To shorten the code, it is possible to specify all the margin properties in one property. The margin property is a shorthand property for the following individual margin properties: margin-top, margin-right, margin-bottom, margin-left
Margin Short hand property
are used to generate space around an element’s content, inside of any defined borders.
Padding
To shorten the code, it is possible to specify all the padding properties in one property. The padding property is a shorthand property for the following individual padding properties: padding-top, padding-right, paddingbottom, padding-left
Padding ShortHand Porperty
