DEV Community

Cover image for Day 86/100 Font Weight
Rio Cantre
Rio Cantre

Posted on • Edited on • Originally published at dev.to

3 1

Day 86/100 Font Weight

Finding the right balance on details needed to accomplish the ideal design must value the hierarchy of context and establish possible outcomes to solidify the final result.

banner

The font-weight property can take any one of these keyword values:

  • bold: Bold font weight.
  • normal: Normal font weight. This is the default value.
  • lighter: One font weight lighter than the element’s parent value.
  • bolder: One font weight bolder than the element’s parent value

Numerical values can range from 1 (lightest) to 1000 (boldest), but it
is common practice to use increments of 100. A font weight of 400 is equal to the keyword value normal, and a font weight of 700 is equal to bold.

Code Snippets

let season = 'summer';

if (season === 'spring') {
    console.log('It\'s spring! The trees are budding!');
} else if (season === 'winter') {
    console.log('It\'s winter! Everything is covered in snow.');
} else if(season === 'fall') {
    console.log('It\'s fall! Leaves are falling!');
} else  if(season === 'summer') {
    console.log('It\'s sunny and warm because it\'s summer!');
} else {
    console.log('Invalid season.');
}
Enter fullscreen mode Exit fullscreen mode

a11y myths

Web accessibility is just a developer's job

It's a team effort. Designers create accessible UIs, developers build it, QA engineers do the accessibility testing, PMs make sure that accessibility is included in the team processes, legal team checks if a product is risk free from an accessibility perspective, content managers adjust content to be compliant.

resource

Top comments (1)

Collapse
 
tris909 profile image
Tran Minh Tri

Keep it up. Good luck

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay